Mermaid Live Editor, Viewer & Playground
Mermaid code
Auto-renders as you type
Free Mermaid live editor in your browser
Write Mermaid code and see a live diagram preview alongside it, or switch between Code and Preview on your phone. This Mermaid live editor runs entirely in your browser — no installation and no signup — so you can prototype flowcharts, sequence diagrams, class diagrams, state diagrams, and pie charts in seconds. Start from a ready-made example or paste your own markup to render a Mermaid diagram online.
A Mermaid live editor is just a text-to-diagram tool: you type (or paste) Mermaid syntax and it renders a real diagram immediately, so there's no separate compile step and no desktop app to install. That live feedback loop is what makes it useful for quickly sketching a flowchart during a design discussion, checking a Gantt chart timeline, or previewing a diagram an AI tool just generated for you.
Fix and validate AI-generated Mermaid
Large language models and coding agents love emitting Mermaid, but the markup often has small syntax errors. Paste diagram code from ChatGPT or any AI agent and the built-in AI assistant will validate it, explain what broke, and apply a corrected version directly in the editor — so you can fix a Mermaid syntax error without hunting through the docs.
Export and share your diagrams
Choose a diagram theme from the toolbar for docs, presentations, or dark backgrounds. Presets add a compact style block for your diagram type without replacing your diagram or individual element styles. Remove theme restores the underlying source styles; keyboard undo steps back through individual changes. If you change the diagram type, reapply the preset to update its styles.
Use Export to download the current diagram as PNG or SVG for docs, slides, and pull requests, or generate a shareable link that reopens the exact diagram in the editor. Explore more with everything about MermaidJS and the Mermaid examples gallery.
