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.

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

Copy it. Change one line. See what happens.