Diagram Showcase

Visual examples of Mermaid and other diagram types rendered in context.

Diagram Styling

Intro to styling Themes Theme: default --- config: theme: default --- flowchart LR A([Fancy a hot drink?]) --> B{Tea or coffee?} B -->|Tea| C[Boil the kettle] B -->|Coffee| D[Grind the beans] Theme: dark --- config: theme: dark --- flowchart LR A([Fancy a hot drink?...

Flowchart

A flowchart maps out a process or decision as a series of steps connected by arrows. Each step is a node; each arrow shows which step comes next. Diamond shapes mark decision points where the path splits based on a yes/no or either/or condition. Flowcharts are useful any time you want to visualise...

Sequence Diagram

A sequence diagram shows how different participants — people, systems, or services — communicate with each other over time. Messages flow left to right between vertical lifelines, with time advancing downwards. Solid arrows represent requests; dashed arrows represent replies. Sequence diagrams are...

Class Diagram

A class diagram describes the structure of a system by showing its building blocks — called classes — and the relationships between them. Each class lists its attributes (the data it holds) and methods (the actions it can perform). Lines between classes show how they are related: one book can have m...

State Diagram

A state diagram shows the different states something can be in and the events or conditions that cause it to move from one state to another. A filled circle marks the starting point; arrows show the transitions; labels on arrows describe what triggers the change. State diagrams are useful wherever...

Entity Relationship Diagram

An entity relationship diagram (ERD) maps out the data model of a system. Entities are the things being stored — users, books, reading lists. Attributes describe the data each entity holds. The lines between entities show how they are related, with symbols at each end describing how many of each can...

User Journey Diagram

A user journey diagram maps out the steps a person takes to complete a goal, together with how they feel at each stage. Steps are grouped into sections that represent phases of the experience. A score from 1 (frustrating) to 5 (delightful) shows the emotional tone of each step. User journeys help...

Gantt Chart

A Gantt chart displays a project schedule as a series of horizontal bars on a calendar. Each bar represents a task; its position shows when it starts and ends. Tasks can be grouped into sections and linked so that one task begins only after another finishes. Gantt charts are used everywhere schedu...

Pie Chart

A pie chart divides a circle into slices to show how a whole is made up of parts. Each slice is proportional to its value. Pie charts are most effective when there are a small number of categories and the relative sizes are the main point of interest. They are a natural fit for showing breakdowns:...

Quadrant Chart

A quadrant chart divides a space into four sections using two axes, placing items in the quadrant that best describes their position. The axes can represent any two dimensions you want to compare — effort versus impact, urgency versus importance, cost versus value. Quadrant charts are popular for...

Requirement Diagram

A requirement diagram documents the requirements for a system and the relationships between them. Each requirement has an identifier, a description, a risk level, and a verification method. Requirements can be linked to show traceability (one requirement is related to another) or containment (one re...

Git Graph

A Git graph visualises the branching and merging history of a version-controlled project. Each commit appears as a dot on a branch line; branches diverge when work splits into parallel streams and converge when work is merged back together. Although Git graphs originate in software development, th...

C4 Diagram

A C4 diagram describes the architecture of a software system at four levels of detail: Context, Containers, Components, and Code. The Context level — shown here — is the most accessible: it shows the system as a single box surrounded by the people and external systems it interacts with. C4 diagram...

Mindmap

A mindmap radiates outwards from a central idea, with branches representing related topics and sub-branches adding further detail. The structure mirrors the way ideas naturally connect — one thought leads to another, and the whole picture emerges as the map grows. Mindmaps are excellent for brains...

Timeline

A timeline arranges events in chronological order along a horizontal axis. Each entry shows a date or period and the events associated with it. Related events can be grouped under a shared label by listing them on separate lines under the same date. Timelines are well suited to history pages, proj...

ZenUML Sequence Diagram

ZenUML is an alternative sequence diagram notation with a more code-like syntax than the standard Mermaid sequence diagram. Rather than listing each message on a separate line, ZenUML uses a nested structure that mirrors how actions and responses group together naturally. Both ZenUML and the stand...

Sankey Diagram

A Sankey diagram shows flows between categories, where the width of each band is proportional to the quantity flowing through it. Thicker bands represent larger flows; thinner bands represent smaller ones. Nodes on the left are sources; nodes on the right are destinations. Sankey diagrams are exce...

XY Chart

An XY chart plots data against two axes — one horizontal (x) and one vertical (y). Mermaid supports bar charts and line charts within the same diagram, and the two can be combined on a single set of axes to compare related data series. XY charts are a natural fit for showing trends over time: mont...

Block Diagram

A block diagram arranges content into a grid of rectangular blocks. Unlike a flowchart, which emphasises direction and logic, a block diagram emphasises structure and spatial grouping — which things sit alongside each other and how they are connected. Block diagrams are useful for showing the layo...

Packet Diagram

A packet diagram visualises the structure of a data packet — the envelope of information that travels across a network. Each field in the diagram represents a section of the packet, with its bit position shown on the horizontal axis. Wider blocks represent fields that occupy more bits. Packet diag...

Kanban Board

A Kanban board organises tasks into columns that represent stages of a workflow. Cards move from left to right as work progresses — typically from 'To Do' through 'In Progress' to 'Done'. The visual layout makes it easy to see at a glance where work is piling up and what still needs attention. Kan...

Architecture Diagram

An architecture diagram shows the services and infrastructure that make up a system, along with the connections between them. Services are represented as labelled icons; groups collect related services into named areas; edges show how services communicate. Architecture diagrams are used in technic...

Radar Chart

A radar chart (also called a spider chart or star chart) plots multiple data points on axes that radiate outward from a central point. Each axis represents a different dimension; the data points are connected to form a polygon. Comparing two or more polygons on the same chart makes strengths and gap...

Event Modeling Diagram

An event modeling diagram maps out how a system processes actions over time by organising entities into three swimlanes: the user interface or automation that triggers an action, the commands and read models that process or present data, and the events that record what happened. The timeline runs le...

Treemap Diagram

A treemap displays hierarchical data as a set of nested rectangles. Each parent category is a large rectangle subdivided into smaller rectangles representing its children. The area of each rectangle is proportional to its value, making it easy to compare both the overall size of categories and the r...

Venn Diagram

A Venn diagram uses overlapping circles to show the relationships between sets. Items in the overlap belong to more than one set; items outside the overlaps belong to only one. The size of each circle and the size of the overlapping region can be adjusted to reflect the relative quantities. Venn d...

Ishikawa Diagram

An Ishikawa diagram — also called a fishbone diagram or cause-and-effect diagram — places a problem at the right-hand 'head' of a fish skeleton and arranges the contributing causes along the 'bones'. Top-level causes branch off the central spine; sub-causes branch off those, creating a layered pictu...

Wardley Map

A Wardley Map positions components on a two-axis grid. The vertical axis shows visibility — how directly a component faces the user, from invisible infrastructure at the bottom to user-facing features at the top. The horizontal axis shows evolution — how mature or commodity a component is, from nove...

TreeView Diagram

A TreeView diagram displays hierarchical data as a directory-style tree — the kind of structure you see in a file browser or a table of contents sidebar. Parent nodes appear above their children; children are indented to show they belong to the parent above them. TreeView diagrams are useful for s...