Mermaid flowchart to editable diagram

How it works

1. 01

   Paste your Mermaid code

   Code from a Markdown file, a README or an AI chat. A mermaid code fence around it and a config block at the top are fine.

2. 02

   See an editable diagram

   Flowchart nodes become flowchart shapes such as process, decision and document, subgraphs become frames, and ER entities become table cards.

3. 03

   Open it in Archboard

   Save it as a new diagram to move and restyle shapes, add notes, share a link, or export SVG and PNG. Signing up takes a Google or GitHub account.

What’s drawn from Mermaid code

These parts of your code become editable diagram elements:

• flowchartgraph

  flowchart and graph diagrams, flowchart-elk included, with every node and its label. Font Awesome prefixes such as fa:fa-car are removed from labels.

• @{ shape }

  Node shapes, written with brackets or the newer shape syntax, map to flowchart elements: process, decision, terminator, data, document, preparation, manual input and connector. Shapes with no flowchart match become the closest basic shape, such as a cylinder, or a process box.

• subgraph

  Subgraphs as frames around their nodes, nested subgraphs included. An empty subgraph is left out.

• -->-.->==>

  Arrows with their labels, solid, dotted or thick, including chains such as A --> B --> C and fan-outs such as A --> B & C.

• erDiagram

  erDiagram entities as table cards that list each attribute with its type and PK, FK or UK key, and relationships with their cardinality. Non-identifying relationships are dashed.

• TDLR

  The flowchart direction, TD, TB, LR, RL or BT, sets which way the diagram flows.

Supported Mermaid diagram types

Flowcharts (flowchart and graph) and entity relationship diagrams (erDiagram) are converted today. sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph and the newer types aren’t converted yet: the tool names the type it found instead of drawing a wrong flowchart.

What a Mermaid import leaves out

• Sequence, class, state, Gantt, pie, mindmap and other diagram types. Only flowcharts and ER diagrams are converted for now.
• Colors and fonts from classDef, style, linkStyle and class: the diagram starts with Archboard styles, which you can change on the canvas.
• Icons and images on nodes: icon and img settings are dropped, and the label is kept.
• A live link to your code: editing the canvas doesn’t change the Mermaid code, and later edits to the code don’t update the diagram.