Mermaid templates
Annotated examples for every major Mermaid diagram type. Open one in the editor and make it yours.
Flowchart
Nodes and arrows for processes, decisions, and logic flows — the most common Mermaid diagram.
View exampleSequence Diagram
Message passing between participants over time — perfect for API flows and protocols.
View exampleClass Diagram
UML classes with fields, methods, and relationships — inheritance, composition, and more.
View exampleState Diagram
States and transitions for lifecycles and machines — from order status to UI modes.
View exampleER Diagram
Entities, attributes, and cardinality for database schema design.
View exampleGantt Chart
Project timelines with sections, tasks, durations, and dependencies.
View examplePie Chart
Quick proportional breakdowns with a one-line-per-slice syntax.
View exampleMindmap
Hierarchical idea maps where indentation defines the tree structure.
View exampleTimeline
Events grouped by period on a horizontal line - roadmaps, histories and release notes.
View exampleC4 Diagram
System context diagrams in the C4 model - people, systems and how they connect.
View exampleGit Graph
Branches, commits and merges drawn as a git history - release flows and branching strategies.
View exampleUser Journey
Steps a person takes to reach a goal, scored by how they feel - for UX reviews and onboarding maps.
View exampleQuadrant Chart
Plot items on two axes split into four quadrants - prioritisation and positioning maps.
View exampleSankey Diagram
Flows between nodes drawn as bands whose width shows the amount - budgets, traffic and energy.
View exampleXY Chart
Bar and line charts from plain text - trends and comparisons without a spreadsheet.
View exampleBlock Diagram
Blocks on a grid you control - system overviews where layout matters as much as links.
View exampleArchitecture Diagram
Cloud and system architecture with services, groups and icons - infrastructure at a glance.
View example