Skip to content
SayDiagramSayDiagram

Learn

Themes and styling

Choose a Preview theme (neutral, forest, dark, …), override colors with themeVariables, and style individual flowchart nodes with classDef.

On this page7 sections
  1. Syntax cheatsheet
  2. 1.Built-in Mermaid themes
  3. 2.Per-diagram theme with %%{init}%%
  4. 3.Customize with themeVariables
  5. 4.Style individual nodes with classDef
  6. 5.Put it together
  7. Check your level

Syntax cheatsheet

Quick reference for this diagram type

ConceptSyntax
Built-in themesdefault · neutral · forest · dark · base
Init directive%%{init: {'theme':'forest'}}%%
Theme variablesthemeVariables: { primaryColor: '#…' }
Node styleclassDef name fill:#…,stroke:#…
Apply classA[Label]:::name
SayDiagram Theme menuToolbar → Theme (Preview only)
  1. 1

    Built-in Mermaid themes

    Mermaid ships named themes that recolor the whole diagram: default, neutral, forest, dark, and base.

    In SayDiagram, open the Theme menu in the editor toolbar to switch the Preview palette. Arrange mode keeps its own node and edge colors.

    • Tip: SayDiagram’s default theme is neutral — the same look as a fresh diagram.
    • Tip: Theme choice is saved with the diagram (in layout settings) so shares and exports stay consistent.
    %%{init: {'theme':'forest'}}%%
flowchart LR
  A[Idea] --> B[Spec]
  B --> C{Ready?}
  C -->|Yes| D[Ship]
    Expand
  2. 2

    Per-diagram theme with %%{init}%%

    You can also set theme in the Mermaid source with an init directive at the top of the file.

    This is useful when pasting diagrams into other tools, or when you want the theme embedded in the .mmd itself.

    • Tip: If both the SayDiagram Theme menu and an init directive are set, SayDiagram keeps them in sync — editing either updates Preview.
    %%{init: {'theme':'dark'}}%%
flowchart TD
  Start([Begin]) --> Work[Build]
  Work --> Done([Done])
    Expand
  3. 3

    Customize with themeVariables

    Start from theme base (or forest / neutral) and override colors with themeVariables such as primaryColor, primaryTextColor, primaryBorderColor, and lineColor.

    Timeline and other multi-series diagrams also use cScale0–cScale11 for section colors.

    • Tip: theme: base is the usual starting point when you want a fully custom palette.
    %%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#e8f5e9',
    'primaryTextColor': '#1b5e20',
    'primaryBorderColor': '#2e7d32',
    'lineColor': '#558b2f'
  }
}}%%
flowchart LR
  A[Plan] --> B[Build]
  B --> C[Ship]
    Expand
  4. 4

    Style individual nodes with classDef

    For flowcharts, classDef sets fill, stroke, color, and stroke-width on named classes. Attach a class with :::name after a node.

    In Arrange mode, the shape style panel writes these classDef lines for you when you change fill or border colors.

    flowchart LR
  A[Idea]:::accent --> B[Spec]
  B --> C[Ship]:::done
  classDef accent fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
  classDef done fill:#dcfce7,stroke:#16a34a,color:#14532d
    Expand
  5. 5

    Put it together

    Combine a named theme with a couple of classDef accents for hierarchy without fighting the global palette.

    %%{init: {'theme':'neutral'}}%%
flowchart LR
  A[Idea]:::accent --> B[Spec]
  B --> C{Ready?}
  C -->|Yes| D[Ship]:::done
  classDef accent fill:#e0e7ff,stroke:#4f46e5,color:#312e81
  classDef done fill:#dcfce7,stroke:#16a34a,color:#14532d
    Expand

Check your level

80% or higher certifies this lesson. You'll get 3–5 random questions from a larger bank.

Back to examples