DocBox

Online Mermaid Editor & Viewer

Paste Mermaid syntax and the diagram appears as you type — flowcharts, sequence diagrams, class diagrams, pie charts and more, all rendered locally in your browser.

Open the Mermaid Editor

How it works

  1. Start from a template or paste your own Mermaid code
  2. The preview updates live while you type
  3. Bare @startuml-style blocks in Markdown documents render too
  4. Export the result as SVG, PNG, JPG or PDF

Frequently asked questions

Which Mermaid diagram types can I draw?
Flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts and more — whatever the Mermaid parser supports renders locally.
Can I use Mermaid inside a Markdown document?
Yes. Use a ```mermaid code block inside any .md file and the diagram renders inline next to your text.
Is there a live preview while typing?
Yes — the diagram re-renders as you type, with syntax errors shown inline instead of hiding the previous render.
Do I need an account?
No account, no sign-up, no cookies for tracking. Everything runs in your browser and diagrams are exported straight to your downloads folder.