Proposal
Mermeid.js should add Swimlanes Flowcharts.
Swimlane diagrams are a widely used visual tool in business process modeling and systems design. They extend regular flowcharts by organizing steps into horizontal or vertical lanes, where each lane represents a different actor, department, or system involved in a process.
Currently, Mermaid lacks built-in syntax for swimlanes, requiring complex workarounds using subgraphs or custom styling. This limits its usability for teams who want to document cross-functional workflows in a clear and standardized way.
Use Cases
-
Business Process Mapping
Use Case: Mapping complex business processes with multiple actors, departments, or systems involved.
Example:
A loan approval process involves various steps, from application submission (handled by the customer service team) to loan assessment (handled by the underwriting team) and final approval (handled by the finance department).
A Swimlane diagram helps clarify the roles and responsibilities of each team and shows how work flows between them.
-
Cross-functional Project Management
Use Case: Managing projects that require collaboration across multiple departments or teams.
Example:
A software development project involves stages like requirements gathering (business analyst), design (UX/UI designers), development (engineers), and testing (QA team).
Swimlane diagrams visualize the responsibilities and sequence of actions for each team, improving communication and reducing delays.
-
Customer Journey Mapping
Use Case: Understanding the customer experience across different touchpoints and departments.
Example:
A customer support process that involves inquiry submission (customer), response and troubleshooting (support team), and escalation (manager), clearly shows the interactions each department has with the customer at various stages.
Swimlanes help track the customer’s journey and identify bottlenecks or areas for improvement in the process.
-
Compliance & Risk Management
Use Case: Ensuring compliance with regulations across multiple teams and functions.
Example:
A regulatory compliance process for data privacy might involve data collection (IT), data analysis (data team), audit and reporting (legal team), and final review (compliance officer).
Swimlane diagrams allow teams to visualize their part in meeting compliance requirements, ensuring accountability and reducing errors.
Screenshots
No response
Syntax
Example Syntax for a Flowchart Diagram with 3 horizontal swimlanes
flowchart TD
laneHor User
A[Start] --> B[Submit Request]
laneHor System
B --> C[Process Request] --> D[Send Confirmation]
laneHor Admin
D --> E[Approve Request]
Implementation
This is a proposal which I'd love to see built into mermaid by the wonderful community.
Proposal
Mermeid.js should add Swimlanes Flowcharts.
Swimlane diagrams are a widely used visual tool in business process modeling and systems design. They extend regular flowcharts by organizing steps into horizontal or vertical lanes, where each lane represents a different actor, department, or system involved in a process.
Currently, Mermaid lacks built-in syntax for swimlanes, requiring complex workarounds using subgraphs or custom styling. This limits its usability for teams who want to document cross-functional workflows in a clear and standardized way.
Use Cases
Business Process Mapping
Use Case: Mapping complex business processes with multiple actors, departments, or systems involved.
Example:
A loan approval process involves various steps, from application submission (handled by the customer service team) to loan assessment (handled by the underwriting team) and final approval (handled by the finance department).
A Swimlane diagram helps clarify the roles and responsibilities of each team and shows how work flows between them.
Cross-functional Project Management
Use Case: Managing projects that require collaboration across multiple departments or teams.
Example:
A software development project involves stages like requirements gathering (business analyst), design (UX/UI designers), development (engineers), and testing (QA team).
Swimlane diagrams visualize the responsibilities and sequence of actions for each team, improving communication and reducing delays.
Customer Journey Mapping
Use Case: Understanding the customer experience across different touchpoints and departments.
Example:
A customer support process that involves inquiry submission (customer), response and troubleshooting (support team), and escalation (manager), clearly shows the interactions each department has with the customer at various stages.
Swimlanes help track the customer’s journey and identify bottlenecks or areas for improvement in the process.
Compliance & Risk Management
Use Case: Ensuring compliance with regulations across multiple teams and functions.
Example:
A regulatory compliance process for data privacy might involve data collection (IT), data analysis (data team), audit and reporting (legal team), and final review (compliance officer).
Swimlane diagrams allow teams to visualize their part in meeting compliance requirements, ensuring accountability and reducing errors.
Screenshots
No response
Syntax
Example Syntax for a Flowchart Diagram with 3 horizontal swimlanes
flowchart TD
laneHor User
A[Start] --> B[Submit Request]
laneHor System
B --> C[Process Request] --> D[Send Confirmation]
laneHor Admin
D --> E[Approve Request]
Implementation
This is a proposal which I'd love to see built into mermaid by the wonderful community.