Diagram Syntax Reference & Cheatsheet
A one-page cheatsheet for Mermaid-style flowchart, sequence, class, ER, Gantt, and mind-map syntax — every snippet tested, every example renders.
More tools
All free, all private — everything runs in your browser.
Mermaid Editor
Write Mermaid-style diagram code with a live preview, friendly syntax errors, zoom and pan, and PNG/SVG export. 100% in your browser.
Flowchart Maker
Build flowcharts interactively: add nodes, drag them, connect arrows, edit labels, then export PNG or SVG. Free, private, nothing uploaded.
Sequence Diagram
Type actors and messages in a small documented DSL and get a rendered sequence diagram with lifelines and arrows. Export PNG/SVG, 100% private.
UML Class Diagram
Describe classes with fields and methods and draw inheritance, realization, composition, and aggregation. Mermaid-style source or table editor. No upload.
ER Diagram
Paste CREATE TABLE statements (or use the table editor) and get an entity-relationship diagram with foreign-key crow's-foot connectors. PNG/SVG export.
Gantt Chart
Turn a simple task list (name, start, end, dependencies) into a Gantt chart with correct local date math. Export PNG/SVG. Free and private.
How to use Syntax Reference
- 1Browse the cheatsheet by diagram kind — flowchart, sequence, class, ER, Gantt, mind map.
- 2Copy any snippet with the copy button.
- 3Click 'open in editor' to load a snippet straight into the Mermaid Editor and tweak it.
- 4Every snippet on this page is tested against the engine, so nothing here can fail to render.
Syntax Reference FAQ
- Are these the official Mermaid docs?
- No — this is the reference for the syntax this site's engine actually renders (a documented Mermaid-style subset). Every snippet on the page is tested against the engine, so nothing here can fail to render.
- Can I try a snippet immediately?
- Yes — every snippet has a one-click 'open in editor' link that loads it into the Mermaid Editor.