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. Mermaid to Excalidraw turns Mermaid code into a plain black and white diagram. You can add colour and fix the wording in a minute. The example here is a leave request approval flow.
- 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 and No tells the employee. Click Insert.
flowchart LR A[Request sent] --> B{Manager OK?} B -->|Yes| C[Book leave] B -->|No| D[Tell employee] C --> E[Update rota] - Real shapes. Every node is now a normal Excalidraw shape, and the arrows are glued to the shapes. Drag any shape, such as the Manager OK? diamond, and its arrows follow it.
Recolour
- Background colour. Select the Manager OK? diamond and pick a soft yellow background in the style panel on the left. Now the decision stands out. Book leave is the happy path, so select it, pick the green background, then pick the solid fill so it looks clean. Update rota is the last step. Give it a light blue background.
- Outline. Tell employee gets a red outline instead of a fill, so people see the path we want to avoid. Request sent gets a bold blue outline: pick blue for the stroke and the bold stroke width, so everyone can see where the flow begins.
Relabel
- Relabel. Mermaid copies the text from your code word for word. Select the Manager OK? diamond, press Enter and type a clearer question: Approve it? Do the same for the red Tell employee box and type what really happens: Explain why.
- The finished diagram. Click an empty spot on the canvas. It's the same flow as the code, but now the colours show the decision, the happy path and the path to avoid at a glance.
Recap
- The rules. Insert the Mermaid code first. Then select each shape and use the style panel for background, outline and line width. Press Enter on a shape to rewrite its label.
Common mistakes
- Changing the code after clicking Insert. Once the shapes are inserted, they are no longer linked to the code. Get the flow right in the code before you click Insert, or edit the shapes on the canvas after that.
- Keeping the labels exactly as they were in the code. Short code labels like Manager OK? or Tell employee can be unclear in a workshop. Select the shape, press Enter and write what really happens, like Approve it? or Explain why.
- A background that looks scribbled. A background colour alone can look rough. Pick the solid fill in the style panel as well, as with Book leave, so the shape looks clean.
- Colouring every shape. When every shape has its own colour, the colours stop meaning anything. Keep each colour for one job: yellow for the decision, green for the happy path, a red outline for the path to avoid.
When a business analyst uses this
In a process mapping workshop, convert the agreed as-is flow from Mermaid code, then colour the approval step yellow and the rejection path red before you share your screen. Stakeholders can spot the decision point and the failure path at once, and you can relabel shapes live as they correct the wording.
Questions people ask
What is Mermaid to Excalidraw?
It's a tool in Excalidraw that turns Mermaid diagram code into Excalidraw shapes and arrows. The result is a normal diagram you can drag, recolour and relabel.
How do I convert Mermaid code to Excalidraw?
On excalidraw.com, open more tools, pick Mermaid to Excalidraw, type or paste your code and click Insert. The diagram appears on the canvas as editable shapes.
Can I use Mermaid to Excalidraw online?
Yes. It's built into excalidraw.com, so you can convert Mermaid code in your browser without installing anything.
