Mermaid Diagram Editor

Write Mermaid syntax and preview instantly. Copy or export as SVG.

Editor
Preview

    What is Mermaid

    Sketch diagrams as text: write Mermaid syntax for flowcharts, sequence diagrams and Gantt charts, pick a light, dark or neutral theme, hit Render and copy or download the finished SVG for your docs. The engine runs locally with strict security so diagram text can't execute markup.

    How to use Mermaid

    1. Type or paste Mermaid code in the editor, or load an example
    2. Pick a theme and click Render to update the preview
    3. Copy the SVG code or download the SVG file

    Frequently asked questions

    Which diagram types are supported?

    Whatever the bundled Mermaid version supports — flowcharts, sequence, class, state, ER diagrams, Gantt and more.

    Why did my diagram fail to render?

    Usually a syntax issue — an unquoted label with special characters or a bad arrow. The error message points at the problem line.

    Why do I have to click Render?

    Previewing is on demand rather than per keystroke, so an incomplete line mid-edit won't flash errors; click Render again after each change.

    Is my diagram code sent to a server?

    No — Mermaid renders locally in your browser at strict security level, which also strips executable markup embedded in labels.

    Is Mermaid free?

    Mermaid is completely free — open the page and use every feature with no hidden charges.

    Do I need to download or install Mermaid?

    No download or installation is needed. It is an online tool that runs in the browser on your phone, tablet and computer.

    Do I need an account to use Mermaid?

    No. Use the tool right away — no account or sign-in required.

    Does Mermaid work on mobile?

    Yes. The page is fully responsive and works on phones, tablets and desktop browsers.