Examples
Mermaid diagram examples
40 complete diagrams for situations that come up at work, written to render cleanly in GitHub, Notion, Obsidian and the MermanDraw editor. Each page has the code, what the diagram shows, how to adapt it, and a link to the syntax guide for its type.
Software architecture
Service layouts, component boundaries, and request paths.
-
Flowchart
Microservices Architecture Flowchart in Mermaid
Mermaid flowchart of a microservices system: web and mobile clients, an API gateway, three services with their own databases, and a message broker.
-
Flowchart
Event-Driven Architecture Flowchart with a Dead-Letter Queue
Mermaid flowchart of an event-driven system: producers publish to topics on an event bus, consumers subscribe, and failed messages go to a dead-letter queue.
-
Sequence Diagram
Web Request Lifecycle Sequence Diagram: CDN to Database
Mermaid sequence diagram tracing one page request from browser through CDN, load balancer, and app server to cache and database, with alt blocks for cache hits.
-
Class Diagram
MVC Pattern Class Diagram: Model, View, Controller
Mermaid class diagram of the Model-View-Controller pattern for a task list app: fields, methods, generics, and association, dependency, and aggregation arrows.
-
Class Diagram
Observer Pattern Class Diagram with Interfaces
Mermaid class diagram of the Observer pattern: Subject and Observer interfaces, a concrete StockTicker subject, two concrete observers, and realization arrows.
-
Architecture
Cloud Architecture Diagram: VPC, Load Balancer, Database
Mermaid architecture-beta diagram of a production VPC: users reach a load balancer, two app servers write to a primary database with a read replica and backups.
-
Block
Embedded System Block Diagram with Sensors and MCU
Mermaid block-beta diagram of a small IoT device: sensors feed an ADC into a microcontroller, which drives a radio module and flash storage, plus a power block.
APIs & authentication
Request/response flows, OAuth, tokens, webhooks, and error handling.
-
Sequence Diagram
OAuth 2.0 Authorization Code Flow Sequence Diagram
Mermaid sequence diagram of the OAuth 2.0 authorization code flow with PKCE: user, client app, authorization server, and resource server, sign-in to API call.
-
Sequence Diagram
JWT Authentication Sequence Diagram with Token Refresh
Mermaid sequence diagram of JWT auth: login returns access and refresh tokens, an API call fails on expiry, and nested alt blocks show the refresh and re-login.
-
Flowchart
REST API Request Flowchart: Rate Limit, Auth, Validation
Mermaid flowchart of a REST API middleware chain: rate limiting, authentication, authorization, schema validation, the handler, and every status code returned.
-
Sequence Diagram
Webhook Delivery Sequence Diagram with Retries and Backoff
Mermaid sequence diagram of outbound webhook delivery: signed payload, a loop of five attempts with backoff, alt for success or failure, and dead-lettering.
-
Flowchart
Password Reset Flowchart with Token Expiry
Mermaid flowchart of a secure password reset: same response whether the account exists, a 30-minute single-use token, policy checks, and session invalidation.
-
State Diagram
User Session Lifecycle State Diagram with Idle and Expiry
Mermaid state diagram of a login session: anonymous, authenticating, an Active composite state with working, idle, and locked substates, then expiry or logout.
DevOps & infrastructure
Pipelines, deployments, incident handling, and environment layouts.
-
Flowchart
CI/CD Pipeline Flowchart: Commit to Production
A Mermaid flowchart of a CI/CD pipeline: commit, lint and test, build, staging deploy, manual approval, production release, and failure paths back.
-
Git Graph
Git Branching Strategy as a Mermaid Git Graph
A Mermaid gitGraph of a release branching model: main, develop, a feature branch, a release branch, and a hotfix, with merges back into main and develop.
-
Flowchart
Blue-Green Deployment Flowchart with Rollback Path
A Mermaid flowchart of a blue-green deployment: live traffic on blue, a new release on green, a health check gate, the router switch, and a rollback path.
-
Flowchart
Kubernetes Deployment Flowchart: Ingress to Pods
A Mermaid flowchart of a Kubernetes workload in one namespace: ingress, service, a deployment with three pods, plus the ConfigMap, Secret, and volume it mounts.
-
Flowchart
Incident Response Flowchart: Alert to Postmortem
A Mermaid flowchart of an on-call incident process: alert, severity triage, mitigation, status page updates, resolution, and a postmortem for SEV1 and SEV2.
-
Timeline
Software Release History as a Mermaid Timeline
A Mermaid timeline of a product release history grouped by year: major versions, platform launches, and infra migrations, ready for a changelog or README.
Data & databases
Schemas, ETL flows, and how data moves between systems.
-
Entity Relationship
E-commerce Database ER Diagram with Orders and Payments
A Mermaid ER diagram for an online store: customers, addresses, orders, order items, products, categories, and payments, with typed keys and cardinality.
-
Entity Relationship
Blog CMS Database ER Diagram: Posts, Tags, and Comments
A Mermaid ER diagram for a blog or CMS: users, posts, comments, tags through a post_tags join table, and media attachments, with typed keys and cardinality.
-
Flowchart
ETL Pipeline Flowchart: Sources to Data Warehouse
A Mermaid flowchart of an ETL pipeline: databases, event logs, and CSV files pass through extraction, staging, validation, and transformation to a warehouse.
-
Sankey
Website Traffic Flow as a Mermaid Sankey Diagram
A Mermaid sankey diagram tracing website sessions from acquisition channels to landing pages and on to sign-up, purchase, or exit, with widths scaled to volume.
-
XY Chart
Monthly Active Users Chart with Mermaid XY Chart
A Mermaid xychart with a bar series of monthly active users, a line for the growth target, and last year as a baseline, over twelve months with a labeled axis.
-
Pie Chart
Cloud Cost Breakdown as a Mermaid Pie Chart
A Mermaid pie chart splitting a monthly cloud bill into compute, databases, object storage, network egress, observability, and other, with legend values.
Business processes
Approvals, order handling, onboarding, and support workflows.
-
Flowchart
Order Fulfillment Process Flowchart for E-commerce
A Mermaid flowchart of an e-commerce order from checkout to delivery: payment authorization, stock check, backorder loop, pick and pack, shipping, and refunds.
-
Flowchart
Purchase Approval Workflow Flowchart with Swimlanes
A Mermaid flowchart that uses subgraphs as swimlanes for requester, manager, and finance, with amount thresholds deciding who signs off on a purchase request.
-
State Diagram
Customer Support Ticket Lifecycle State Diagram
A Mermaid state diagram for a help desk ticket: new, triaged, in progress, waiting on customer, resolved, closed, plus the reopen path and auto-close rule.
-
User Journey
Employee Onboarding User Journey Diagram
A Mermaid user journey for a new hire across three phases, before day one, first week, and first month, with a score and an owner for each onboarding task.
-
State Diagram
SaaS Subscription Lifecycle State Diagram
A Mermaid state diagram of a subscription from trial to active, past due, and canceled, with the retry grace period and the reactivation window billing handles.
-
Sequence Diagram
Online Card Payment Authorization Sequence Diagram
A Mermaid sequence diagram of a card payment: storefront, payment gateway, and card network exchange an authorization, with alt branches for approve or decline.
Product & UX
User journeys, feature prioritization, and app state.
-
User Journey
User Onboarding Journey Diagram for a SaaS Product
A Mermaid user journey from first blog visit to a daily habit: discover, sign up, first value, habit, with a 1 to 5 score per step showing where new users drop.
-
Quadrant
Feature Prioritization Quadrant Chart (Effort vs Impact)
A Mermaid quadrant chart plotting seven backlog items by effort and impact, with quadrants labeled Do first, Plan carefully, Reconsider, and Avoid.
-
State Diagram
Mobile App Screen Navigation Flow State Diagram
A Mermaid state diagram with each mobile screen as a state: splash, onboarding, sign-in, home, search, detail, checkout, confirmation, and back edges.
-
Mindmap
Quarterly Product Roadmap Mindmap with Themes
A Mermaid mindmap for a three-quarter product roadmap: a central node, one branch per quarter, and three initiatives under each, readable at a glance in a deck.
-
Flowchart
User Sign-up Flowchart with Email and Social Login
A Mermaid flowchart of account creation with two entry paths, email with verification and social login with consent, converging on profile setup.
Project planning
Timelines, roadmaps, and release history.
-
Gantt
Software Project Gantt Chart with Dependencies and Milestone
A Mermaid Gantt chart for a website redesign in three sections, discovery, design, and build, with task ids, after-dependencies, status tags, and a milestone.
-
Gantt
Two-Week Sprint Plan Gantt Chart (Excludes Weekends)
A Mermaid Gantt chart for a two-week sprint with backend, frontend, and QA sections, day-level durations, weekends excluded, and a release-candidate milestone.
-
Timeline
Product Launch Plan Timeline, Before and After Launch Day
A Mermaid timeline for a product launch from three months before to one month after: private beta, scope freeze, outreach, launch week, and a retrospective.
-
Quadrant
Project Risk Matrix Quadrant Chart (Likelihood vs Impact)
A Mermaid quadrant chart plotting seven project risks by likelihood and impact, with quadrants labeled Mitigate now, Prepare a plan, Accept, and Monitor.