Mermaid Editor
Create flowcharts, sequence diagrams, Gantt charts and more from text with the Mermaid live editor. Render, zoom and export SVG or PNG in your browser.
What is Mermaid?
Mermaid is an open-source diagramming language that lets you create diagrams from plain text, similar to Markdown. You describe nodes and connections in a simple syntax, and the renderer draws the diagram automatically.
Which diagram types are supported?
The editor ships with ready-made examples for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mindmaps and timelines. Mermaid 11 supports many more variants you can type manually.
How do I create a diagram?
Pick an example from the dropdown or type your own Mermaid code in the left editor. The preview re-renders automatically about 350 ms after you stop typing, and a red panel shows the exact error if the syntax is invalid.
Is my diagram code sent anywhere?
No. Everything is rendered locally in your browser with JavaScript. Your diagram code never leaves your device.
How do I export my diagram?
Use Download SVG for a scalable vector file or Download PNG for a 2x resolution raster image. PNG can be exported with a transparent background if you prefer, and Copy code copies the Mermaid source to your clipboard.
Why does PNG export sometimes fail?
Some Mermaid features render through foreignObject, which browsers may refuse to rasterize onto a canvas. When that happens the PNG export shows an error, but the SVG download always works because it needs no rasterization.
How does the zoom work?
The preview supports 0.5x to 2x scaling. Use the plus and minus buttons to step by 10%, Fit to automatically size the diagram to the preview area, and 100% to return to the original size.
Can I use Mermaid in my own documentation?
Yes. GitHub, GitLab and many documentation tools render Mermaid blocks natively - wrap your code in a mermaid fenced code block and it renders automatically in the page.
Does the editor support dark mode?
Yes. The diagram follows the platform theme: when the interface switches to dark mode the diagram re-renders with Mermaid's dark theme automatically.
Any tips for readable diagrams?
Keep node labels short, choose a direction that suits the content (TD top-down or LR left-right), split very large graphs into subgraphs, and use the built-in examples as templates for each diagram type.
How to Use Mermaid Editor
Mermaid turns plain text into flowcharts, sequence diagrams, Gantt charts and more. This live editor re-renders your code as you type, entirely in the browser — nothing leaves your device.
- Pick a starting point from the Example dropdown — nine ready-made diagrams cover flowchart, sequence, class, state, ER, Gantt, pie, mindmap and timeline, and selecting one loads its code into the editor.
- Edit the Mermaid code in the left panel; the Preview on the right re-renders about a third of a second after you stop typing. When a syntax error shows in the red panel, the last valid diagram stays visible while you fix the code.
- Zoom between 50% and 200% with the plus and minus buttons, press Fit to scale the diagram to the preview box, or press 100% to return to actual size.
- Tick “Transparent background” if you want the PNG without a white backdrop, then press Download SVG or Download PNG — the PNG is rendered at double resolution so it stays crisp when embedded.
- Press Copy code to put the Mermaid source on your clipboard for documentation, wikis or version control.
When a diagram refuses to render, comment out the lines you changed recently to isolate the mistake — the error message names the offending line, and the preview keeps your last working version until the syntax is valid again.
Related Tools
- Code to Image Convert code snippets into beautiful, shareable images with syntax highlighting, custom themes, and window decorations. 100% privacy, runs entirely in your browser.
- Markdown Previewer Free online Markdown editor with live preview. Write, render, and export Markdown with full GFM support including tables, code blocks, and task lists.
- SVG Viewer & Editor Preview, edit and optimize SVG files online. Real-time preview, code editing, and optimization tools.
- JSON Tree Viewer Visualize JSON data as an interactive collapsible tree. Search keys and values, track JSONPath on hover, and handle large files with lazy loading. Drag & drop .json files supported.
- File Hash Checker Calculate and verify MD5, SHA-1, SHA-256, SHA-512 file hashes locally
- Chmod Calculator Free online chmod calculator to visualize and calculate Linux file permissions with checkboxes. Instantly convert between numeric (755, 644) and symbolic notation (rwxr-xr-x). Supports special permissions like setuid, setgid, sticky bit.
- ASCII Table Complete ASCII character encoding reference with decimal, hexadecimal, octal, binary codes, HTML entities, and character descriptions. Search and filter instantly.
- Hex Viewer View file contents in hex dump format with search, offset navigation, and virtual scrolling