ローカルMermaidで構造化スキルのススメ

情報伝達手段の歴史をさかのぼると、太古から存在する文字と比較的最近あらわれた動画。比較した場合には、感情に訴えたり、深く理解を進める場合には映像そのものに桁違いに情報量が多いため、動画が適する部分があるが、事務/端的に伝えるには文字が優れる。

このことは職場やビジネスシーンで考えるとわかりやすい。ものごとを伝えるのに文字を一切使わず、すべてが映像のみの動画であるならば、大変な時間やコストがかかる。対して、上手に構造化されていれる文書は、情報を少なくし、手軽にスピーディーに伝えられる利点がある。余分な情報をそぎ落とし、受け手に余分な時間を消費させない。マークアップ文書の構造化をさらに手助けするのが図の存在だ。
○マークアップで図を作るMermaid

前回、纏まりや表を文字から表現するMarkdownを紹介したが同様のコンセプトで図を表現するのがMermaidだ。JavaScriptベースの図表作成ツールはOSS(GitHub)で開発されているJavaScriptライブラリーでSaaSやコマンドライン、対応するIDEなどで扱うこともできるし、対応するテキストエディタで表示可能だ。

Mermaidでは、

```mermaid

```

のなかにダイアグラム図を記述するキーワードを入力して構造を示すことができる。

flowchart TD
A 矢印 B

で表示されるのは、AからBへと矢印線でつながるシンプルなフローチャート図(graph)でTD(Top Down)で上から下への矢印を描く。

Aという構造とBという構造の関係を示すことが可能だ。方向性の記法は、ほかに下から上のBT(Bottom Top)と左から右へのLR(Left to Right)、右から左へのRL(Right to Left)がある。矢印も太線矢印(==>)や線(---)太線(===)など変えられる。

```mermaid
flowchart LR
ToDo ==>釣り===ツーリング
ToDo ==>筋トレ===トレイル
```

複雑になってくるが、分岐や複数の図をつかった本格的なものからガントチャートを扱うganttやステップを感情をグラフで整理するjourneyのようなツールがデフォルトで大量に備わる。

```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 開発フェーズ
要件定義 :a1, 2025-03-01, 10d
設計 :after a1, 15d
section テストフェーズ
テスト実施 :2025-04-01, 10d
```

```mermaid
journey
title ユーザージャーニーの例
section 準備
検索する: 6: ユーザー
訪問する: 2: ユーザー
section 購入
商品を選択: 5: ユーザー
決済する: 1: ユーザー
```

.