Mermaid examples

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

Mermaid covers more diagram types than any other text language here, and every one of them is a few lines of text. These examples are the ones worth copying.

Each page holds a real, editable diagram. Open one, change a line, and watch what happens; that is the fastest way to learn the syntax.

#Every example here is real

Each page holds a diagram that is stored, rendered and editable exactly like one you drew yourself. Open any of them, change something, and see what happens. Nothing here is a screenshot.

#In this set

Flowchart (Mermaid)A Mermaid flowchart you can copy into a Confluence page, with decisions and subgraphs.Styled flowchart (Mermaid)A Mermaid process flow styled with classDef and grouped into subgraphs.Sequence diagram (Mermaid)A Mermaid sequence diagram with participants, activations and loops, for a Confluence page.Class diagram (Mermaid)A Mermaid class diagram covering attributes, methods and inheritance.State diagram (Mermaid)A Mermaid state machine with transitions, composite states and forks.Entity relationship diagram (Mermaid)A Mermaid ER diagram with crow's foot cardinality and entity attributes.Gantt diagram (Mermaid)A Mermaid gantt chart with sections, dependencies and milestones.Pie chart (Mermaid)A Mermaid pie chart from label and value pairs, editable on the visual canvas.Mindmap (Mermaid)A Mermaid mindmap that nests branches purely by indentation.Git graph (Mermaid)A Mermaid git graph with commits, branches, merges and cherry picks.User journey (Mermaid)A Mermaid journey diagram scoring each step by actor and satisfaction.Block diagram (Mermaid)A Mermaid block-beta diagram laying out columns of blocks with arrows.Packet diagram (Mermaid)A Mermaid packet diagram mapping bit ranges to named header fields.Quadrant chart (Mermaid)A Mermaid quadrantChart with named axes and labelled points.Radar chart (Mermaid)A Mermaid radar-beta chart with several curves on one grid.Requirement diagram (Mermaid)A Mermaid requirementDiagram with satisfies and verifies relationships.Sankey diagram (Mermaid)A Mermaid sankey-beta diagram built from source, target and value rows.XY chart (Mermaid)A Mermaid xychart-beta combining bars and a line on one Confluence page.Wardley map (Mermaid)A Mermaid wardley-beta map plotting components by value chain and evolution.Ishikawa diagram (Mermaid)A Mermaid ishikawa-beta fishbone diagram grouping causes by category.Venn diagram (Mermaid)A Mermaid venn-beta diagram drawing overlapping sets with no image upload.Event modelling (Mermaid)A Mermaid eventmodeling diagram showing commands, events and read models over time.

Copy it. Change one line. See what happens.