# Mermaid カンバン図のチートシート

カードが並ぶ列。作業の 1 段階が 1 列です。

## 列

列は id と、角括弧の中のタイトルです。この列が作業の各段階になります。

```mermaid
kanban
  todo[Todo]
  doing[In progress]
  done[Done]
```

![横並びの 3 つのカンバン列。見出しは Todo、In progress、Done です。](/diagrams/kanban/columns.svg)

## カード

カードは id と角括弧の中の説明で、属する列の下にインデントして書きます。

```mermaid
kanban
  todo[Todo]
    docs[Write the docs]
    fix[Fix the bug]
  doing[In progress]
    ship[Ship the release]
```

![Todo 列に Write the docs と Fix the bug の 2 枚のカードが並び、隣の In progress 列には Ship the release があります。](/diagrams/kanban/tasks.svg)

## カードのメタデータ

カードのあとの波括弧が、追加の情報を運びます。担当者、チケット、緊急度。

```mermaid
kanban
  todo[Todo]
    id3[Update database function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
```

![Todo 列に Update database function というカードが 1 枚あり、その横に knsv が担当者だと示す小さな印があります。](/diagrams/kanban/metadata.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。