Back to the blog

Writing

Mermaid flowcharts you can change by hand.

Paste a Mermaid flowchart and it becomes shapes and arrows you can move, restyle and draw on, laid out as Mermaid lays it out. On your device, no uploads.

By Updated 3 min read

A hand-drawn flowchart on a whiteboard: three boxes joined by arrows, with a note in the corner

Mermaid writes diagrams as text, which is quick to type and easy to keep with code, but hard to tidy by hand. Mermaid to diagram turns a flowchart's text into shapes and arrows on the whiteboard that you can move, restyle and draw on.

Paste the Mermaid.

Press Paste the Mermaid and type or paste a flowchart (graph or flowchart). Mermaid reads it and lays it out on your device; the diagram is shown as you type, and Put it on the board makes it yours.

Each node becomes a rectangle, a rounded box, a diamond or an ellipse with its words; each link becomes an arrow that holds both nodes, dotted or thick as written, with its words on it; a subgraph becomes a frame with its name.

Other kinds of diagram.

Sequence diagrams, pie charts, Gantt charts and Mermaid's other kinds cannot be made into shapes; they go on the board as one picture of Mermaid's drawing, and the window says so. Draw and write around them as you like.

Save it, share it, present it.

Save the diagram as a PNG or an SVG to put in a document, or as a PDF to print; a PNG or SVG can carry the board inside it, to open and change again. Put a frame round it and Present shows it full screen. Share as a link carries the board locked in the link itself, after the #, which is never sent to any server; anyone who has the link can open it.

On your device, and nowhere else.

Everything is drawn and saved in your browser: nothing is uploaded and there is no account. Turn on Keep this board on this device to find it again when you come back, or save the board as a .excalidraw file to open again here or in Excalidraw.

Further reading

Topics: mermaid to diagram · mermaid flowchart · edit mermaid diagram · mermaid to excalidraw · mermaid to png · mermaid to svg · mermaid live editor alternative · diagram from text

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool