Kanban boards: cards and columns

简介 / Introduction

A Kanban Board visualizes workflow stages using columns and cards. This article shows how to render the same board using PlantUML salt syntax and Mermaid’s native kanban diagram type.

PlantUML 版

PlantUML lacks a dedicated kanban diagram type, but salt can draw grid-based wireframes that simulate a kanban layout.

1
2
3
4
5
6
7
8
9
10
11

@startsalt
{
%+------------------+------------------+------------------+%
%|      To Do       |   In Progress    |      Done        |%
%+------------------+------------------+------------------+%
%| [Design DB]      | [Build API]       | [User Login]     |%
%+------------------+------------------+------------------+%
%| [Write Docs]      |                  |                  |%
%+------------------+------------------+------------------+%
}
@enduml

salt uses +— for horizontal dividers and | for vertical column boundaries. Cards use [] button-style cells; column headers sit in the top row.

Mermaid 版

Mermaid v11 has a native kanban diagram type with a more intuitive syntax:

1
2
3
4
5
6
7
8

kanban
    [To Do]
        * Design DB
        * Write Docs
    [In Progress]
        * Build API
    [Done]
        * User Login

[Column name] declares a column; cards are listed with * . Columns appear left-to-right in declaration order.

对比 / Side-by-side

小结 / Wrap-up

PlantUML salt suits scenarios needing fine-grained layout control or mixing with UI wireframes. Mermaid’s kanban syntax is more natural for agile teams, with columns and cards that mirror actual Kanban terminology. Both clearly show the “To Do → In Progress → Done” workflow.