Design system architecture, sequence lifecycles, flowcharts, ER diagrams, and Mermaid code in one unified workspace.
Continue Working
Create a Diagram
⇄
Sequence Diagram
Lifelines, sync/async messages, return calls, activations, and notes.
🔀
Flowchart Maker
Process logic, decision diamonds, branch conditions, and algorithms.
🏗️
Architecture Diagram
Cloud stacks, microservices, caches, event buses, and network VPCs.
🗄️
ER Diagram
Relational database schemas, table columns, PK/FK, and 1:N relations.
📦
UML Class Diagram
Object models, interfaces, methods, visibility indicators, and inheritance.
🧜♀️
Mermaid Editor
Live Mermaid.js code editor with vector preview and instant export.
Start From a Template
My Saved Diagrams
SEQUENCESaved
100%
Export Diagram
Select the format you would like to download your diagram in:
Mermaid Source Syntax
Compatible with GitHub markdown, GitLab, Notion, and Mermaid CLI:
Mermaid code parsing, preview rendering, and export run 100% in your browser.
Mermaid Editor Online — Live Markdown Diagram Generator
Write Mermaid markdown and watch flowcharts, sequence diagrams, and class graphs render instantly.
Runs in your browser
Free, no signup
Mermaid is the standard diagramming language for developer documentation, natively supported by GitHub, GitLab, Notion, and Obsidian. Writing and debugging diagrams in raw markdown without a live preview is slow.
ToolDuck Mermaid Editor gives you a real-time, side-by-side editing workspace with live preview, syntax error highlighting, starter templates for every diagram type, and one-click SVG/PNG export.
How to use this tool
1Type or paste your Mermaid code into the code editor on the left.
2Watch the diagram render immediately in the live canvas on the right.
3Use the template shortcuts to quickly insert flowcharts, sequence diagrams, class models, state machines, or Git branch graphs.
4Export your rendered diagram as clean vector SVG or high-resolution PNG for slides and tickets.
Frequently asked questions
Which Mermaid diagram types are supported?
All standard Mermaid diagram types are supported, including flowcharts (graph TD/LR), sequence diagrams (sequenceDiagram), class diagrams (classDiagram), entity-relationship models (erDiagram), state diagrams (stateDiagram-v2), and git graphs (gitGraph).
How does syntax error handling work?
If a syntax error occurs while typing, the editor highlights the exact parsing error message in the preview panel without crashing the workspace.
Can I export the rendered diagram as a high-res image?
Yes. You can export directly to SVG vector graphics or high-resolution 2x retina PNG images with one click.