Mermaid Editor
Write Mermaid code, preview the rendered diagram, switch themes, and export the result as SVG or PNG.
Mermaid Editor
Write Mermaid code, preview the rendered diagram, switch themes, and export the result as SVG or PNG.
About the Mermaid editor
Renders Mermaid code in the browser
The editor loads the Mermaid library client-side, checks the diagram after a short debounce, and renders the SVG preview with the selected theme. Built-in templates help you start with flowchart, sequence, class, state, ER, Gantt, pie, mindmap, and timeline examples.
Prepare diagrams for GitHub, README, and Wikis
Use the editor as a staging area before pasting a Mermaid fenced code block into GitHub README files, GitLab wikis, Notion pages, or technical documentation. Preview flowcharts, sequence diagrams, and architecture sketches, then copy the Mermaid source back to Markdown or export an image when the destination cannot render Mermaid.
Export SVG or PNG from the preview
Download uses the current Mermaid code and theme to render a fresh SVG. PNG export converts that SVG through a browser canvas, while the editor zoom control only affects the on-screen preview. The diagram source can be stored in the URL hash for shareable local state, so treat shared URLs as containing the diagram source.
FAQ
Common questions and answers about this topic.
What is Mermaid?
Mermaid is a text-based diagramming language that renders flowcharts, sequence diagrams, class diagrams, and more from Markdown-like syntax. It is widely used in GitHub, GitLab, and technical documentation.
What diagram types are supported?
Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, and more. The editor supports all diagram types available in the Mermaid library.
Can I export the diagram?
Yes, you can download the rendered diagram as SVG or PNG for presentations, documentation, or other projects.
Is my data sent to any server?
No, Mermaid diagram rendering runs entirely in your browser. Your diagram code is parsed and rendered locally with JavaScript — nothing is sent to any server.
How do I write Mermaid syntax?
Start by declaring the diagram type (e.g., flowchart TD, sequenceDiagram, classDiagram). Then define nodes, connections, and labels using Mermaid's text-based syntax. Use the built-in templates to explore different diagram types.
Can I use Mermaid in GitHub or Markdown?
Yes. GitHub README files, issues, pull requests, GitLab wikis, Notion pages, and many Markdown renderers support Mermaid fenced code blocks. Wrap your diagram code in a ```mermaid block, preview it here first, then paste the same source back into your document.