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. A developer or an AI tool may give you a process as Mermaid code. Excalidraw can turn that code into a hand-drawn diagram you can edit. The example here is an online shop's returns process.
- excalidraw.com. Open excalidraw.com with an empty canvas.
Insert the code
- More tools. The converter is under More tools, the three dots at the end of the toolbar.
- Type the code. Pick Mermaid to Excalidraw and open the Mermaid tab. Clear the example code and type the flowchart. Square brackets make a box, curly brackets make a decision, and text between pipes labels an arrow. Then click Insert.
flowchart LR A[Return request] --> B{Item OK?} B -->|Yes| C[Refund] B -->|No| D[Send back]
Edit like a sketch
- Real shapes. Every node is now a real Excalidraw shape, and the arrows are attached to the shapes.
- Colour. Because they are real shapes, you can style them. Select the decision, Item OK?, and give it a yellow background. Give the good outcome, Refund, a green background. Give Send back a red stroke to mark it as the path to avoid.
- Relabel. Labels are plain text too. Select Refund, press Enter and change the text to Refund card.
- The finished diagram. Click an empty spot to deselect. It's the same process as the code, but now it looks like a whiteboard sketch.
Recap
- The rules. In short: More tools, Mermaid to Excalidraw, type or paste the code, then Insert. Flowcharts become real shapes you can colour and edit. Some other diagram types may come in as a single picture instead.
Common mistakes
- Using the wrong brackets. Square brackets make a box and curly brackets make a decision. If you write B[Item OK?] instead of B{Item OK?}, the decision shows up as a plain box.
- Typing below the example code. The Mermaid tab starts with example code already in it. Clear it before you type or paste. If you don't, your code gets mixed with the example and the preview breaks.
- Leaving out the first line. The code must start with the diagram type, like flowchart LR. Without that line, Mermaid doesn't know what to draw and nothing converts.
- Editing the code after inserting. Once you click Insert, the shapes are no longer linked to the code. To change the diagram, edit the shapes directly, or fix the code and insert it again.
When a business analyst uses this
A developer or an AI tool gives you a returns process as Mermaid code before a process-mapping workshop. You convert it in Excalidraw, colour the decision and the exception path, and reword the labels in business language. The stakeholders then review a sketch they can read, not code.
Questions people ask
How do I convert Mermaid to Excalidraw?
Open More tools (the three dots at the end of the toolbar), pick Mermaid to Excalidraw, and paste your code in the Mermaid tab. Check the preview, then click Insert.
Can I edit the diagram after converting Mermaid to Excalidraw?
Yes. Every node becomes a normal Excalidraw shape with its arrows attached. You can change colours, and you can select a shape and press Enter to edit its label.
