Mermaid Diagram Editor

Free online Mermaid editor by Bee Tools. Supports flowcharts, sequence, Gantt, class and ER diagrams. Live preview, SVG/PNG export. Renders 100% in your browser.

Draw professional diagrams with text-based syntax and see instant previews. Describe any diagram in Mermaid's declarative syntax and Bee Tools will render it locally in your browser as a crisp vector graphic. Export to PNG or SVG for documents, slides and blogs.

Mermaid cheat sheet

What is Mermaid

Mermaid was created by Knut Sveidqvist in 2014 as a declarative, Markdown-style language for describing diagrams. Compared to drag-and-drop tools, Mermaid lets your diagrams live in version-controlled source files.

Quick reference

  • flowchart TD/LR — flowcharts. A-->B is a link, A{?} is a decision, A([Start]) is a stadium shape.
  • sequenceDiagram — sequence. Alice->>Bob: Hello sends a sync message; Bob-->>Alice: Hi is the response.
  • gantt — Gantt charts. Declare dateFormat then describe tasks with start dates and durations.
  • classDiagram — class diagrams. Define classes and relationships such as inheritance Animal <|-- Dog.
  • stateDiagram-v2 — state machines, great for UI/order/pipeline flow.
  • pie — pie charts via "Label" : value pairs.

Practical tips

  1. Keep node labels short — long labels break the layout.
  2. Use subgraphs to break complex diagrams into readable pieces.
  3. Customise colours with classDef for better readability.
  4. Sprinkle %% comments to make the source maintainable.

Edit the sample on the left and watch the rendered diagram on the right.

Open-source notice: Rendering powered by mermaid, MIT License. Copyright (c) 2014-2022 Knut Sveidqvist.

FAQs

What is Mermaid?
Mermaid is a JavaScript-based diagramming language created by Knut Sveidqvist. Using Markdown-like text it generates flowcharts, sequence diagrams, Gantt charts and more. Native support is built into GitHub, GitLab, Docusaurus and Obsidian.
Which diagram types are supported?
We support flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph and requirementDiagram out of the box.
Are my diagrams saved or uploaded?
No. Drawing happens entirely inside your browser. Closing the tab clears everything.
Will SVG/PNG export lose quality?
SVG is vector — sharp at any zoom level. PNG is rasterised at 2× resolution, good enough for most documents and slides.
How do I embed Mermaid in Markdown?
Wrap the code in a `mermaid` fenced block. GitHub, GitLab, Hugo, Hexo and Obsidian render it automatically.