How does Mermaid draw swimlanes?

Mermaid has no dedicated swimlane syntax. The usual approach is a subgraph per role, with the cross-role arrows written outside the blocks. The layout engine positions the groups automatically, so they are not perfectly equal-width lanes, but ownership and hand-offs are clear.

How do I get this into Word or PowerPoint?

Click "Open in the editor", adjust the text, then choose "Export Word (docx)" or "Export PowerPoint (pptx)". The file contains a high-resolution image with the Mermaid code appended, so you can come back and edit later. You can also download the PNG directly from this page.

How do I ask an AI to adapt it?

Send the prompt above to ChatGPT or Claude and add your changes, for example "make it three approval levels and add a finance step". Paste the whole reply into the editor; the explanatory text around the code is ignored automatically.

Leave Approval Swimlane Diagram Template

Leave request approval across four lanes (employee, line manager, department head, HR) with a two-level approval based on the number of days. Edit the Mermaid code to match your policy and export PNG, SVG, Word or PowerPoint for free.

Previewed in the “Indigo” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

Employee handbooks, HR policy documents and onboarding slides. This version routes requests of three days or fewer to the line manager and longer ones to the department head; HR records the approved leave and the decision goes back to the employee. Each role has its own lane, so who does what is visible at a glance.

Making it yours

A lane is a subgraph Name … end block. Add a department by adding a block and putting its steps inside.
Change the threshold in C{3 days or fewer?}. For a third approval level add another diamond and another lane.
To run the flow left to right, change TB on the first line to LR, or use the Layout control in the editor.
Double-click any node in the preview to edit its text; the change is written back to the code.

Mermaid code

flowchart TB
    subgraph Employee
        A[Fill in leave request] --> B[Submit request]
        F[Receive decision]
    end
    subgraph Line manager
        C{3 days or fewer?}
        D[Manager approval]
    end
    subgraph Department head
        E[Head approval]
    end
    subgraph HR
        G[Record in attendance]
    end
    B --> C
    C -- Yes --> D
    C -- No --> E
    D -- Approved --> G
    E -- Approved --> G
    D -- Rejected --> F
    E -- Rejected --> F
    G --> F

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw a leave approval swimlane diagram in Mermaid flowchart syntax. Use subgraph blocks for four lanes: Employee, Line manager, Department head, HR. The employee fills in and submits a leave request; requests of 3 days or fewer go to the line manager, longer ones to the department head; approved requests are recorded by HR; rejected requests go back to the employee. Output only the mermaid code block.

FAQ

How does Mermaid draw swimlanes?: Mermaid has no dedicated swimlane syntax. The usual approach is a subgraph per role, with the cross-role arrows written outside the blocks. The layout engine positions the groups automatically, so they are not perfectly equal-width lanes, but ownership and hand-offs are clear.
How do I get this into Word or PowerPoint?: Click "Open in the editor", adjust the text, then choose "Export Word (docx)" or "Export PowerPoint (pptx)". The file contains a high-resolution image with the Mermaid code appended, so you can come back and edit later. You can also download the PNG directly from this page.
How do I ask an AI to adapt it?: Send the prompt above to ChatGPT or Claude and add your changes, for example "make it three approval levels and add a finance step". Paste the whole reply into the editor; the explanatory text around the code is ignored automatically.

More in this category

All templates

Updated 2026-09-05