Real-World Use Cases

Practical scenarios showing how teams use Mermaid diagrams to solve actual problems in their daily workflow.

Diagrams are most valuable when they solve a specific communication problem at a specific moment. This guide walks through six common scenarios where a well-placed diagram saves time, prevents misunderstandings, and creates a lasting artifact for your team. Each scenario includes context about who creates the diagram and why, a recommended diagram type, working Mermaid code, and tips for getting the most value out of the effort. For syntax help, visit the Learn page. For design guidance, see the Best Practices guide.

Featured templates

Mermaid for Security Threat Modeling

Five ready-to-edit threat-model diagrams — RBAC, OAuth 2.0 PKCE, Kubernetes attack surface, supply chain, zero trust. Open any one in the editor with a single click.

View templates

Developer Onboarding

Flowchart Architecture New Hires

Who: Engineering leads or senior developers preparing for a new team member's first week. When: Before the new hire starts, or during their first day. Why: New engineers routinely cite "understanding the system architecture" as their biggest challenge during onboarding. A high-level architecture diagram that shows service boundaries, data stores, and communication patterns reduces the time-to-productivity from weeks to days.

The goal is not to document every detail, but to provide a mental map that the new hire can reference as they explore the codebase. Focus on the services they will interact with most frequently, the databases they will query, and the key integrations with external systems.

Recommended Diagram

flowchart TB subgraph Client Layer Web[React SPA] Mobile[Mobile App] end subgraph API Layer Gateway[API Gateway] Auth[Auth Service] end subgraph Core Services Users[User Service] Orders[Order Service] Payments[Payment Service] Notify[Notification Service] end subgraph Data Layer PG[(PostgreSQL)] Redis[(Redis Cache)] S3[(S3 Bucket)] end subgraph External Stripe[Stripe API] SendGrid[SendGrid] end Web --> Gateway Mobile --> Gateway Gateway --> Auth Gateway --> Users Gateway --> Orders Orders --> Payments Payments --> Stripe Orders --> Notify Notify --> SendGrid Users --> PG Orders --> PG Payments --> PG Gateway --> Redis Users --> S3
Try it in Editor

Tips for This Scenario

  • Keep the diagram to one level of abstraction. Show services, not individual endpoints or functions.
  • Label external services clearly so the new hire knows which integrations require API keys or special credentials.
  • Store the diagram in the project's README or wiki and update it when services are added or removed.
  • Pair the architecture diagram with a separate sequence diagram showing the most common user flow (e.g., login, place an order).

Design Reviews and Architecture Decision Records

Flowchart Sequence Diagram Decision Making

Who: The engineer proposing a new feature or system change, presenting to the team during a design review. When: Before implementation begins, typically as part of an RFC or ADR (Architecture Decision Record) document. Why: Words alone are ambiguous when describing system interactions. A sequence diagram attached to a design document makes the proposed behavior explicit, reducing the number of "what about this edge case?" questions during the review.

The diagram should illustrate the proposed change in context, showing how new components interact with existing ones. Include the happy path and at least one error path to demonstrate you have considered failure scenarios.

Recommended Diagram

sequenceDiagram participant Client participant API participant Cache participant DB participant Queue Note over API: Proposed: Add caching layer Client->>API: GET /products/123 API->>Cache: Check cache alt Cache Hit Cache-->>API: Cached data API-->>Client: 200 OK (from cache) else Cache Miss Cache-->>API: null API->>DB: SELECT * FROM products DB-->>API: Product data API->>Cache: SET with 5min TTL API-->>Client: 200 OK end Note over Client,Queue: Write path (cache invalidation) Client->>API: PUT /products/123 API->>DB: UPDATE products API->>Cache: DELETE key API->>Queue: Emit ProductUpdated API-->>Client: 200 OK
Try it in Editor

Tips for This Scenario

  • Use Note annotations to highlight what is new or changed versus what already exists in the system.
  • Show at least one error or alternate path using alt/else blocks to demonstrate failure handling.
  • Keep the participant list short. If you need more than 6 participants, consider splitting into multiple diagrams.
  • Share the diagram as a SimpleMermaid URL in the ADR document so reviewers can modify it during discussion.

Post-Mortem Analysis

Sequence Diagram Flowchart Incident Response

Who: The incident commander or on-call engineer writing the post-mortem report after a production incident. When: Within 48 hours of an incident, as part of the blameless post-mortem process. Why: A timeline diagram makes the sequence of events unambiguous. It shows exactly when each system failed, when alerts fired, and when remediation steps were taken. This clarity is essential for identifying the root cause and preventing recurrence.

Recommended Diagram

sequenceDiagram participant User participant LB as Load Balancer participant App as App Server participant DB as Database participant Alert as PagerDuty Note over User,Alert: Incident Timeline - 2026-03-15 User->>LB: Requests spike (3x normal) LB->>App: Forward traffic App->>DB: Connection pool exhausted DB-->>App: Connection timeout App-->>LB: 503 Service Unavailable LB-->>User: Error page Note over App: 14:23 - Error rate exceeds 5% App->>Alert: Trigger P1 alert Note over Alert: 14:25 - On-call engineer paged Note over App: 14:32 - Connection pool limit raised App->>DB: Connections restored Note over App: 14:35 - Error rate returns to normal App-->>User: 200 OK
Try it in Editor

Tips for This Scenario

  • Use Note annotations with timestamps to create a clear timeline of events.
  • Color-code failure steps if possible. Red for the failure cascade, green for the recovery steps.
  • Include human actions (alerts, escalations, manual interventions) alongside system interactions.
  • Link the diagram in the post-mortem document and reference it during the review meeting.

Sprint Planning

Gantt Chart Project Management Agile

Who: The engineering manager, scrum master, or tech lead facilitating the sprint planning ceremony. When: At the start of each sprint, after stories have been estimated and prioritized. Why: A Gantt chart makes task dependencies and parallel workstreams visible at a glance. It helps the team identify bottlenecks before the sprint starts, balance work across team members, and communicate the plan to stakeholders who want to know when specific features will be ready for testing.

Recommended Diagram

gantt title Sprint 12 - Authentication Revamp dateFormat YYYY-MM-DD axisFormat %a %b %d section Backend (Alice) Design JWT schema :des1, 2026-03-23, 1d Implement token service :impl1, after des1, 3d Write migration scripts :mig1, after impl1, 1d section Frontend (Bob) Update login components :fe1, 2026-03-23, 2d Integrate token refresh :fe2, after fe1, 2d Error handling UI :fe3, after fe2, 1d section QA (Carol) Write test cases :qa1, 2026-03-25, 2d Integration testing :qa2, after impl1, 2d Regression suite :qa3, after qa2, 1d section Milestones Feature complete :milestone, after mig1, 0d Sprint demo :milestone, 2026-04-03, 0d
Try it in Editor

Tips for This Scenario

  • Group tasks by person or team to make workload distribution visible.
  • Use after dependencies to show which tasks block others, revealing the critical path.
  • Add milestone markers for key deliverables like "feature complete" and "sprint demo."
  • Update the Gantt chart mid-sprint if priorities shift, and share the updated SimpleMermaid URL in Slack.

API Documentation

Sequence Diagram Flowchart Developer Docs

Who: Backend engineers or technical writers creating API documentation for internal or external consumers. When: When publishing a new API version, or when onboarding partners who will integrate with your API. Why: API consumers need to understand the order of calls, required headers, and expected responses. A sequence diagram in the API docs is far more effective than a wall of curl examples because it shows the full interaction flow including authentication, pagination, and error handling.

Recommended Diagram

sequenceDiagram participant Dev as Developer participant API as REST API participant Auth as Auth Server Note over Dev,Auth: API Integration Flow Dev->>Auth: POST /oauth/token Note right of Dev: client_id + client_secret Auth-->>Dev: access_token (expires in 1h) Dev->>API: GET /v2/users?page=1 Note right of Dev: Authorization: Bearer {token} API-->>Dev: 200 OK + users[] + pagination Dev->>API: POST /v2/users Note right of Dev: Content-Type: application/json API-->>Dev: 201 Created + user object Dev->>API: GET /v2/users/123 API-->>Dev: 200 OK + user detail Note over Dev,API: Error handling Dev->>API: GET /v2/users/999 API-->>Dev: 404 Not Found + error object Dev->>API: GET /v2/users (expired token) API-->>Dev: 401 Unauthorized Dev->>Auth: POST /oauth/token (refresh) Auth-->>Dev: New access_token
Try it in Editor

Tips for This Scenario

  • Show the authentication flow first, then the main API operations, then error handling.
  • Use Note annotations to indicate required headers, content types, and key response fields.
  • Include a token refresh flow so consumers understand the full lifecycle.
  • Embed the diagram in your API documentation alongside the OpenAPI specification.

Security Threat Modeling

Flowchart Security Compliance

Who: Security engineers, AppSec team members, or senior developers conducting threat modeling during the design phase of a new feature. When: During the design review, before code is written, or during a periodic security assessment. Why: Threat models identify attack surfaces and potential vulnerabilities before they reach production. A visual threat model makes it easy to communicate risks to non-security stakeholders and creates a traceable artifact for compliance audits (SOC 2, ISO 27001, PCI DSS).

The diagram should show data flows, trust boundaries, and identified threats mapped to specific components. Pair it with a STRIDE analysis table for a complete threat model document.

Recommended Diagram

flowchart TB subgraph Internet Attacker[Threat Actor] User[Legitimate User] end subgraph DMZ WAF[Web Application Firewall] LB[Load Balancer] end subgraph Application Tier API[API Server] Auth[Auth Service] FileUpload[File Upload Service] end subgraph Data Tier DB[(Primary Database)] Secrets[Secrets Manager] end User -->|HTTPS| WAF Attacker -->|XSS, SQLi| WAF Attacker -->|DDoS| LB WAF --> LB --> API API --> Auth API --> FileUpload Auth --> Secrets API --> DB Attacker -.->|Path Traversal| FileUpload Attacker -.->|Credential Stuffing| Auth style Attacker fill:#fef2f2,stroke:#dc2626,color:#991b1b style WAF fill:#dcfce7,stroke:#16a34a,color:#166534 style Secrets fill:#dbeafe,stroke:#2563eb,color:#1e40af
Try it in Editor

Tips for This Scenario

  • Use dashed lines (-.->) for attack vectors and solid lines for legitimate data flows.
  • Color-code threat actors (red), defenses (green), and sensitive components (blue).
  • Draw trust boundaries using subgraphs (Internet, DMZ, Application, Data) to make scope clear.
  • Reference this diagram in your STRIDE analysis and link to it from Jira security stories.
  • Explore the full set of security diagram templates in the Diagram Gallery.

Start with a scenario that matches your need

Copy any example above, paste it into the editor, and adapt it to your specific project. The best diagram is the one your team will actually use.

Open the Editor