Can I use the output in GitHub Markdown?
Yes. Copy the Mermaid Markdown fence and paste it into GitHub issues, READMEs, pull requests, or docs that support Mermaid. GitHub renders fenced mermaid blocks natively.
Mermaid Editor
Preview Mermaid diagrams and export Markdown or SVG.
flowchart TD
A[Write Markdown] --> B{Need a diagram?}
B -->|Yes| C[Add Mermaid]
B -->|No| D[Ship docs]
C --> D
How to Use
- Type or paste Mermaid source in the left pane — it must begin with a diagram type such as
flowchart TDorsequenceDiagram - Watch the diagram render on the right as you type
- Click Copy Markdown to grab the fenced
mermaidblock for a README, issue, or docs page - Or click Download SVG to export the rendered picture for a slide deck or PDF
Diagrams as Markdown, Not Images
Mermaid lets you describe a diagram in plain text and have it drawn for you. Instead of exporting a PNG from a drawing app and committing a binary file that nobody can edit, you commit a few lines of text inside a fenced code block:
```mermaid
flowchart TD
A[Write Markdown] --> B{Need a diagram?}
B -->|Yes| C[Add Mermaid]
B -->|No| D[Ship docs]
```Because the diagram is text, it diffs cleanly in pull requests, and a reviewer can see exactly which node or edge changed. GitHub, GitLab, Obsidian, Notion, and many static site generators render mermaid fences natively, so the same block you copy from here works in a README, an issue comment, or a docs page.
Supported diagram types
This editor renders every core Mermaid type: flowchart and graph for flowcharts, sequenceDiagram for message flows, classDiagram and erDiagram for structure and data models, stateDiagram for state machines, plus gantt, pie, journey, mindmap, timeline, and gitGraph. Your source is autosaved to this browser, and rendering happens locally — the diagram is never uploaded.
Frequently Asked Questions
Is the diagram rendered locally?
Yes. Rendering runs in your browser and the diagram source is never uploaded to a server.
Which diagram types are supported?
Flowcharts (flowchart and graph), sequence diagrams, class diagrams, state diagrams, ER diagrams, user journeys, Gantt charts, pie charts, mindmaps, timelines, and gitGraph.
Why does it say to start with a diagram type?
Every Mermaid diagram opens with a declaration such as flowchart TD or sequenceDiagram that tells Mermaid which renderer to use. Source that does not start with a supported type cannot be rendered.
What is the difference between the Markdown and SVG downloads?
Download Markdown gives you a .md file containing the mermaid code fence, which stays editable and re-renders wherever Mermaid is supported. Download SVG exports the rendered picture for places that cannot run Mermaid, such as a slide deck or a PDF.
Is my work saved if I close the tab?
Yes. The diagram source is autosaved to your browser local storage, so it is still there when you come back. Nothing is stored on a server.