usefulweb.appDependable little tools for people and AI agents. Sketchboard Mermaid to Diagram
Theme: Auto

Theme

Apps Part of Sketchboard

Sketchboard Mermaid to Diagram

Turn a Mermaid flowchart into a laid-out, editable diagram with an SVG export.

Starts with “flowchart TD” (or graph LR …). One link per line, for example A[Start] --> B{OK?}.

More options
☁ Sign in to save to your Google Drive

Try an example: · ·

More about this tool

How it works

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.

  • 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.

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.

Sources

Part of Sketchboard

How to turn a Mermaid flowchart into an editable diagram

Paste a Mermaid flowchart and get a neatly laid-out diagram with routed arrows, as an SVG and as a Sketchboard board you can keep editing.

What it is for

Writing a flowchart as text is fast. A[Start] --> B{OK?} is quicker to type than drawing two boxes and an arrow. Text diagrams are hard to polish, though: you cannot nudge one box, colour one step or add a note beside it. This tool reads the flowchart part of Mermaid and returns a real diagram. Boxes are sized to their text, arranged so few lines cross, and joined by arrows that go around other boxes. You get it as an SVG and as a Sketchboard board in which everything can be moved and restyled.

The Sketchboard app uses the same code under Insert → Flowchart from text (Mermaid)…, so the tool and the app produce the same layout.

Worked example

A sign-up process with two decisions and a loop back to the form gives:

Laid out 9 nodes and 10 links.

Visitor opens the sign-up page is at the top, followed by Fill in name and e-mail and the decision Is the e-mail valid?. The no branch leads to Show a clear error message, beside the second decision Account exists already?. The arrow from the error message back to the form points against the flow, so it leaves and enters through the right-hand sides of the boxes instead of lying on top of the downward arrow. Both endings meet at Show the dashboard at the bottom (y = 866). Start and end are terminators (([…])), the questions are diamonds ({…}) and Create the account is a database cylinder ([(…)]).

A left-to-right release pipeline with a dotted red link to Fix the build and a subgraph Automated around the CI and staging steps gives Laid out 6 nodes and 7 links in 1 subgraph. CI checks is a preparation hexagon ({{…}}), and the subgraph becomes a frame titled Automated.

How to read the result

The metrics count nodes, links and subgraphs. The Nodes table lists each node's id, text, shape and its position and size (x, y, width, height) in board units; one unit is one screen pixel at 100 % zoom. The Links table shows every link with its label. Below the SVG preview you can download the SVG and the board file.

Tips and common mistakes

  • Start with flowchart or graph and a direction: TD/TB, BT, LR or RL. Direction overrides it, for example to turn a chart sideways.
  • Supported shapes include [box], (rounded), ([terminator]), {decision}, {{preparation}}, [(database)], [[predefined process]], ((connector)), >off-page], parallelograms and trapezoids.
  • Links: -->, ---, -.-> (dotted), ==> (thick), <-->, --o, --x, labels as |label| or -- label -->, chains like a --> b --> c and & for several nodes.
  • subgraph … end blocks become labelled frames. %% comments, classDef, style and click lines are ignored, so recolour in the app instead.
  • Connector style chooses right angles around boxes (default), straight lines or curves.

FAQ

Can it convert sequence diagrams or Gantt charts?

No. Other diagram types such as sequence diagrams, pie charts or Gantt charts are refused with a clear message instead of a wrong drawing.

Does the hand-drawn style change on every run?

No. With Drawing style set to Hand-drawn, the SVG looks sketched but stays identical on every run.

Why did my style line have no effect?

Styling lines are skipped. Download the board, open it in Sketchboard and recolour the steps there.

How do I keep editing?

Download the board file and open it in Sketchboard to move boxes, add notes or present it.

Guide last updated:

For scripts and AI agents

  • JSON API: POST https://sketchboardmermaidtodiagram.usefulweb.app/api/v1/calculate (same calculation as this page)
  • Interface description: OpenAPI 3.1 · AI guide: llms.txt
  • MCP server (Streamable HTTP): https://sketchboardmermaidtodiagram.usefulweb.app/mcp · tool name sketchboard_mermaid_to_diagram
Example request
curl -s -X POST https://sketchboardmermaidtodiagram.usefulweb.app/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{"mermaid":"flowchart TD\n  start([Visitor opens the sign-up page]) --> form[Fill in name and e-mail]\n  form --> valid{Is the e-mail valid?}\n  valid -- no --> err[Show a clear error message] --> form\n  valid -- yes --> exists{Account exists already?}\n  exists -- yes --> login[Offer to sign in instead]\n  exists -- no --> create[(Create the account)]\n  create --> mail[Send the welcome e-mail]\n  mail --> done([Show the dashboard])\n  login --> done"}'
Feedback · ideas & bug reports welcome