Mermaid Diagram Editor

Mermaid Diagram Editor: Create Diagrams as Code

Mermaid is a diagramming language that renders text definitions into SVG diagrams. Write a flowchart, sequence diagram, or ER diagram in plain text and see it rendered in real time. This editor parses your Mermaid syntax client side using the official Mermaid.js library and displays the result as a pannable, zoomable SVG preview.

What is Mermaid?

Mermaid is a JavaScript-based diagramming and charting tool that uses text-based definitions to create diagrams. Instead of drawing diagrams manually in a GUI tool, you write a simple text description and Mermaid renders it as an SVG image. It was created by Knut Sveidqvist and is now maintained by the open source community. Mermaid is widely used in documentation (GitHub, GitLab, Notion), README files, and technical documentation. It supports flowcharts, sequence diagrams, class diagrams, entity relationship diagrams, Gantt charts, and many other diagram types. The syntax is intentionally simple so non-technical stakeholders can read and understand the diagram definitions without special training.

How to Use

1. Type Mermaid syntax in the editor (with line numbers and bracket matching), or click a template button to load a starting point
2. The preview updates as you type with a short debounce
3. Drag the divider between editor and preview to resize the panels
4. Pan the preview by clicking and dragging, scroll to zoom
5. Pick a diagram theme from the dropdown (Default, Dark, Forest, Neutral)
6. Export with SVG/PNG download buttons, or Copy PNG to paste directly into other apps
7. Click Share to generate a permalink URL with your diagram and theme encoded in the hash

Supported Diagram Types

Flowcharts

The most common Mermaid diagram. Define direction with TD (top down), LR (left right), RL, or BT. Nodes use brackets for shapes: [rectangle], (rounded), {diamond}, ([stadium]). Connect nodes with arrows: -->, -.->, ==>.

Sequence Diagrams

Model interactions between participants over time. Arrows show synchronous (->>) and asynchronous (-->>) messages. Add activate/deactivate blocks, alt/else conditions, and loop sections to represent complex flows.

Entity Relationship Diagrams

Define database schemas with entities and relationships. Use standard cardinality notation: ||--o{ (one to many), }|--|{ (many to many). Add attributes with types directly inside entity blocks.

Class Diagrams

UML class diagrams with inheritance (<|--), composition (*--), and aggregation (o--). Define methods and properties with visibility modifiers (+ public, - private, # protected). See the Class Diagram example for a working UML template with classes, interfaces, and relationships.

State Diagrams

Model state machines with transitions. Use [*] for start and end states. Add conditions, nested states, and notes to document complex workflows.

Gantt Charts, Pie Charts, Mind Maps, Git Graphs

Mermaid also supports project timelines (Gantt), data distribution (pie), hierarchical brainstorming (mindmap), and branch visualization (gitGraph). Click the template buttons above the editor to see working examples.

Tips

Mermaid syntax is whitespace sensitive in some contexts. Indentation matters inside subgraphs and nested structures. If a diagram fails to render, check for missing closing brackets, unmatched quotes, or reserved keywords used as node IDs.

Working on documentation? Preview your full Markdown in the Markdown Preview. Need to clean up code snippets inside your diagrams? Use the Code Formatter. Exported your diagram and need to format the JSON metadata? The JSON Formatter handles that. Compare two versions of a diagram definition with the Diff Checker. Need to edit SVG output? The SVG Toolkit provides advanced editing capabilities.