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.