Mermaid Diagram Editor
DiagramsWrite Mermaid syntax in the code editor and instantly see your flowchart, sequence diagram, class diagram, ER diagram, or Gantt chart rendered in the preview. Export as SVG or PNG, copy the Mermaid source, or share a link — all in your browser.
Diagrams are rendered entirely in your browser using Mermaid.js — no data is sent to any server. Syntax docs →
About Mermaid Diagram Editor
The Mermaid Diagram Editor is a live browser-based tool for every Mermaid diagram type. Type any valid Mermaid syntax — flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, pie charts, state diagrams, git graphs, and more — and the preview panel renders the result instantly as you type. Switch layout direction between top-down, left-right, bottom-up, and right-left with one click. Adjust zoom to inspect fine details. When your diagram is ready, export it as a crisp vector SVG, a 2× retina-quality PNG with your chosen background color, or copy the raw Mermaid markup to embed in GitHub READMEs and Markdown docs.
Features
- ✓Live auto-render: diagram updates 600 ms after you stop typing
- ✓Manual Render button between the editor and preview panels
- ✓Supports all Mermaid diagram types: flowcharts, sequence, class, ER, Gantt, pie, state, git graphs, and more
- ✓Direction toggles (TD / LR / BT / RL) change flowchart orientation instantly
- ✓Zoom in/out from 30% to 200%
- ✓Background color picker with Auto (follows light/dark theme), transparent, and custom hex presets
- ✓Diagram colors automatically match the current light or dark theme
- ✓Download SVG (vector, scalable)
- ✓Download PNG at 2× resolution using the selected background color
- ✓Copy Mermaid source to clipboard
- ✓Share link: encodes the diagram into a URL query parameter for easy sharing
- ✓Documentation link to the Mermaid syntax reference
- ✓All rendering happens in the browser — no data is sent to any server
Common Use Cases
- Documenting software algorithms and decision trees for code reviews
- Mapping business process workflows for stakeholder presentations
- Creating onboarding runbooks as visual step-by-step guides
- Embedding process diagrams in Markdown READMEs via Mermaid syntax
- Designing CI/CD pipeline flows and system architecture diagrams
- Drawing database ER diagrams and UML class diagrams for technical docs
- Drafting Gantt charts for project planning
Frequently Asked Questions
QWhat diagram types does Mermaid support?
Mermaid supports flowcharts (`graph`/`flowchart`), sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, user journeys, git graphs, quadrant charts, and more. All types are supported in this editor.
QDoes the diagram update automatically?
Yes. The preview re-renders 600 ms after you stop typing. You can also click the circular Render button between the two panels to force an immediate render.
QHow do I change the background color?
Click the palette icon (🎨) in the preview toolbar. You can choose Auto (follows your light/dark theme), Transparent, a preset color, or enter any custom hex color. The selected background is applied to the preview canvas and baked into both SVG and PNG exports.
QWhy does the diagram look different in light vs dark mode?
The editor automatically re-renders the diagram with a contrasting color palette when you toggle between light and dark themes — light mode uses blue-on-white tones, dark mode uses a navy-and-sky palette.
QCan I share my diagram with others?
Yes. Click the share icon in the toolbar to copy a link that encodes your Mermaid code into the URL. Anyone who opens the link will see the same diagram loaded in the editor.
QWhat is the difference between the SVG and PNG downloads?
SVG is a scalable vector format — ideal for presentations, Figma, or anywhere you need crisp output at any size. PNG is exported at 2× (retina) resolution with the selected background color filled in, making it suitable for Confluence, Notion, Slack, or any raster context.