This library contains 300+ free Mermaid diagram examples covering the full breadth of modern software engineering — from network protocols and authentication flows to AI pipelines and distributed consensus algorithms. It is built for developers, software architects, DevOps engineers, and technical writers who need ready-to-use diagrams they can understand, adapt, and drop straight into documentation, architecture reviews, or slide decks.
This library contains 300+ free Mermaid diagram examples covering the full breadth of modern software engineering — from network protocols and authentication flows to AI pipelines and distributed consensus algorithms. It is built for developers, software architects, DevOps engineers, and technical writers who need ready-to-use diagrams they can understand, adapt, and drop straight into documentation, architecture reviews, or slide decks.
Every example is written in raw Mermaid syntax and opens directly in Graphlet, a free Mermaid editor and viewer that runs entirely in the browser. No account required. No install. Just click, edit, and export.
Mermaid is an open-source diagramming language that lets you describe charts and diagrams as plain text. Instead of dragging boxes around a canvas, you write a short script — and Mermaid renders it as a clean SVG diagram. It is natively supported in GitHub Markdown, Notion, Obsidian, GitLab, and dozens of other tools, making it the practical choice for teams that want diagrams that live alongside code in version control.
Mermaid supports multiple diagram types: sequence diagrams for request/response flows, flowcharts for decision logic and process steps, entity-relationship diagrams for data models, Gantt charts for project timelines, state diagrams, class diagrams, and more. The examples in this library use whichever diagram type best fits the concept being illustrated.
The library is organised into 17 categories. Each category page contains multiple mermaid diagram examples with a title, a plain-English explanation, and the full Mermaid source code.
- Networking Diagrams — 30 examples covering DNS resolution, HTTP request/response cycles, TLS handshakes, TCP connection states, WebSocket upgrades, and more. - Backend Diagrams — 20 examples across REST API design, GraphQL query execution, microservice communication, message queues, and webhook delivery flows. - Authentication Diagrams — 20 mermaid sequence diagram examples for OAuth2 authorization code flow, JWT issuance and validation, SSO with SAML, RBAC policy checks, and two-factor authentication. - Database Diagrams — 20 examples illustrating primary/replica replication, horizontal sharding, distributed transactions, MVCC, and read-through caching patterns. - Messaging Diagrams — 20 examples for Kafka producer/consumer flows, RabbitMQ routing, pub/sub fanout, event sourcing, and the saga pattern for distributed transactions. - Frontend Diagrams — 20 examples covering the browser rendering pipeline, React and Vue component lifecycles, server-side rendering, hydration, and service worker caching strategies. - System Design Diagrams — 20 mermaid flowchart examples for classic system design topics: microservice decomposition, CQRS read/write separation, blue-green deployments, and high-availability failover. - Cloud Diagrams — 20 examples for Kubernetes pod scheduling, serverless cold-start flows, auto-scaling triggers, IAM permission evaluation, and CDN cache hierarchies. - Security Diagrams — 20 examples illustrating TLS certificate chains, symmetric and asymmetric encryption, CORS preflight, CSRF token validation, XSS attack vectors, and API gateway security. - DevOps Diagrams — 20 examples for CI/CD pipeline stages, Git branching strategies (Gitflow, trunk-based), container build and push workflows, and observability stack integration. - Payments Diagrams — 20 examples covering payment gateway authorisation, 3D Secure challenge flows, subscription billing cycles, refund processing, and fraud-scoring pipelines. - AI Systems Diagrams — 20 examples for large language model inference, retrieval-augmented generation (RAG), vector database similarity search, multi-agent orchestration, and tool-calling loops. - Mobile Diagrams — 10 examples for APNs/FCM push notification delivery, offline-first sync with conflict resolution, and deep link routing on iOS and Android. - Search Systems Diagrams — 10 examples covering inverted index construction, query parsing and execution, autocomplete with prefix trees, and result ranking pipelines. - Analytics Diagrams — 10 examples for ETL extract/transform/load pipelines, data warehouse load patterns, client-side event tracking, and stream analytics with windowing. - IoT Diagrams — 10 examples for device provisioning and telemetry flows, sensor data aggregation pipelines, MQTT broker routing, and edge processing before cloud ingestion. - Distributed Systems Diagrams — 10 examples for the Raft and Paxos consensus algorithms, leader election, consistent hashing, and gossip protocol propagation.
Each diagram page follows the same format: a short description of the concept, the rendered diagram, and the complete Mermaid source code below it.
1. Read the diagram — the rendered view gives you an instant overview of the flow or architecture. 2. Copy the code — grab the raw Mermaid source to paste into your own documentation, README, or wiki. 3. Edit in Graphlet — click the "Edit in Graphlet" button to open the diagram in the Graphlet Mermaid editor. From there you can modify nodes, restyle the diagram, and export as SVG or PNG.
All examples are intentionally kept realistic rather than toy-sized. They reflect the kinds of flows you would actually encounter in production systems, so they serve as a useful reference even when you are not planning to use the code directly.
Graphlet is a free, browser-based Mermaid editor and viewer. It provides live preview as you type, syntax error highlighting, and one-click export to SVG and PNG. Because it runs entirely in the browser there is nothing to install and no data is sent to a server — your diagrams stay private. Graphlet is designed for engineers who write diagrams frequently and want a fast, distraction-free environment to do it in.
Whether you are sketching a new system design, documenting an existing architecture, or preparing diagrams for a technical spec, Graphlet gives you a clean Mermaid viewer alongside a full-featured editor. Open any example from this library to get started.