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?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Theme: forest

---
config:
  theme: forest
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Theme: neutral

---
config:
  theme: neutral
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Theme: base

---
config:
  theme: base
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Looks

Look: classic

---
config:
  look: classic
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Look: handDrawn

---
config:
  look: handDrawn
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Look: neo

---
config:
  look: neo
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Layout

Layout: dagre

---
config:
  layout: dagre
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Layout: elk

---
config:
  layout: elk
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

Combinations

The theme, look and layout options can be combined to make interesting graphics, in the example below we have an informal hand drawn and marker pen style

---
config:
  layout: elk
  look: handDrawn
  theme: forest
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]

```mermaid
---
config:
  layout: elk
  look: handDrawn
  theme: forest
---
flowchart LR
    A([Fancy a hot drink?]) --> B{Tea or coffee?}
    B -->|Tea| C[Boil the kettle]
    B -->|Coffee| D[Grind the beans]
```