Mermaid diagram examples & templates
Flowcharts are useful in any type of organisation and for illustration of many, varied procedural or technical scenarios. Flowcharts are used by all sorts of people for learning and understanding how a process works, for documenting and checking how systems have been designed and for sharing and discussing ideas in teams and with other people.
This collection of diagrams offers you a demonstration, a resource and an inspiration for your own work. Each diagram here 1) shows you an illustration of a realistic process described in a flowchart 2) gives you the starting Mermaid template to create your own version and 3) displays how the diagram is presented when rendered by Line9. Use these however you want — directly from our downloadable image, by editing in Line9 and re-publishing, or by taking it to a different Mermaid editor or viewer.
Also presented for each example diagram is the standard output diagram (using the same Mermaid source text) from the stock Mermaid engine. For a written comparison with the default renderer, read Line9 vs mermaid.live.
Scenarios
Identity and access
Engineering workflow
FlowchartPull request workflowBranch to merge, with the two rework loops that consume most of a pull request’s life.
/mermaid/github-pull-request-workflow
FlowchartCI/CD pipelinePush to production, including what happens when the rollout comes up unhealthy.
/mermaid/ci-cd-pipeline
FlowchartAI coding agentPrompt, tools, tests and the loops that send the model back to work.
/mermaid/ai-coding-agent-workflow
FlowchartIncident responsePage, ack, declare, mitigate or roll back, then write the postmortem.
/mermaid/incident-response-runbook
FlowchartDatabase migrationExpand, dual-write, backfill, switch reads, then contract — with two rollback gates.
/mermaid/database-migration-rollout
FlowchartFeature-flag canaryStaff, then 5 percent, then ramp — and one switch that turns the flag off.
/mermaid/feature-flag-canary-rollout
FlowchartWebhook deliverySign, POST, retry with backoff, then dead-letter and replay — or stop on 4xx.
/mermaid/webhook-delivery-retry
Business process
FlowchartContent approvalEditorial, legal and brand gates — including the path where a piece never ships at all.
/mermaid/content-approval-workflow
FlowchartSupport ticketTriage, known-issue match, reproduce, then answer or fix — and a path back if it reopens.
/mermaid/support-ticket-lifecycle
FlowchartPeer reviewFrom submission to print, including desk reject, delayed reports, and both kinds of revision.
/mermaid/peer-review-process
Architecture
FlowchartKubernetes architectureControl plane, worker nodes and pods, wired through the one component that reaches etcd.
/mermaid/kubernetes-architecture
FlowchartE-commerce ordersStorefront to fulfilment, including fraud review, webhooks, and the dead-letter path.
/mermaid/ecommerce-order-processing
FlowchartRAG architectureOffline ingestion and the online question path, meeting at the vector store.
/mermaid/rag-application-architecture
FlowchartData flowSources into stores and marts, with a quarantine loop for events that fail validation.
/mermaid/data-flow-diagram
When a flowchart will not sit still, the search is usually a layout problem — align, order, position, straight arrows. The first of those:
b and c on one row — a case stock Mermaid has not solved since 2016.
Try your own
Paste any Mermaid flowchart into the free online editor — no account required. Prefer the terminal? Install the line9 CLI (personal use free). For how Line9 differs from the stock online editor, read Line9 vs mermaid.live.