DOT to Mermaid

About this tool

Graphviz DOT and Mermaid flowcharts solve the same problem with different syntax. DOT is common in build tools, dependency analyzers and older architecture docs; Mermaid is what many README files, issue trackers and knowledge bases render natively. This converter rewrites the DOT graph into Mermaid source so you can keep the structure without redrawing the diagram by hand.

Paste a graph { ... } or digraph { ... } document and the converter parses it locally in WebAssembly. It keeps node IDs, quoted labels, chained edges, graph/node/edge defaults, cluster subgraphs, rankdir, selected node shapes, edge labels, dashed/bold/bidirectional links and common color attributes. Features with no Mermaid equivalent are kept as %% notes so the output is honest rather than silently lossy.

Worked example

Input DOT:

digraph {
  rankdir=LR;
  start [label="Start", shape=circle];
  check [label="Tests pass?", shape=diamond];
  start -> check [label="build"];
  check -> ship [label="yes"];
  check -> fix [label="no", style=dashed];
}

Default output:

flowchart LR
  start(("Start"))
  check{"Tests pass?"}
  start -->|build| check
  check -->|yes| ship
  check -.->|no| fix

Turn off Keep edge labels when you only want the graph structure, or enable Wrap in a code fence to paste the result directly into Markdown:

```mermaid
flowchart LR
  start(("Start"))
  check{"Tests pass?"}
  start --> check
```

Limits and edge cases

• DOT input is capped at 1 MiB, 2,000 distinct nodes and 5,000 edges so browser conversions stay responsive.
• The converter targets Mermaid flowchart, not sequence/class/state diagrams. DOT layout attributes such as pos, splines, rank=same, exact sizes and fonts do not have a direct Mermaid equivalent.
• rankdir=TB/LR/BT/RL maps to Mermaid direction; the Flowchart direction control can override it.
• Mermaid has fewer node shapes than Graphviz. Common shapes are mapped and unknown ones fall back to rectangles with a %% note when warnings are enabled.
• Cluster subgraphs become Mermaid subgraph ... end blocks. Non-cluster anonymous grouping is flattened unless it is needed to expand edges.
• DOT ports (node:port) are parsed so edges still land on the node, but port-specific attachment points are reported as unsupported because Mermaid flowcharts do not expose them.

FAQ