Write Mermaid code and watch the diagram update as you type. Start from an example, switch themes, and export a crisp SVG or a PNG up to 4×. Share a link that carries the whole diagram.
Mermaid is a text language for diagrams. Instead of dragging boxes around, you describe the structure (A --> B) and Mermaid lays it out for you. Because a diagram is plain text, it lives happily in a git repository, diffs cleanly in code review, and renders natively in GitHub, GitLab, Notion and Obsidian Markdown. This editor gives you the tight feedback loop of a live preview while you write it.
SVG is a vector file: it stays sharp at any size, is usually small, and can be edited later in Figma, Inkscape or Illustrator. Use it for documentation sites, wikis and anything viewed in a browser. Copy SVG puts the markup on your clipboard for pasting straight into HTML or a design tool.
PNG is a bitmap that pastes anywhere, including slides, chat, email and tools that don't accept SVG. It is rendered at the diagram's natural size times the chosen scale, so pick 2× or more for retina screens and presentations. The background can be white, dark (to match the dark theme) or transparent. Labels are drawn as SVG text rather than embedded HTML, which keeps PNG export reliable across browsers.
Share link compresses your code with lz-string and places it in the URL fragment, the part after #, together with the chosen theme. Browsers never send the fragment to any server, so the diagram exists only inside the link you hand out. Anyone who opens it sees your diagram in their own browser. When a page opens with a shared diagram in the link, that diagram takes priority over the draft saved in local storage. Your draft is kept in this browser only, so a refresh doesn't lose your work.
No. Mermaid runs inside this page, so parsing, layout and export all happen on your device. Your draft is kept in this browser's local storage so a refresh doesn't lose it.
The Share button compresses your diagram code with lz-string and puts it after the # in the URL. Browsers never send the part after # to a server, so the diagram travels only inside the link itself.
Everything Mermaid 12 supports, including flowcharts, sequence, class, state, entity-relationship, Gantt, pie, mindmap, timeline, gitGraph and user journey diagrams. The Examples menu loads a starter for each of those.
The PNG is the diagram's natural size multiplied by the scale you pick: 1×, 2×, 3× or 4×. Use 2× or higher for slides and retina screens. The background can be white, dark or transparent.
The error message from Mermaid is shown under the editor and the last diagram that rendered correctly stays visible, dimmed, until the code is valid again.
