mermaid.design is an online editor for Mermaid diagrams. Write plain-text mermaid syntax and watch it turn into flowcharts, sequence diagrams, ER diagrams, Gantt charts and more — rendered live as you type.
Everything runs locally in your browser: no account, no upload, no server round-trips. Your diagram code stays on your device, and every export is generated right where you work.
More than a paste-and-preview tool — a complete environment for designing, styling and exporting diagrams as code.
A lightweight CodeMirror editor with Mermaid syntax highlighting, inline error markers, and two-way canvas selection sync, paired with a live pan-and-zoom preview.
Edit labels and diagram elements directly on the canvas. Changes sync back to the Mermaid source, with shared selection and undo/redo between code and preview.
Write Mermaid faster with context-aware autocomplete, ready-to-use snippets, search and replace, one-click formatting, and inline syntax diagnostics.
Switch between the official mermaid SVG output and an ASCII engine that draws your diagram in plain text — perfect for terminals, code comments and docs.
Tune all 73 mermaid theme variables, start from 20+ built-in and designer presets, or derive a full palette from a single seed color — then export the theme as JSON or frontmatter.
Fine-tune 438 Mermaid rendering options across 33 organized groups, from layout and spacing to diagram-specific behavior, without editing raw configuration JSON.
Start from a gallery of flowchart, sequence, state, ER, Gantt and other templates, each rendered live with your current theme before you apply it.
Download your diagram as SVG, PNG, JPG or WebP — with an optional transparent background — or copy the ASCII rendering straight into your README.
No signup and no backend: parsing, rendering and export all happen client-side, so sensitive architecture diagrams never leave your machine.
The same mermaid code, rendered your way — switch engines from the navbar at any time.
The classic mermaid SVG rendering you know from the docs, with full control over every theme variable and render config field.
Open the official editor →Render diagrams as ASCII art for terminals, code comments and plain-text docs, with adjustable charset and font size.
Try ASCII mode →Describe a diagram in natural language and let AI draft the mermaid code for you. This mode is on the way.
See what's planned →From flowcharts to C4 architecture diagrams — if mermaid supports it, you can design it here.
Start from scratch, paste existing code, or pick one of the 31 templates from the gallery.
Adjust theme variables, apply a preset, or switch to the Styled engine for shadows and custom strokes — no CSS required.
Download SVG, PNG, JPG or WebP for docs and slides, or TXT for the ASCII rendering. Your theme travels as JSON or frontmatter.
No. mermaid.design runs entirely in your browser — open the page and start typing mermaid syntax. There is nothing to install and nothing to sign up for.
No. Parsing, rendering and exporting all happen locally in your browser. Your diagram code is stored in your own browser's local storage and never leaves your device.
All diagram types supported by mermaid 12, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, mind maps, timelines, Sankey diagrams, C4 diagrams and more.
You can download diagrams as SVG, PNG, JPG or WebP (with an optional transparent background), export ASCII renderings as plain text, and copy your theme configuration as JSON or mermaid frontmatter.
Yes. Diagrams you create and export are yours — use them in documentation, presentations, blog posts or products, commercial or not.
No signup — the editor above is already waiting for you.