← All diagram types

Mermaid kanban syntax: columns, cards and metadata with examples

Mermaid kanban syntax with rendered examples: columns, cards with and without ids, assignees and ticket references, and wrapped card labels.

A kanban board is work in columns — to do, doing, done — with each item a card that moves left to right. Mermaid's kanban board is built from indentation: top-level lines are columns, indented lines are the cards in them.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Columns and cards

Each column is written as id[Title] or just [Title]. Cards are the lines indented under it, the same way, one per line. Cards keep their source order in the stack:

mermaid
kanban
  todo[Todo]
    [Draft launch announcement]
    [Write migration guide]
    [Audit third-party licences]
  doing[In progress]
    [Rebuild onboarding flow]
    [Refresh status page copy]
  done[Done]
    [Ship dark mode]
Render this to PDF →How diagram blocks work

A column title with no bracket (Todo) is accepted too, and the cards under it need the indentation to show they belong to it.

Card ids

Adding an id — docs[Write the migration guide] — gives a card a stable identifier without changing what is drawn. Ids are what you reach for when a board is generated from a data source, so the same task keeps its identity across renders:

mermaid
kanban
  todo[Todo]
    docs[Write the migration guide]
    licences[Audit third-party licences]
  review[In review]
    id9[Redesign billing settings]
Render this to PDF →How diagram blocks work

Metadata

A card can carry inline metadata after @{ … }, written as key: value pairs separated by commas. assigned draws a muted footer on the card, ticket names the issue it belongs to, and priority adds a coloured corner tag:

mermaid
kanban
  todo[Todo]
    id3[Rebuild onboarding flow]@{ ticket: AC-1042, assigned: 'J. Okafor' }
    id7[Audit third-party licences]@{ assigned: 'R. Alvarez' }
  review[In review]
    id9[Redesign billing settings]@{ ticket: AC-1037, assigned: 'M. Chen' }
Render this to PDF →How diagram blocks work

Metadata keys the renderer does not know are ignored, and an unclosed @{ is drawn as ordinary text — a half-written annotation never breaks the board.

Long labels

Card labels wrap inside a fixed card width, so a sentence is fine and does not widen the board. Column height follows the tallest stack, which keeps the columns aligned however uneven the work is:

mermaid
kanban
  backlog[Backlog]
    [Add per-request user font registries so any brand font can be embedded]
    [Support horizontal xychart orientation]
  building[Building]
    [Rewrite the PDF tag report as a tree view]
  shipped[Shipped]
    [Colour emoji in markdown and canvas]
    [CJK fallback fonts]
Render this to PDF →How diagram blocks work

Not supported in makesPDF yet: ticketBaseUrl frontmatter is parsed but not turned into links — a ticket number is drawn as text. A card has no colour or lane styling of its own, and metadata keys must be one of assigned, ticket or priority.