# How to add color to Mermaid diagrams

> How to color Mermaid flowcharts, pie charts and Gantt charts with style, classDef and theme settings, plus a prompt that gets Claude or ChatGPT to do it for you.

Source: https://oneclearreader.com/guides/color-mermaid-diagrams · Updated 28 September 2026 · One Clear Reader (Northlight Group Pty Ltd)

> [!answer] Mermaid diagrams take color three ways: `style A fill:#DDEFDD` colors one box, `classDef done fill:#DDEFDD` defines a named color you attach to boxes with `A:::done`, and a `%%{init: ...}%%` line at the top recolors the whole diagram. The colors live in the diagram code, so they only show in apps that draw Mermaid.

## Is a colored Mermaid diagram still Markdown?

A colored Mermaid diagram sits inside a valid Markdown file, but the diagram code and its colors are a separate format called Mermaid. Knowing the difference saves a lot of confusion.

The **file** is Markdown. A Mermaid diagram sits inside an ordinary Markdown code block, the kind that starts with three backticks and a label:

```md
    ```mermaid
    graph TD
      A --> B
    ```
```

The **diagram code inside the block** is Mermaid. Markdown's only job is to say *this block is labeled mermaid*. Whether it turns into boxes and arrows is up to the app you open it in.

Colors work the same way. `style`, `classDef` and `%%{init}%%` are Mermaid commands, not Markdown. So:

- In an app that draws Mermaid, you see a colored diagram.
- In an app that doesn't, you see the code, colors and all, as text.
- In every app, the file still opens. It's valid Markdown either way.

If you're new to reading the diagram code itself, start with [how to read Mermaid diagrams](/guides/read-mermaid-diagrams). For the Markdown around it, see [what a .md file is](/guides/what-is-a-md-file).

> [!scribble] markdown is the envelope. mermaid is the letter inside.

## Method 1: Color one Mermaid box with style

The quickest way to color one box in a Mermaid diagram is a `style` line. Add it anywhere inside the diagram, usually at the bottom.

```mermaid-pair
graph LR
  A[Draft] --> B[Review] --> C[Ship]
  style C fill:#DDEFDD,stroke:#1E5A1E,color:#1E5A1E
```

The pattern is `style`, the box's ID, then settings separated by commas. This table lists the settings you can use.

| Setting | What it changes | Example |
|---|---|---|
| `fill` | Background of the box | `fill:#DDEFDD` |
| `stroke` | Border color | `stroke:#1E5A1E` |
| `stroke-width` | Border thickness | `stroke-width:3px` |
| `color` | Text color | `color:#1E5A1E` |
| `stroke-dasharray` | Dashed border | `stroke-dasharray:5 5` |

The ID is the short name before the bracket. In `C[Ship]`, the ID is `C` and the label is *Ship*. Always style the ID, not the label.

## Method 2: Reuse Mermaid colors with classDef

`classDef` lets you define a color once in a Mermaid diagram and attach it by name to every box that shares a meaning, like *done*, *in progress* and *blocked*.

```mermaid-pair
graph TD
  A[Research]:::done --> B[Design]:::done
  B --> C[Build]:::active
  C --> D[Test]:::todo
  C --> E[Legal review]:::blocked
  classDef done fill:#DDEFDD,stroke:#1E5A1E,color:#1E5A1E
  classDef active fill:#FBF3C4,stroke:#6B5C14,color:#141414
  classDef todo fill:#FFFFFF,stroke:#B8BFCC,color:#555555
  classDef blocked fill:#FDE7EC,stroke:#8C2136,color:#8C2136
```

There are two parts:

1. **Define** a class: `classDef done fill:#DDEFDD,stroke:#1E5A1E`
2. **Attach** it with three colons after the box: `A[Research]:::done`

You can also attach one class to several boxes at once with `class A,B done`. This is the method to ask your AI for, because the colors then carry meaning, and changing one `classDef` line recolors every matching box.

### How do I color the arrows in a Mermaid flowchart?

Mermaid colors arrows with `linkStyle` and their number, counting from 0 in the order they appear.

```mermaid-pair
graph LR
  A[Order] --> B[Pay] --> C[Ship]
  linkStyle 1 stroke:#FF5A36,stroke-width:3px
```

Here `linkStyle 1` is the second arrow, from *Pay* to *Ship*. Use `linkStyle default` to change every arrow at once.

## Method 3: Theme the whole Mermaid diagram with init

To change every color in a Mermaid diagram at once, put an `init` line as the very first line inside the block. This works for all diagram types, including pie charts and Gantt charts, where `style` and `classDef` don't apply.

```mermaid-pair
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#DCE9FB','primaryBorderColor':'#1B4C82','lineColor':'#6B7592'}}}%%
graph LR
  A[Ask] --> B[Draft] --> C[Read]
```

Setting `theme` to `base` means *start from a blank theme*, so your colors aren't mixed with a built-in palette. This table lists the theme variables you'll use most.

| Variable | Changes |
|---|---|
| `primaryColor` | Default box fill |
| `primaryBorderColor` | Default box border |
| `primaryTextColor` | Default text |
| `lineColor` | Arrows and lines |
| `secondaryColor`, `tertiaryColor` | Second and third fills, used by some diagram types |
| `pie1` to `pie12` | Pie chart slices, in order |
| `fontFamily` | Font for the whole diagram |

Mermaid also ships ready-made themes: `default`, `neutral`, `dark` and `forest`. Swap `'base'` for one of those and drop the variables to use it.

## Which Mermaid diagram types accept which colors?

Each Mermaid diagram type accepts different color commands. This table shows which commands work in which diagram.

| Diagram | style / classDef | init theme | Notes |
|---|---|---|---|
| Flowchart (`graph`, `flowchart`) | Yes | Yes | Full control, including arrows with `linkStyle` |
| Pie chart | No | Yes | Use `pie1`, `pie2`… for slice colors |
| Gantt chart | No | Yes | `done`, `active` and `crit` tags change bar color automatically |
| Sequence diagram | No | Yes | Use `rect rgb(…)` blocks to shade a section |
| State diagram | classDef | Yes | Attach with `class Draft done` |
| Mind map | classDef-like `:::` | Yes | Support varies between apps |
| Timeline | No | Yes | Sections take theme colors in order |

### A colored pie chart

A Mermaid pie chart takes its slice colors from `pie1`, `pie2` and so on in an `init` line.

```mermaid-pair
%%{init: {'theme':'base','themeVariables':{'pie1':'#FF5A36','pie2':'#4A9FE8','pie3':'#E9CF5E'}}}%%
pie title Where the week went
  "Hunting for files" : 42
  "Actually reading" : 31
  "Fixing formatting" : 27
```

### A Gantt chart with status colors

A Mermaid Gantt chart colors its bars from status tags, with no extra code needed:

```mermaid-pair
gantt
  dateFormat YYYY-MM-DD
  section Build
  Reader :done, 2026-09-01, 10d
  Search :active, 2026-09-08, 10d
  section Ship
  Beta :crit, 2026-09-18, 7d
```

`done` bars are muted, `active` bars are highlighted, and `crit` bars are marked as critical.

## How do I choose Mermaid colors that stay readable?

Mermaid colors stay readable when you follow six simple rules, so the color makes a diagram quicker to read:

- **Use pale fills and dark text.** Light backgrounds with dark borders and text read well on screen and in print. Save strong fills for one or two boxes you want to stand out.
- **Give each color one meaning.** Green for done, yellow for in progress, red for blocked. Don't reuse a color for something unrelated.
- **Don't rely on color alone.** About 1 in 12 men has some form of color vision deficiency ([National Eye Institute](https://www.nei.nih.gov/eye-health-information/eye-conditions-and-diseases/color-blindness)). Keep words in the labels too: *Blocked: legal review*, not just a red box.
- **Stick to three or four colors.** More than that and nothing stands out.
- **Check the contrast.** Text should be clearly darker than its fill. If you have to squint, darken the text color.
- **Think about dark pages.** Colors you set yourself are drawn as written, even when the reader shows a dark page. Always set a dark text `color` along with a pale `fill`. If you set only the fill, the text may switch to a light color for the dark page and vanish into your pale box.

This table gives a four-color set that works well together.

| Meaning | Fill | Border and text |
|---|---|---|
| Done | `#DDEFDD` | `#1E5A1E` |
| In progress | `#FBF3C4` | `#6B5C14` |
| Info or next | `#DCE9FB` | `#1B4C82` |
| Blocked or risk | `#FDE7EC` | `#8C2136` |

## How do I get Claude or ChatGPT to color Mermaid diagrams?

Claude, ChatGPT and Cursor will add Mermaid colors if you ask, so you don't need to write any of this by hand. These prompts work well:

> Draw this as a Mermaid flowchart. Color each step with classDef: done in green, in progress in yellow, blocked in red. Use pale fills with dark text.

> Recolor this Mermaid diagram using these colors: fill #DCE9FB, border #1B4C82, arrows #6B7592. Use an init line with theme base.

> Turn this list of tasks into a Mermaid Gantt chart. Mark finished tasks as done, the current one as active, and anything overdue as crit.

If you want every diagram to match, add a line to your project instructions or `CLAUDE.md`: *When drawing Mermaid diagrams, use classDef colors: done #DDEFDD, active #FBF3C4, blocked #FDE7EC.*

> [!scribble] ask once, in your instructions. every diagram after that comes out matching.

## Why don't my Mermaid diagram colors show?

Mermaid colors usually fail to show because the app doesn't draw Mermaid, the app strips diagram styles, or the code has a small mistake. This table matches what you see to the likely cause and the fix.

| What you see | Likely cause | Fix |
|---|---|---|
| The code, as text | The app doesn't draw Mermaid | [Open it in a reader that does](/guides/open-md-file-mac) |
| A diagram, but no colors | The app strips diagram styles for safety | Try another app, or use an `init` theme |
| Colors on some boxes only | `style` uses the label instead of the ID | Style `C`, not `Ship` |
| `classDef` ignored | Missing `:::` or a typo in the class name | Names must match exactly |
| Error on the `init` line | Wrong quotes or a missing brace | Use single quotes inside and check `}}}%%` at the end |
| Pie slices ignore `style` | Pie charts don't support `style` | Use `pie1`, `pie2` in an `init` line |

Where Mermaid diagrams draw with colors varies. GitHub, GitLab, Obsidian, Typora and Notion all draw Mermaid, though apps differ in which styling they keep.

One Clear Reader draws diagrams on your Mac with Mermaid 11 in its strict security mode. Strict mode switches off clickable links and HTML inside diagrams ([Mermaid docs](https://mermaid.js.org/config/usage.html)). It leaves Mermaid's own color settings alone, so `style`, `classDef`, `linkStyle` and `init` colors all come through.

When a Mermaid diagram sets no colors in One Clear Reader, it uses its own palette, matched to a light or dark page. If a diagram won't draw at all, One Clear Reader tells you which line has the syntax error. To use a colored diagram somewhere else, **Copy SVG** (Pro) copies the drawing for design tools, and [Save as PDF](/guides/markdown-to-pdf-mac) (Pro) keeps it in the page.

## Questions

### Is Mermaid part of Markdown?

No, Mermaid is not strictly part of Markdown. A Mermaid diagram lives inside a Markdown code block labeled mermaid, so the file is valid Markdown. The diagram code is its own format, and the app decides whether to draw it.

### Can you add color to Markdown text?

Plain Markdown has no color syntax. Some apps accept HTML like a span with a color style, and many draw GitHub-style callouts such as [!NOTE] and [!WARNING] as colored boxes. Inside Mermaid diagrams, color is fully supported.

### How do I change the color of one box in a Mermaid flowchart?

To color one box in a Mermaid flowchart, add a line like style A fill:#DDEFDD,stroke:#1E5A1E, using the box's ID rather than its label.

### What is classDef in Mermaid?

`classDef` is a named Mermaid style you define once and attach to many boxes with three colons, for example A:::done. It's the easiest way to color by meaning.

### Why does my Mermaid diagram show as code?

A Mermaid diagram shows as code when the app you're using doesn't draw Mermaid. Open the file in a reader that does, such as One Clear Reader on a Mac.

### Do Mermaid diagram colors work on a dark page?

Yes, in apps that keep Mermaid styling. Colors you set with style or classDef are drawn as written whatever the page color, so use pale fills with dark text and each box stays readable on a light or dark page.