Preview Mermaid diagrams inside Markdown as you type, and download any of them as SVG or PNG with the buttons above the diagram.
Diagrams live inside ordinary Markdown, so you can write the explanation and the diagram in one document.
Add a ```mermaid code block and type your diagram — or pick a type below and click "Try in editor".
The diagram re-renders as you type. Syntax errors show the message and the line, instead of a blank space.
Click SVG or PNG above a diagram to download it, or export the whole document as HTML or PDF.
Thirteen diagram types with a working example each. Click Try in editor to load one into the editor above, then change it.
flowchartProcesses, decision trees, pipelines, architecture overviews.
flowchart TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Ship it]
B -- No --> D[Debug]
D --> BsequenceDiagramAPI calls, authentication flows, messages between services over time.
sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: GET /user/42
API->>DB: SELECT * FROM users
DB-->>API: row
API-->>Browser: 200 OK (JSON)classDiagramObject models, domain models, type hierarchies.
classDiagram
class Animal {
+String name
+speak() void
}
class Dog {
+fetch() void
}
Animal <|-- DogstateDiagram-v2UI states, order lifecycles, finite state machines.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: fetch()
Loading --> Success: data
Loading --> Error: failure
Error --> Idle: retry
Success --> [*]erDiagramDatabase schemas and data models.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
string name
string email
}ganttProject timelines, sprints, release plans.
gantt
title Release plan
dateFormat YYYY-MM-DD
section Backend
API design :done, a1, 2026-01-05, 5d
Implementation :active, a2, after a1, 10d
section Frontend
UI :b1, 2026-01-12, 12dpieSimple proportions, survey results.
pie title Time spent on a README
"Writing" : 45
"Formatting" : 30
"Fixing broken tables" : 25mindmapBrainstorming, topic overviews, outlines.
mindmap
root((Docs))
Guides
Getting started
Tutorials
Reference
API
CLItimelineRelease history, roadmaps, events in order.
timeline
title Project history
2024 : First release
2025 : Plugin API : 1.0
2026 : Cloud syncgitGraphBranching strategies and release workflows in contributing guides.
gitGraph
commit id: "init"
branch feature
checkout feature
commit id: "add login"
checkout main
merge feature
commit id: "v1.0"journeyUX flows with a satisfaction score per step.
journey
title Signing up
section Discover
Find the site: 5: User
Read the docs: 3: User
section Sign up
Fill the form: 2: User
Confirm email: 4: UserquadrantChartPrioritization matrices (impact vs. effort).
quadrantChart
title Feature priority
x-axis Low effort --> High effort
y-axis Low impact --> High impact
quadrant-1 Plan
quadrant-2 Do first
quadrant-3 Skip
quadrant-4 Maybe
Dark mode: [0.2, 0.8]
Offline sync: [0.8, 0.7]xychart-betaSmall bar and line charts inside docs.
xychart-beta
title "Weekly downloads"
x-axis [Mon, Tue, Wed, Thu, Fri]
y-axis "Downloads" 0 --> 500
bar [120, 230, 310, 280, 450]
line [120, 230, 310, 280, 450]Most “Syntax error in text” messages come from one of these four mistakes.
flow TD A --> B
flowchart TD A --> B
The first line must be an exact keyword: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, mindmap, timeline, gitGraph, journey…
A[Hello World (v2)] --> B
A["Hello World (v2)"] --> B
Wrap labels containing parentheses, colons, or other punctuation in double quotes.
flowchart LR start --> end
flowchart LR start --> End
Lowercase "end" closes a subgraph and breaks the diagram. Capitalize it, or use a quoted label: done["end"].
dateFormat DD/MM/YYYY Task :2026-01-15, 3d
dateFormat YYYY-MM-DD Task :2026-01-15, 3d
dateFormat must describe the dates you actually wrote, or tasks land in the wrong place or the chart fails.
Renders here but not on GitHub? See why Mermaid diagrams don’t render on GitHub.
Paste the block into the editor above first: if it renders here, the diagram is fine and the problem is where you’re viewing it.
The fence must be tagged exactly mermaid — three backticks followed by the word mermaid, at the start of the line. A tag like ```flowchart or ```graph is just a code block, and an indented fence is treated as part of a list.
Most editors need a newer version or a plugin. VS Code needs 1.121 or later; JetBrains IDEs need the bundled Mermaid plugin switched on; Zed needs 0.225.0 or later; Sublime Text, Neovim, and Notepad++ need a plugin. See the full list in our editor guide.
GitHub upgrades its bundled Mermaid on its own schedule, so brand-new diagram types or options may work here first. Put a block containing just "info" on GitHub to see its version.
Read the message — it normally names the line. The four mistakes above (misspelled keyword, unquoted punctuation, "end" as a node name, mismatched Gantt dates) cause most of them.
GitHub Pages (Jekyll), Hugo, and most static-site generators only pass the code block through; the site must load the Mermaid script itself.
GitHub-specific causes are covered in why Mermaid diagrams don’t render on GitHub.
Write a diagram once and it displays in most places developers keep docs. Editor-by-editor shortcuts are in our Markdown preview in any editor guide.
| GitHub | ```mermaid code blocks in .md files, issues, PRs, discussions, and wikis | |
| GitLab | ```mermaid code blocks in Markdown | |
| VS Code | Built-in Markdown preview since version 1.121 | |
| Visual Studio 2026 | Built-in Markdown preview renders Mermaid (with zoom controls); the 2022 editor needs the Markdown Editor v2 extension | |
| JetBrains IDEs | Bundled Mermaid plugin — disabled by default; enable it under Settings → Plugins → Installed | |
| Zed | Built-in Markdown preview since Zed 0.225.0 | |
| Obsidian | ```mermaid code blocks in notes | |
| Typora | ```mermaid code blocks render inline as you type | |
| Sublime Text, Neovim, Notepad++ | Only through a plugin (MarkdownPreview with SuperFences, markdown-preview.nvim, Markdown Panel) | |
| Notion | Code block with the language set to Mermaid | |
| GitHub Pages (Jekyll) | Only if the site adds the Mermaid script itself |
Text-based diagrams suit docs that change with the code; visual editors suit one-off, free-form drawings.
| Feature | Mermaid | PlantUML | draw.io |
|---|---|---|---|
| Diagrams written as plain text | |||
| Renders natively in GitHub Markdown | |||
| Diffs cleanly in pull requests | |||
| Runs in the browser, no server | Needs a server | ||
| Full UML coverage | Common diagrams | Drawn by hand | |
| Free-form visual editing |
All tools are free, run in your browser, and require no account.
Edit Markdown with a real-time preview, Mermaid, KaTeX math, drag-and-drop files, and one-click export.
Load any public README, test it, and look up any GitHub syntax in the complete cheat sheet.
Typeset equations as you type, with a copy-ready KaTeX cheat sheet of 180+ commands.
Pick sections, fill in your project, and download a GitHub-ready README.md with badges and a TOC.
Paste ChatGPT, Claude, or Gemini output and read it formatted, with tables, code, and math.
A plain-English introduction: what Markdown and .md files are, where it came from, and where it is used.
Preview .md files in Drive, edit in Docs' Markdown mode, and paste, convert, or export Markdown.
Six free tools tested with the same document: rendering, privacy, and phone support compared.
16 causes found by symptom — tables, lists, image paths, code fences, alerts, Mermaid, math — with tested fixes.
Preview shortcuts, settings verified on VS Code 1.141, built-in Mermaid and math, extensions, and fixes.
Open and read Markdown files formatted on Windows, Mac, Linux, iPhone, Android, Word, and Google Docs.
Exact preview shortcuts for Visual Studio, JetBrains, Zed, Xcode, Sublime, Neovim, Obsidian, and more.
Six free ways to read .md files in Chrome, Edge, Firefox, or Safari — compared for privacy and features.