Build flowcharts, sequence diagrams, state machines, and class diagrams using plain text Mermaid.js syntax with instant SVG rendering and zoomable canvas.
All formatting, parsing, decoding, and validation executes entirely within your browser using modern Web APIs and JavaScript. Your tokens, JSON payloads, regex inputs, and queries never leave your computer.
Diagramming software architectures, microservice communication sequences, and database entity relationships directly in code enables version-controlled, reproducible technical specifications.
DevRef's Online Mermaid Editor compiles markdown-inspired Mermaid syntax into crisp, vector-sharp SVG diagrams in real time. It features syntax error detection, sample templates for all major diagram types (flowchart, sequence, class, state, Gantt, gitGraph), pan-and-zoom preview, and one-click SVG or PNG downloads. All diagrams render 100% locally in your browser without saving confidential infrastructure designs to external databases.
Mermaid supports flowcharts (graph TD/LR), sequence diagrams (sequenceDiagram), class diagrams (classDiagram), state diagrams, entity-relationship diagrams (erDiagram), Gantt charts, pie charts, and git graph branches.
Yes. You can paste the raw Mermaid syntax into GitHub markdown fenced with ```mermaid, or export the rendered SVG directly into your repo's docs folder.
No. The Mermaid compilation engine runs purely in client-side JavaScript. No diagram text, schemas, or generated vectors are transmitted to any server.