How to Convert Mermaid to Excalidraw (Code to Hand-Drawn Diagram)
Turn Mermaid code into an editable hand-drawn diagram in Excalidraw. Open Mermaid to Excalidraw from the toolbar, type a flowchart, watch the preview, insert it, then colour and relabel the shapes like any sketch. Example: an online shop returns process.
Step by step
Code to sketch
- Mermaid to Excalidraw. Got a process as Mermaid code, from a developer or from AI? Excalidraw turns it into a hand-drawn diagram you can edit. Here's the returns process we'll get.
- excalidraw.com. Open excalidraw.com with an empty canvas.
Insert the code
- More tools. The converter hides under more tools, the three dots at the end of the toolbar.
- Type the code. Pick Mermaid to Excalidraw and take the Mermaid tab. Clear the example and type a flowchart. Square brackets make boxes, curly brackets a decision, and text between pipes labels an arrow. Then click insert.
Edit like a sketch
- Real shapes. Every node is now a real Excalidraw shape, and the arrows are glued to them.
- Colour. So you can style them. Select the decision and give it a yellow background. The good outcome, refund, gets green. And send back gets a red stroke, the path we want to avoid.
- Relabel. Labels are plain text too. Select refund, press Enter and make it clearer. Refund card.
- The finished diagram. Click an empty spot. Same process as the code, but now it looks like a whiteboard sketch.
Recap
- The rules. So, more tools, Mermaid to Excalidraw, type or paste the code, insert. Flowcharts, sequence, class and ER diagrams become real shapes you can colour and edit. Subscribe for more Excalidraw tips for business analysts.
