# Sketchboard Mermaid to Diagram

> Turn a Mermaid flowchart into a laid-out, editable diagram with an SVG export. Parses the flowchart part of Mermaid (directions, node shapes, labelled and dotted links, chains, subgraphs), places the nodes with a layered layout so few lines cross, routes the connectors around the boxes and returns an SVG plus a Sketchboard board where every box and arrow can be moved and restyled.

Part of usefulweb.app (https://usefulweb.app/). Part of [Sketchboard](https://sketchboard.usefulweb.app/) (ownerApp: sketchboard). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://sketchboardmermaidtodiagram.usefulweb.app/ (interactive tool at https://sketchboardmermaidtodiagram.usefulweb.app/tool)
- JSON API: POST https://sketchboardmermaidtodiagram.usefulweb.app/api/v1/calculate with a JSON object of inputs (schema: https://sketchboardmermaidtodiagram.usefulweb.app/api/v1/tool)
- OpenAPI: https://sketchboardmermaidtodiagram.usefulweb.app/openapi.json
- MCP (Streamable HTTP): https://sketchboardmermaidtodiagram.usefulweb.app/mcp - tool `sketchboard_mermaid_to_diagram`

## Inputs
- mermaid (textarea): Mermaid flowchart - Starts with “flowchart TD” (or graph LR …). One link per line, for example A[Start] --> B{OK?}.
- direction (select): Direction
- route (select): Connector style
- style (select): Drawing style

## Method
- Supported: flowchart/graph with TB, TD, BT, LR or RL; node shapes [ ], ( ), ([ ]), [[ ]], [( )], (( )), { }, {{ }}, > ], [/ /], [\ \], [/ \], [\ /]; links -->, ---, -.->, ==>, --o, --x, <-->, labels as -->|text| or -- text -->; chains (A --> B --> C), A & B --> C, subgraph … end (drawn as a frame), %% comments. Styling lines (classDef, class, style, linkStyle, click) are ignored and counted.
- Node size comes from its text (deterministic width estimate, wrapping at 260 units); decisions are drawn larger so their text fits the diamond.
- Layout (Sugiyama et al. 1981): cycles are broken by reversing DFS back edges, each node gets the rank of its longest path from a source, long links get dummy nodes, 12 barycentre sweeps reduce crossings (the ordering with the fewest crossings wins), and median alignment passes straighten the links. Gaps: 50 units across, 70 along the direction.
- Connectors are glued to the shapes and routed by Sketchboard’s router (orthogonal A* around the boxes with a bend penalty for the elbow style), so moving a box later keeps the arrows attached.

## Limits
- Only the flowchart subset of Mermaid is read; sequence, class and other Mermaid diagram types are not converted. Mermaid is an open-source project and not affiliated with usefulweb.