Mermaid to Excalidraw: How to Edit and Restyle the Result
Mermaid to Excalidraw gives you a plain black and white diagram. Learn how to recolour the shapes, change outlines and line width, and rewrite the labels so the diagram reads well in a workshop. Example: a leave request approval flow.
Step by step
From plain to clear
- Restyle Mermaid output. Converted Mermaid code in Excalidraw and got a plain black and white diagram? You can colour it and fix the wording in a minute. Here's the leave request flow we'll build.
- excalidraw.com. Open excalidraw.com and start with an empty canvas.
Convert the code
- Insert the code. Open more tools, pick Mermaid to Excalidraw, and type the flow. A request goes to the manager. Yes books the leave, no tells the employee. Click insert.
- Real shapes. Every node is now a normal Excalidraw shape, and the arrows are glued to them. You can drag any shape to a new spot and the arrows follow. Now let's style them.
Recolour
- Background colour. Select the diamond and pick a soft yellow background in the style panel on the left. Now the decision jumps out. The happy path gets green. Pick the green background, then the solid fill, so it looks clean. Updating the rota is the last step. Give it a light blue background.
- Outline. The no path gets a red outline instead, so people see the path we want to avoid. And the start gets a bold blue outline, so everyone knows where the flow begins.
Relabel
- Relabel. Mermaid copies your code text word for word. Select the diamond, press Enter, and type a clearer question. Approve it? Same for the red box. Say what really happens. Explain why.
- The finished diagram. Click an empty spot. Same flow as the code, but now the colours tell the story at a glance.
Recap
- The rules. So, insert the Mermaid code first, then select each shape and use the style panel for background, outline and width. Press Enter on a shape to rewrite its label. Subscribe for more Excalidraw tips for business analysts.
