Which Mermaid diagrams become editable shapes
The converter rebuilds five Mermaid types as real Excalidraw elements: flowcharts (`flowchart` and the older `graph` keyword), sequence diagrams, class diagrams, entity-relationship diagrams, and state diagrams. For these you get separate boxes, diamonds, circles and arrows with their text bound inside, so moving a node keeps its label with it and arrows stay attached.
Every other type Mermaid can draw — Gantt charts, pie charts, mind maps, timelines, user journeys, git graphs, quadrant charts and the newer beta types — is rendered by Mermaid and placed on the canvas as a single image. You can still move, resize, annotate and export it, but you cannot pull individual bars or slices apart. The tool tells you which of the two you got as soon as the conversion finishes, and the "Detected" line under the editor tells you before you convert.
How the conversion works
It is the same pipeline Excalidraw uses in its own Mermaid import. Mermaid parses your code and lays the diagram out, exactly as it would in a Markdown preview. The converter then reads that laid-out result — each node's position, size and shape, and each edge's path and label — and emits an Excalidraw "element skeleton", which Excalidraw expands into full shapes with bound text and connected arrows.
Because Mermaid still does the layout, the diagram lands where you would expect: top-down flowcharts stay top-down, subgraphs become labelled boxes grouped with the nodes inside them, and sequence diagram lifelines line up with their messages. What changes is that the result is no longer a rendering — it is a drawing you own. Styling in the code (`classDef` and `style` lines) carries over for fills and strokes where Excalidraw has an equivalent.
Getting good Mermaid out of ChatGPT or Claude
Ask for the diagram type by name — "a Mermaid flowchart, top to bottom" or "a Mermaid sequence diagram" — so the model picks one of the editable types instead of, say, a mind map. Keep node labels short; long sentences inside boxes make large, hard-to-arrange shapes. If the model wraps labels in quotes or brackets, leave them: Mermaid uses them to decide the node shape.
When Mermaid rejects the code, the error names the line. The usual culprits in AI-written Mermaid are unescaped characters in labels (parentheses, quotes or a stray `end`), a missing diagram header on the first line, or a mix of two diagram syntaxes. Paste the error back to the assistant with the code and it will generally fix it in one pass.
Mermaid code or a drawing: which to keep
Keep the Mermaid when the diagram lives in documentation that changes: a README, a wiki page, a pull request. GitHub, GitLab, Notion and Obsidian all render ```mermaid blocks, and a text diagram diffs and reviews like code. Convert it when the diagram is for thinking or presenting: a workshop board, a slide, an architecture sketch you want to annotate, or anything where exact placement matters more than regenerating it.
Converting is one way. Once you edit the shapes there is no route back to Mermaid, so keep the original code alongside the drawing if you might regenerate it. OmniCanvas makes that easy: save the diagram to your canvas and paste the source in a text note right next to it.
Exporting and keeping the diagram
PNG is the right choice for slides, chat and email. SVG stays sharp at any size and is better for print or for editing further in a vector tool. The `.excalidraw` download keeps the diagram fully editable: open it later in Excalidraw, in our Excalidraw viewer, or in OmniCanvas.
"Save to my canvas" sends the diagram — including any edits you made here — into OmniCanvas as a new note, where it sits on an infinite canvas next to the rest of your notes and syncs across your devices. It is the only button on this page that sends anything off your device.