📖 What is this tool?
Mermaid is a text-based diagramming language that turns simple syntax into professional diagrams. This live editor supports all major Mermaid diagram types: flowcharts, sequence diagrams, entity-relationship diagrams, Gantt charts and pie charts. Write or paste Mermaid code on the left and see the rendered diagram update instantly on the right. Use it to prototype diagrams for GitHub READMEs, Notion docs, Confluence pages or technical documentation. Everything runs in your browser using Mermaid.js — your diagram code is never sent to a server.
💡 Example
Input
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
Output
Live flowchart diagram rendered in browser
🛠️ Common Use Cases
- Create architecture diagrams for documentation
- Build sequence diagrams for API flows
- Design ER diagrams for database planning
- Generate Gantt charts for project timelines
- Create flowcharts for process documentation
📝 Supported Diagram Types
graph TD / graph LR — flowcharts (top-down or left-to-right)sequenceDiagram — interaction flows between participantserDiagram — entity-relationship diagrams for database schemasgantt — project timelines with tasks, dependencies and milestonespie — simple pie charts with labeled segmentsclassDiagram — UML class diagrams with inheritance and associationsstateDiagram-v2 — state machine diagrams with transitions
Each type has its own syntax. For dedicated editors with templates, use the Flowchart Builder, Sequence Diagram Builder, ERD Generator or Gantt Chart Builder.
⚠️ Common Mistakes
- Missing the diagram type keyword on the first line — every Mermaid diagram must start with
graph, sequenceDiagram, erDiagram, gantt, etc.
- Mixing syntax from different diagram types — flowchart arrows (
-->) do not work inside a sequenceDiagram block; each type has its own grammar
- Indentation issues — while Mermaid is not whitespace-sensitive like Python, incorrect indentation inside blocks like
loop or subgraph can make code hard to read and debug
- Using unsupported diagram types — not all Mermaid types are supported in every renderer; this editor supports the types listed above
❓ Frequently Asked Questions
What diagram types does Mermaid support? ▾
Mermaid supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs and more. This editor provides quick-start examples for the most common types.
Can I export Mermaid diagrams as images? ▾
Right-click the rendered SVG and save as SVG or use your browser's screenshot tool. For production use, the Mermaid CLI can export to PNG, SVG and PDF.
Where can I use Mermaid diagrams? ▾
Mermaid is supported in GitHub README files, GitLab, Notion, Obsidian, VS Code extensions, Confluence and many documentation platforms. It's the most widely-supported text-based diagram format.
Which platforms support Mermaid natively? ▾
GitHub (in Markdown files and issues), GitLab, Notion, Confluence, Obsidian, Docusaurus and many documentation tools render Mermaid code blocks automatically. Write your diagram here, then paste the code into a ```mermaid block.
Can I theme or style Mermaid diagrams? ▾
Yes — Mermaid supports built-in themes (default, dark, forest, neutral) via the init directive: %%{init: {'theme': 'dark'}}%%. You can also override individual styles with the style directive.
Is there a size limit for diagrams? ▾
There is no hard character limit, but very large diagrams (100+ nodes) may render slowly in the browser. For complex systems, break the diagram into subgraphs or separate diagrams for each subsystem.
🔒
Your data stays private. All processing happens entirely in your browser. Nothing is ever sent to our servers. You can use this tool offline after the page loads.