Free Mermaid Diagram Editor
Write Mermaid source and see the diagram as you type, then copy the SVG or check the source for missing titles and descriptions.
What is a Mermaid Diagram Editor?
Mermaid draws diagrams from plain text, so a flowchart or sequence diagram lives next to your code and changes in the same pull request. This editor renders Mermaid source as you type and gives you the SVG.
It runs Mermaid 12 in strict security mode, so HTML in labels is escaped and click handlers are off. Check mode reads the source without drawing it and reports the diagram type, direction, title, theme and whether accessibility text is present.
Key Features
Live Preview
The diagram redraws as you edit, and syntax errors name the line and the tokens Mermaid expected.
SVG to Copy or Save
SVG code shows the exact markup Mermaid produced, ready for docs, slides or a design tool.
An Accessibility Check
Check mode flags diagrams with no accTitle or accDescr, which screen readers need to describe a diagram.
Every Diagram Type
Flowcharts, sequence, class, state, ER, Gantt, pie, mind maps, timelines, C4 and the newer beta types all render.
Nothing Uploaded
Mermaid runs in your browser, so diagrams of private systems stay on your device.
Perfect for everyone
- Developers documenting systems in Markdown
- Technical writers
- Architects sketching flows
- Anyone writing diagrams for GitHub or GitLab
How to Use the Mermaid Diagram Editor
Write source, watch the preview, and take the SVG or the check report.
Pick a Diagram Type
Start with a keyword such as flowchart LR, sequenceDiagram or erDiagram, or load a sample.
Write and Watch
Add nodes, messages or entities line by line. If a line breaks the diagram, the error names it.
Check the Source
Switch to Check to confirm the type, direction and title, and to see whether accessibility text is missing.
Export the SVG
Switch to SVG code to copy the markup, or download it as an .svg file.
Mermaid Source, Checked
Each row is Mermaid source, and each answer is this editor’s Check mode report for it. Spot the missing accessibility text before you reveal the answer.
“flowchart LR accTitle: Release flow accDescr: A pull request is reviewed, merged, and deployed after checks pass. PR[Pull request] --> Review{Approved?} Review -->|Yes| Merge[Merge to main] Review -->|No| PR Merge --> Checks[CI checks] Checks --> Deploy([Deploy])”
“sequenceDiagram participant Browser participant API Browser->>API: POST /api/orders API-->>Browser: 201 Created”
“--- title: Order states config: theme: neutral --- stateDiagram-v2 direction LR [*] --> Pending Pending --> Paid: payment captured Paid --> Shipped Shipped --> [*]”
“%%{init: {'theme': 'dark'}}%% %% build pipeline graph TD Lint --> Test Test --> Build”
“gantt title Launch plan dateFormat YYYY-MM-DD section Build API :a1, 2026-11-02, 10d Web app :after a1, 7d section Launch Release :milestone, 2026-11-20, 0d”
“erDiagram accTitle: Shop schema CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains”
“pie title Pets adopted "Dogs" : 386 "Cats" : 85 "Rats" : 15”
“flowchat TD A --> B”
“zenuml title Order Client->Server.placeOrder()”
“--- title: Unclosed flowchart TD A --> B”
Which Mermaid Diagram to Use
Mermaid has over twenty diagram types. These ten cover most documentation, each with the keyword that starts it.
Flowchart
Steps and decisions joined by arrows. Start with flowchart and a direction such as TD or LR.
“What keyword is an older alias for flowchart?”
Sequence Diagram
Messages between participants in time order, ideal for API calls and auth flows.
“Which arrow draws a dashed reply?”
Class Diagram
Classes with fields, methods and relationships such as inheritance and composition.
“Which keyword starts one?”
State Diagram
States and the transitions between them, with [*] as the start and end.
“What does [*] mean?”
Entity Relationship Diagram
Tables and their cardinality, written with crow’s foot markers such as ||--o{.
“Which keyword starts one?”
Gantt Chart
Tasks on a timeline with dates, durations and dependencies, grouped into sections.
“Which line sets how dates are written?”
Pie Chart
Shares of a whole from labelled values. The title can sit on the pie line itself.
“Are pie values percentages?”
Mind Map
A central idea with branches, set out by indentation rather than arrows.
“What sets a node’s level?”
Git Graph
Commits, branches and merges, useful for explaining a branching strategy.
“Which command adds a commit?”
C4 Diagram
Software architecture at context, container and component level, following the C4 model.
“Which keyword draws the top level?”
Flowchart Syntax at a Glance
Flowcharts are the most used Mermaid type. These six rules cover most of what you’ll write.
Node Shapes
Brackets set the shape: A[box], B(rounded), C{decision}, D([stadium]) and E[(database)].
Links
--> is an arrow, --- a line, -.-> dotted and ==> thick. Add text with -->|label|.
Direction
TD or TB draws top to bottom, LR left to right, and BT and RL reverse them.
Subgraphs
Group nodes between subgraph Name and end. A subgraph can set its own direction.
Styling
classDef defines a style and class applies it, so colours stay in one place instead of on every node.
Quoted Labels
Wrap labels with brackets, quotes or symbols in double quotes, as in A["Total (EUR)"].
Configuring a Diagram
Diagram settings can live in the source itself, so they travel with the diagram wherever it’s rendered.
Frontmatter Config
A block between --- lines at the top sets title and config, such as the theme. It’s the current way to configure a diagram.
Init Directives
The older %%{init: …}%% line still works, but Mermaid deprecated directives in version 10.5 in favour of frontmatter.
Themes
Mermaid ships default, neutral, dark and forest themes, and base, which you customise with themeVariables.
Hand-Drawn Look
Setting look to handDrawn gives a sketched style, useful for early designs that shouldn’t look final.
Security Level
Strict mode, used here, escapes HTML in labels and turns off click handlers. Sites rendering untrusted diagrams should keep it on.
Layout Engines
The default dagre layout suits most diagrams. The ELK layout handles large ones better but needs its plugin registered.
Making Mermaid Diagrams Accessible
A diagram carries meaning that screen reader users can’t see. Mermaid has two lines for this, and a few habits make diagrams easier for everyone to read.
accTitle
A short name for the diagram, such as Release flow. Mermaid adds it to the SVG as its title element.
accDescr
One or two sentences on what the diagram shows. Use accDescr with braces for a description over several lines.
Describe the Conclusion
Say what the reader should take away, such as the order of steps, rather than listing every node.
Don’t Rely on Colour Alone
If red nodes mean failures, also say so in the label or legend, since not everyone sees the colour difference.
Keep Text Readable
Short labels and a left to right layout for wide flows keep text large enough when the diagram is scaled down.
Mermaid Pitfalls
When a diagram won’t render or comes out wrong, one of these is usually the reason.
The Word end in Flowcharts
A node named end in lowercase closes a subgraph and breaks the diagram. Write End or put it in quotes.
Letters After a Link
A---oB draws a circle edge and A---xB a cross. Add a space or rename the node if you meant a node called oB.
Special Characters in Labels
Brackets, quotes and semicolons inside labels confuse the parser. Wrap the label in double quotes.
Older Renderers
GitHub, GitLab and wikis bundle their own Mermaid version, so newer types may not render there yet.
Beta Keywords
Types such as architecture-beta and treemap-beta may change syntax between releases. Pin the Mermaid version if you depend on them.
No Accessibility Text
A rendered diagram is an image to screen readers. Add accTitle and accDescr so it can be described.
Fonts in Exported SVG
The SVG names fonts rather than embedding them, so it can look different on a machine without them. Convert text to paths in a design tool if it must match exactly.
Where Mermaid Diagrams Are Used
Mermaid source renders in many places, so one diagram can live in several of them.
README Files and Pull Requests
GitHub and GitLab render mermaid code blocks in Markdown, so diagrams sit next to the code they describe.
Documentation Sites
Docusaurus, MkDocs and VitePress support Mermaid with a plugin or built in, keeping architecture docs in version control.
Notes and Wikis
Obsidian and Notion render Mermaid code blocks, which suits personal notes and team wikis.
Design Reviews
Sketch a flow or sequence while discussing a design, then paste the SVG into the review doc.
Slides and Reports
Export the SVG for decks and reports, where it scales without blurring.