Mermaid Editor

Common questions

Which Mermaid diagram types does this editor render?

It accepts 18 types, named by the first line of the code: flowchart or graph, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, xychart, sankey, block, packet, requirementDiagram and kanban. C4 and architecture diagrams are refused with a message, because they carry links, sprite images or icon packs, and any other first word is reported as an unknown diagram type at its line. If Mermaid would need HTML to draw a diagram's labels, the editor says so instead of showing a diagram with missing text.

Why was my click, link or directive line refused?

The editor renders in Mermaid's strict mode and refuses anything that could run code, follow a link or change the configuration: click, link and callback statements, %%{init}%% directives, frontmatter other than a title, HTML tags other than the br line break, url() and @import values, style values that could escape the diagram, KaTeX math, and image or icon shapes. The message names the line and column, so you can remove that part and render the rest. A web address written inside a label is fine: it is drawn as plain text and never becomes a link.

How do I find a syntax error in my Mermaid code?

When Mermaid cannot parse the code, the message under the editor gives the line and, when Mermaid reports one, the column in your own text, counting the frontmatter and comment lines that Mermaid strips before parsing. It repeats that line with a caret under the position, and Go to line puts the cursor there. Your source is never changed, and the last diagram that rendered stays on screen until a new render succeeds.

Is there a size limit?

Yes, because the diagram is drawn in your browser tab. The source can be up to 51,200 bytes (50 KB) and 5,000 lines, with at most 2,000 statements and 12 levels of nesting. Flowcharts can draw up to 500 nodes and 500 edges; a line such as A & B --> C & D connects every pairing, so it counts as four edges. If a render takes longer than 20 seconds, the editor stops waiting and keeps your last diagram. PNG exports stop at 16,384 pixels per side or 16 million pixels in all; the SVG has no pixel limit.

Why are Download SVG and Download PNG greyed out?

SVG, PNG and Copy SVG markup always use the diagram on screen, so they are enabled only while it matches the code and the Theme, Look and Layout settings in the editor. After an edit the preview is marked as the last valid render; press Render diagram and the exports come back. Download source and Copy source work at any time, even while the code has an error.

What do Theme, Look, Layout and Background change?

Theme picks Mermaid's Default, Neutral, Dark or Forest colors, Look switches between the classic and hand-drawn styles, and Layout chooses the Dagre or ELK layout engine for diagrams that use Mermaid's graph layout, such as flowcharts and state diagrams. Changing any of these marks the diagram out of date until you render again. Background and PNG scale only affect exports: the SVG and PNG can use the theme's background, white or transparent, and the PNG is drawn at 1x, 2x or 3x the diagram's size.

Is my diagram uploaded anywhere?

No. The Mermaid 12.0.0 engine is downloaded from this site the first time you press Render diagram, and after that your code is parsed and drawn in this browser tab and never sent to a server. The draft is remembered in this browser's local storage so it is still there next time, and Start over clears it.

How do I make a flowchart for an algorithm, process or decision?

Start with the Flowchart example, edit its step labels and press Render diagram. Square brackets name process steps, braces make decision diamonds, and arrows connect them; use yes and no labels to show branches. The example already includes a decision and a return path. Mermaid chooses node positions with Dagre or ELK, so edit the code to change the steps rather than dragging shapes. Export the current diagram as SVG or PNG when it matches your source.

Can I make UML diagrams here?

The Sequence diagram, Class diagram and State diagram examples provide three supported UML-style views. Edit the participants and messages, classes and relationships, or states and transitions, then render the result. This editor does not provide every UML diagram type; use case diagrams have no dedicated supported Mermaid header here.

Is this a live editor with AI or drag-and-drop controls?

This is a code editor with a rendered preview. Press Render diagram or Ctrl+Enter on Windows and Linux, or Cmd+Enter on Mac, after changing the source. It does not generate code from an AI prompt or let you drag nodes to edit the graph. The graph positions come from the selected Mermaid layout.

Can I paste a whole Markdown document with a Mermaid block?

Paste the Mermaid source itself, starting with a supported diagram type, without the surrounding Markdown fence. This editor does not preview a full Markdown document containing Mermaid blocks, headings and prose. Download source saves .mmd code; SVG and PNG save the rendered diagram.

Does the editor work on Windows, Linux or Mac?

Use a current browser on Windows, Linux or Mac without installing an app or creating an account. The rendering engine loads from this site when needed, and your diagram is parsed and drawn in the tab. This page does not install a Docker service, desktop app or editor extension.