jaen

Mermaid Diagram Editor (Flowchart, Sequence, ER)

A tool for creating flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, mind maps, and Git graphs in Mermaid syntax with a live preview. It supports themes and background colors, zoom and pan, export to SVG and PNG (1x–3x), and sharing via URL — all rendered in your browser.

Diagrams are rendered in your browser and nothing you enter is sent to a server. Share links simply put the content in the URL hash (after #), which is never sent to the server.

Tab indents and Shift+Tab outdents. To move focus out of the editor, press Esc and then Tab. Your input is saved automatically.

How to use

  1. Choose a diagram type from "Template" to load a sample into the editor.
  2. Edit the Mermaid code in the editor on the left; the preview on the right updates shortly after. Syntax errors are shown with line numbers, and the last valid diagram stays in the preview.
  3. Change the look with "Theme" and "Background". Drag to pan the preview, and zoom with Ctrl (⌘) + wheel or the buttons.
  4. Save as an image with "Download SVG" or "Download PNG". PNG can be exported at 1x, 2x, or 3x.
  5. "Copy share link" gives you a URL that opens the same diagram. Your input is saved automatically and restored the next time you open the tool.

About this tool

The Mermaid Diagram Editor lets you create diagrams for design documents and docs using Mermaid, a syntax for describing diagrams as text. Because Mermaid is supported on GitHub, GitLab, Notion, and elsewhere, you can paste the source straight into Markdown.

Diagrams are rendered with Mermaid (MIT), with securityLevel set to strict so that HTML or scripts in your input are never executed. A Japanese font is specified so labels don't break or get clipped, and labels are drawn as SVG text so PNG exports render correctly.

The Mermaid library is loaded only when you open this tool. Share links compress the diagram into the URL hash (after #); since the hash is never sent to the server, your diagram is never stored anywhere else.

Frequently asked questions

Where are my diagrams saved?

Your input is saved automatically in this browser (localStorage). With a share link, the content is included in the URL, so anyone with the link can open the same diagram.

Can Japanese text look wrong in PNG exports?

PNGs are drawn using the Japanese fonts on your device. This usually works fine, but on a device without Japanese fonts the text may not render correctly; save as SVG instead.

Can I use the ELK layout?

No. The library required for the ELK layout (elkjs) isn't included because of its license (EPL-2.0), so please use the default layout.

Can scripts in my input be executed?

No. Mermaid's securityLevel is set to strict, so HTML tags and click scripts in diagrams are disabled.