# Mermaid examples

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

---

## Related

[ReferenceThe language reference behind these.](https://help.gocapable.com/diagrams/reference.html)

[Diagram typesGrouped by what you want to draw.](https://help.gocapable.com/diagrams/diagram-types.html)

[ExamplesEvery other set.](https://help.gocapable.com/diagrams/examples.html)

---

_Copy it. Change one line. See what happens._