Chart Components

Bar chart

A bar chart here is a real table with a class on it. The bar is a background band inside the cell that already holds the number, sized by a --bar percentage the generator sets, so the value is text in the markup and the bar is a second reading of it. Nothing is added to the accessibility tree and nothing is lost when the band does not paint.

Files

4

in the payload

Largest share

52%

the stylesheet

Smallest share

12%

the palette file

Read: the stylesheet has the largest share in this example.Compare bar length for rank, and keep the percentage for exact values.

Every band uses one hue, and the row label carries the category. Per-row colors from the --data-* ramp were tried and measured out: at the 0.3 alpha that keeps each number legible, the four ramp members land within Lc 2 of each other, so color cannot identify a category (see NOTES.md, CSS charts). The next table uses a different scale: each bar is a share of the largest value, not a share of the total.

Read: the second chart compares counts to a named maximum. The printed count remains the exact value.

Reading summary

Pie chart

A pie here is a Mermaid pie showData fence, themed per palette in mermaid.js. It paints each percentage inside its own slice, states the raw value in the legend beside it, and separates one slice from the next with a stroke of the page ground, because the four ramp members sit at one lightness and two touching slices otherwise differ in hue alone. A CSS conic-gradient shipped in v1.42.0 and drew the same four numbers with none of that: no percentage in any slice, no legend of its own, and a disc a reader had to measure. It was taken back out in v1.43.0.

pie showData
  accTitle: Illustrative payload shares by file
  accDescr: Four payload files as illustrative shares of a whole, each slice carrying its own percentage.
  title Illustrative payload shares
  "dracula-nineties.css" : 52
  "mermaid.js" : 21
  "filter.js" : 15
  "mermaid-palette.json" : 12

The cost is a CDN request, and offline that request fails, so the fence renders as its own source text and every number in it stays readable. Four slices is still the ceiling, because the ramp has four members and each one is contrast-checked against the card it sits on. A fifth category has no color left that clears the floor, and a page that reaches for one is telling you it wanted a bar chart. Give every fence an accTitle and an accDescr, and state the same numbers in the prose or a table, because a reader who cannot see the slices needs them either way.

More diagram types

Twelve more Mermaid fences, each rendered against this palette and verified by getComputedStyle rather than by reading the exported SVG's own attributes, which can carry a stale literal hex even after CSS has already repainted it (see NOTES.md, Diagram types).

Class diagram

classDiagram
  accTitle: Class diagram sample
  accDescr: An Animal base class with a name and a sound, and a Dog subclass that inherits from it.
  class Animal {
    +String name
    +makeSound()
  }
  class Dog
  Animal <|-- Dog

State diagram

stateDiagram-v2
  accTitle: State diagram sample
  accDescr: A job that starts idle, moves to running when started, and returns to idle when stopped.
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop

Entity relationship diagram

erDiagram
  accTitle: Entity relationship diagram sample
  accDescr: A customer who places zero or more orders.
  CUSTOMER ||--o{ ORDER : places

Requirement diagram

requirementDiagram
  accTitle: Requirement diagram sample
  accDescr: A high-risk requirement satisfied by a simulation element.
  requirement req1 {
    id: 1
    text: the system shall log every request
    risk: high
    verifymethod: test
  }
  element sim {
    type: simulation
  }
  sim - satisfies -> req1

Kanban board

A kanban board: two tasks in a Todo column and one task in a Done column.

---
accTitle: Kanban board sample
accDescr: Two tasks in a Todo column and one task in a Done column.
---
kanban
  Todo
    task1[Write docs]
    task2[Fix bug]
  Done
    task3[Ship it]

Radar chart

radar-beta
  accTitle: Radar chart sample
  accDescr: One series scored across three axes.
  axis a["Speed"], b["Cost"], c["Quality"]
  curve x["Current"]{3,4,2}

Git graph

gitGraph
  accTitle: Git graph sample
  accDescr: A develop branch committed once and merged back into main.
  commit
  branch develop
  commit
  checkout main
  merge develop

Treemap

treemap-beta
  accTitle: Treemap sample
  accDescr: Two categories under one root, each sized by its own value.
  "Root"
    "A": 10
    "B": 20

Timeline

Mermaid's own timeline keyword: unrelated to this template's dl.timeline component (see NOTES.md, Diagram types). Three release years, each naming the versions that shipped that year: 2024 shipped v1.20.0 and v1.30.0, 2025 shipped v1.40.0 and v1.47.0, and 2026 shipped v1.48.0.

---
accTitle: Timeline diagram sample
accDescr: Three release years plotted on Mermaid's own timeline diagram, each naming the versions that shipped that year.
---
timeline
  title Release history
  2024 : v1.20.0 : v1.30.0
  2025 : v1.40.0 : v1.47.0
  2026 : v1.48.0

Gantt chart

gantt
  tickInterval 1day
  accTitle: Gantt chart sample
  accDescr: Two sequential tasks against a dated axis.
  title Two-task schedule
  dateFormat YYYY-MM-DD
  section Phase
  Task A :a1, 2026-01-01, 3d
  Task B :after a1, 3d

Architecture diagram

architecture-beta
  accTitle: Architecture diagram sample
  accDescr: A database and a server grouped inside one API boundary.
  group api(cloud)[API]
  service db(database)[Database] in api
  service server(server)[Server] in api
  db:L -- R:server

User journey

Task and section fills theme from this palette. The actor band and the per-task mood face keep Mermaid's own fixed colors on purpose, because a mood face reads as a fixed emotional scale rather than a brand category (see NOTES.md, Diagram types).

journey
  accTitle: User journey sample
  accDescr: One day rated across two sections, Work and Home.
  title My day
  section Work
    Code: 5: Me
    Review: 3: Me
  section Home
    Relax: 4: Me

Which one

Reach for the bar chart first, and for a plain table before either. A part-to-whole share of a few categories is a real thing to draw, so the template themes one pie. The Mermaid fence prints the number in the slice, which is the rule that makes a pie readable, and every value is in the markup as text either way. It themes one pie, not two.

• Ranking or comparing magnitudes: bar chart.
• One part-to-whole split, four categories or fewer: a Mermaid pie showData fence.
• Five or more categories, two series, or a value a reader will want to read exactly: a table. The bar chart is a table, so this is the same answer twice.
• A trend over time: neither. Nothing here draws a line chart, and a Mermaid xychart-beta fence is not themeable (see NOTES.md, Diagram types).