Mermaid templates
Fifty ready-to-edit Mermaid templates, grouped by diagram type. Each one opens in the editor with the code pre-filled — change the labels, keep the structure.
Flowchart
User Onboarding Flowchart Map a new user's journey from landing page to activation, with email verification, fallback loops, and a clear success endpoint.
Order Fulfillment Flowchart Trace an e-commerce order from checkout to delivery, covering payment failure, backorders, carrier handoff, and the support escalation path.
Decision Tree Flowchart Route incoming requests through a chain of yes-or-no questions until each one lands in the right queue, with every branch converging on one endpoint.
Incident Response Flowchart A page-ready on-call runbook that routes alerts by severity, enforces acknowledgment, tracks root cause investigation, and ends in a postmortem.
CI/CD Pipeline Flowchart Document a delivery pipeline from push to production, with test gates, staging smoke checks, a manual approval step, and a clear failure path.
Customer Support Triage Flowchart Sort incoming tickets by account value and churn risk, assign the right agent tier, enforce response targets, and escalate anything left unresolved.
Approval Workflow Flowchart Model a two-level signoff process where a manager reviews first and finance steps in only when the request amount crosses a set threshold.
Swimlane Process Flowchart Show an order-to-delivery process across four team lanes, making every handoff between customer, sales, warehouse, and shipping visible at a glance.
Fault Handling Flowchart Chart how a request survives upstream failure, with labeled timeout and error branches, a retry budget, cached fallback, and a degraded mode log.
Data Pipeline Flowchart Map a nightly extract, validate, transform, and load job, including a quarantine branch for bad rows and a dashboard refresh at the end.
Sequence
API Authentication Sequence Walk through an OAuth2 authorization code exchange, from the user clicking sign in to the client calling a protected API with a bearer token.
Payment Processing Sequence Follow a card payment from order submission through a payment gateway and bank authorization to confirmation, with the capture step noted separately.
Microservice Call Sequence Trace one request through an API gateway, order service, inventory service, and notification service, separating the synchronous path from the event.
Login Flow Sequence Show a credential check with a success branch that issues a session cookie and a failure branch that counts the attempt toward account lockout.
Webhook Retry Sequence Model webhook delivery with a success branch and a timeout branch that enqueues redelivery, replaying on a loop until the endpoint acknowledges.
Database Transaction Sequence Illustrate a begin, update, and commit sequence with an alt block showing the rollback path when a constraint violation aborts the transaction.
Order Lifecycle Sequence Follow an order through payment authorization, warehouse fulfillment, and either shipment with capture or a backorder notification to the customer.
WebSocket Chat Sequence Show two chat clients connecting over websockets and exchanging messages and read receipts through a server that pushes updates in a loop.
Class
Strategy Pattern Class Diagram Show the strategy pattern with a payment gateway abstraction, two concrete implementations, and the service that depends on the interface.
Domain Model Class Diagram Document a small order domain with customers, orders, line items, and products, including attributes, methods, and associations.
API SDK Class Diagram Design an SDK class layout with a shared API client, a base resource class, and endpoint-specific subclasses that inherit from it.
Inheritance Hierarchy Class Diagram Visualize a shape class hierarchy with a base class, subclasses, and an override chain that demonstrates inheritance at three levels.
State
Order Lifecycle State Diagram Track an order from checkout through payment, packing, shipping, and delivery, including the cancellation path and terminal states.
Auth Session State Diagram Model an authentication session with credential checks, token refresh loops, and the transitions that return users to anonymous.
Task Queue State Diagram Diagram a background job moving from queue to worker, with retry, backoff, success, and dead-letter states for failure handling.
Subscription Billing State Diagram Map a subscription through trial, active, past due, cancelled, and expired states with the payment events that drive each transition.
ER
E-Commerce ER Diagram Model an online store's data backbone with customers, orders, line items, products, and reviews joined by crow's foot relationships.
Blog CMS ER Diagram Design a content platform schema with authors, posts, comments, categories, and a join table that resolves the many-to-many cleanly.
Employee Management ER Diagram Sketch an HR schema with departments, employees, projects, assignments, and timesheets, ready to grow into a full workforce model.
Banking Ledger ER Diagram Model accounts, transactions, and double-entry ledger entries for a financial system where every movement of money must balance.
School System ER Diagram Map students, courses, teachers, enrollments, and grades in one schema that shows how a join table carries the real relationships.
Gantt
Website Launch Gantt Chart Plan a website launch as a Gantt chart with planning, design, and build sections, dependency-driven tasks, and a go-live milestone.
Two-Week Sprint Gantt Chart Schedule a two-week sprint with a setup phase, parallel build workstreams, and a wrap-up that ends in a sprint review milestone.
Marketing Campaign Gantt Chart Run a product marketing campaign as a Gantt chart with prep, parallel content production, and a launch-day milestone plus follow-up reporting.
30-60-90 Day Onboarding Plan Structure a new hire's first ninety days as a Gantt chart with three phases, cross-phase dependencies, and a check-in milestone at each gate.
Pie
Market Share Pie Chart Show how a single market divides between players with a five-slice pie chart, raw values displayed, and percentages computed automatically.
Time Allocation Pie Chart Audit where a working week actually goes with a six-slice pie chart of hours per activity, percentages computed automatically from the raw values.
Mindmap
Product Roadmap Mindmap Lay out a now, next, later product roadmap as a radial mindmap that keeps strategy discussions visual and easy to reshuffle.
Learning Path Mindmap Turn a study curriculum into a branching mindmap that shows foundations, advanced topics, and practice work at a glance.
Business Model Mindmap Sketch a business model on one canvas with value proposition, customers, channels, revenue streams, and costs branching from the root.
Project WBS Mindmap Break a project into phases and deliverables with a work breakdown structure mindmap that keeps scope visible to the whole team.
Timeline
Journey
Customer Onboarding Journey Score each step of a new customer's first week from account creation to first shared report, exposing the dips where users struggle.
Online Shopping Journey Follow a shopper from search to delivery tracking with sentiment scores that expose checkout as the lowest point of the trip.
Git graph
Feature Branch Git Flow Document the everyday feature branch workflow — branch off main, stack commits, merge back, and tag the release commit.
Release Flow with Develop Branch Draw the full release cycle — features accumulate on develop, a release branch is cut, and the release merges into both main and develop.
Hotfix Flow Gitgraph Document the production hotfix maneuver — cut a hotfix branch from main, patch and test, tag a patch release, and back-merge into develop.
Quadrant
Feature Prioritization Quadrant Plot six candidate features on reach and value axes to separate quick wins from big bets, fill-ins, and question marks.
Risk Assessment Quadrant Plot project risks by likelihood and impact so each one lands in the quadrant that names its response, from mitigate now to accept and watch.