Kanban ​

A kanban board shows work items moving through columns — todo, in progress, done. kymo's editor reads the Mermaid kanban syntax.

This page works like a quickstart: as you scroll, the pane on the right shows the source and the preview for the section you're reading. Copy grabs the source; ▶ Open in editor loads it into editor.kymo.studio (pick mermaid in the diagram-type dropdown when starting from scratch).

Indentation is the structure, mindmap-style: a top-level line is a column, an indented line is a card in it. Both take an optional id with the label in brackets (id[label]) — useful when the label needs spaces or you want to reference the card.

kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases]
  id9[Ready for deploy]
    id8[Design grammar]
  id10[Done]
    id5[define getData]

▶ Try it in the editor

Card metadata ​

A trailing @{ … } attaches metadata to a card: assigned, ticket, and priority (Very High, High, Low, Very Low) — priority colours the card's edge, the rest render inside it.

kanban
  id1[Todo]
    docs[Create Documentation]@{ assigned: 'knsv', ticket: MC-2037, priority: 'High' }
  id2[In Progress]
    spec[Update DSL spec]@{ priority: 'Very High' }

▶ Try it in the editor

Status. Kanban previews on this page and in the editor use the Mermaid renderer; importing kanban boards into kymo's own pipeline (native SVG/PNG/PDF rendering) is on the roadmap.

See also ​

• Gantt — when the schedule matters more than the board.
• User Journey — for the user's path rather than the team's work.