# Styled flowchart (Mermaid)

Styling in Mermaid is done with class definitions rather than by colouring nodes one at a time. Define a class once, apply it to as many nodes as you like, and the diagram stays consistent.

This example marks the failure states and the terminal success state differently.

---

## What this example shows

* classDef, which defines a reusable style.
* Applying one class to several nodes in a single line.
* Colour used for emphasis while the shapes still carry the meaning.

---

## A worked example

Open it, edit it, or copy the source below.

![Styled flowchart (Mermaid)](https://help.gocapable.com/images/att1414725723.svg)

The source, which you can paste into a new diagram and edit:

```
flowchart LR
  A([Request]) --> B[Validate]
  B --> C{Valid?}
  C -- No --> E1[Reject: 400]
  C -- Yes --> D[Authorise]
  D --> F{Permitted?}
  F -- No --> E2[Reject: 403]
  F -- Yes --> G[Process]
  G --> H{Succeeded?}
  H -- No --> E3[Retry queue]
  H -- Yes --> I([200 OK])

  classDef fail fill:#fde8e8,stroke:#c53030,color:#742a2a
  classDef ok fill:#e6fffa,stroke:#2c7a7b,color:#234e52
  class E1,E2,E3 fail
  class I ok
```

---

## Making it your own

* Change the two classDef lines and the whole diagram restyles.
* Add a third class for anything under discussion, so reviewers can see what is changing.
* Never rely on colour alone; the labels here still say what happened.

---

## Related

[Sequence diagram (Mermaid)Messages over time, with an alternative and a loop.](https://help.gocapable.com/diagrams/sequence-diagram-mermaid.html)

[Class diagram (Mermaid)Types, fields and relationships with multiplicity.](https://help.gocapable.com/diagrams/class-diagram-mermaid.html)

[Mermaid examplesBack to the rest of these examples.](https://help.gocapable.com/diagrams/mermaid-examples.html)

---

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