Mermaid Editor
Waiting for input
What is Mermaid Diagram Editor?
Mermaid is a JavaScript-based diagramming tool that uses Markdown-like text syntax to generate various diagrams. No need to manually drag and drop shapes - just write simple text descriptions to automatically create beautiful flowcharts, sequence diagrams, class diagrams, and more. This tool provides an online Mermaid editing environment with real-time preview, drag-and-zoom navigation, and export capabilities, helping developers quickly create and share diagrams. Mermaid is best for diagrams that should live close to text or code, such as flows, sequence diagrams, Gantt charts, and architecture sketches. Its strength is versionability and fast editing, not pixel-perfect illustration. For complex diagrams, readability, node length, theme, layout direction, and export format still need review, because valid Mermaid code can still produce a crowded or confusing visual result.
How to Use
How to use
- Enter Mermaid syntax in the left editor
- The right panel renders the diagram in real-time
- Use mouse to drag and scroll wheel to zoom
- Click export buttons to save as PNG or SVG
Diagram Checks
- Render after each meaningful edit; Mermaid errors are often caused by indentation, unescaped punctuation, or unsupported syntax for the selected diagram type.
- Before exporting, confirm that labels, arrows, and line breaks remain readable at the size where the diagram will be used.
Use Cases
Technical Principle
Mermaid is an open-source diagram rendering library started by Knut Sveidqvist in 2014. Its core idea is to take a human-readable DSL (domain-specific language) and, through a parser, turn it into an SVG graphic. The full pipeline has three steps: a lexer/parser (generated by jison) parses the source into an internal data structure; a layout algorithm specific to the diagram type computes the coordinates of nodes and edges; finally, d3 renders the layout as SVG elements. Different diagrams use different layout engines: flowchart defaults to dagre (a layered directed-graph layout), and from v10 also supports ELK (more powerful but heavier); sequenceDiagram uses a custom timing layout that places participants horizontally and stacks messages vertically; gantt lays out tasks manually on a time axis with dependencies; classDiagram and stateDiagram also lean on dagre. The layout algorithm is what determines readability - dagre follows the Sugiyama framework to assign ranks, minimize edge crossings, and tighten spacing, which works well for general-sized flowcharts. Compared to Graphviz, Mermaid's syntax is closer to natural language (e.g. A --> B) and renders natively in the browser with live preview. Graphviz's DOT language is more low-level, and its layout engines (fdp, neato, ...) are more mature, but it needs a local install and its default style looks dated. Mermaid currently supports more than 15 diagram types - flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, and so on - covering the vast majority of software-engineering drawing needs.
- Parsing: a jison-generated parser turns the DSL text into an internal AST; each diagram type has its own grammar file.
- Layout algorithm: flowchart uses dagre for layered directed-graph layout and can switch to ELK; sequence and gantt charts use their own dedicated layout logic.
- Rendering engine: SVG is drawn with d3; nodes use g/rect/path/text elements, and arrows are defined by markers.
- Diagram types: supports flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap, and a dozen more.
- Comparison with Graphviz: Mermaid has friendlier syntax and native web support; Graphviz has finer layout, suited to large and complex graphs.
- Theming: switch between default, dark, forest, neutral, and other built-in themes via themeVariables configuration or the init directive.
Examples
Flowchart
flowchart TD
A[Start] --> B{Logged in?}
B -- Yes --> C[Home page]
B -- No --> D[Login page]
D --> E[Enter credentials]
E --> C
C --> F[End]Sequence Diagram
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: User data
Server-->>Browser: JSON responseGantt Chart
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements :a1, 2026-06-01, 7d
UI Design :a2, after a1, 10d
section Development
Frontend :b1, after a2, 20d
Backend :b2, after a2, 18d
section Testing
Integration :c1, after b1, 7dFAQ
Which diagram types does Mermaid support?
Mermaid covers flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, user journey maps, Git graphs, mindmaps, and quadrant charts. The first line of your code declares the type (e.g. 'flowchart TD' or 'sequenceDiagram').
Why does my diagram show a syntax error?
The most common causes are missing semicolons or arrow operators, mismatched brackets in node labels (use quotes around text with special characters: A["Hello (world)"]), wrong arrow syntax for the diagram type (--> for flowchart, ->> for sequence), and indentation issues in subgraphs. The error panel usually points to the line where parsing stopped.
How do I export the diagram as an image?
Use the export buttons to save as SVG (vector, scalable, recommended for slides and docs) or PNG (raster, ready for chat and email). Copy the SVG markup if you want to embed it directly in HTML or further edit it in Figma or Illustrator.
Can I customize colors and styles?
Yes. Use 'classDef' to define a CSS-like style and apply it with 'class A,B,C myStyle'. Inline overrides like 'style A fill:#f9f,stroke:#333' work for one-off changes. For global theming, set %%{init: {'theme':'forest'}}%% on the first line - built-in themes are default, forest, dark, neutral, and base.
Are there length or complexity limits?
Mermaid renders happily into the hundreds of nodes, but layout time grows non-linearly past that. If a diagram is slow or unreadable, split it into multiple linked diagrams or use subgraphs to group related nodes; auto-layout picks worse positions when too many edges cross.
How do I add hyperlinks or click handlers to nodes?
Use 'click NodeId "https://example.com"' to make a node a link, or 'click NodeId callback "tooltip"' to fire a JavaScript callback registered with mermaid.parseError. Links work in exported SVG as long as the embedding page does not strip them.
Where else can I render the same Mermaid code?
GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code (with extensions), and most modern documentation tools render Mermaid code blocks natively. Paste the same code there and it will render with each platform's chosen theme.