Workflow Diagram Maker.

What is a workflow diagram?

A workflow diagram shows how a piece of work moves from a trigger to an outcome: who does each step, where decisions and approvals happen and where the work is handed from one person or team to another. A plain flowchart describes logic; a workflow diagram adds responsibility.

This workflow designer draws each role, team or system as a swimlane. Arrows that cross lanes are hand-offs — the places where delays, lost information and duplicate work usually appear.

How to design a workflow, step by step

1. Name the trigger and the outcome: “Expense submitted” to “Employee reimbursed”.
2. List the roles involved and create one swimlane per role with subgraph Role … end.
3. Write the steps in order inside the lane of whoever performs them. Start every step with a verb.
4. Add decisions and approvals with diamonds and label every branch, including rejections and loops back.
5. Connect the lanes. Each arrow between lanes is a hand-off; check that the receiver knows what to do and has what they need.
6. Review the diagram with the people who do the work. Mark bottlenecks or manual steps with a highlight style, then export the agreed version.

Included workflow templates

Rename lanes to match your organisation and remove steps you do not use. For the logic inside a single step, the Flowchart Maker is often clearer; for a schedule with dates, use the Gantt Chart Maker.

Swimlane syntax

flowchart LR
    subgraph Sales
        lead([New lead]) --> qualify{Qualified?}
    end
    subgraph Delivery
        kickoff[Kick-off meeting]
    end
    qualify -->|Yes| kickoff
    classDef slow fill:#ffe9c7,stroke:#d08b00
    class qualify slow

Use direction TB inside a subgraph to stack its steps vertically. Mermaid positions lanes automatically; it does not force equal-width lanes like a dedicated BPMN modelling tool.

Workflow diagram, process map or BPMN?

Process maps and workflow diagrams are mostly the same thing: a readable picture of how work flows. BPMN 2.0 is a formal standard with specific event, gateway and message symbols, often used to configure workflow engines. This tool produces communication and documentation diagrams, not executable BPMN. It does not run, automate or monitor the workflow.

Download SVG for documents, websites and slides that need sharp lines at any size, or PNG at 1× to 4× resolution for chat apps, tickets and tools that do not accept SVG. The background can match the theme, be white or be transparent.

Rendering happens in your browser with the open-source Mermaid library. Your code is not uploaded, drafts are kept in this browser’s local storage, and a share link stores the compressed diagram after the # sign, which browsers do not send to the web server.