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

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

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

マークアップで図を作るMermaid

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

Mermaidでは、

```mermaid

```

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

flowchart TD
A 矢印 B

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

flowchartで描くMermaid

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

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

LR(Left to Right)で複数矢印

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

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

ガントチャートもテキストで行えるgantt

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

数により感情表現を示すjourney

秀丸でMarkDown＆Mermaid

公式サイトではオンラインで試せるがやはり手元で使いたい。秀丸エディターの場合、ブラウザ機能を使ってマークダウンやMermaidを表示できるマクロHmMarkdownSimpleServerが「秀丸マクロ.net」で公開されているので、これを試す。Webに記載されている手順に沿って、ZIPファイルのブロック解除を行い、自身のマクロフォルダに配置。ショートカットキーにはShift＋Ctrl＋Mを割り当てる。

試したいMarkDown＆Mermaidを記述、ファイルをtest.mdで保存する。秀丸に割り付けたShift＋Ctrl＋Mを押すと秀丸のブラウザ機能を使ったHmMarkdownSimpleServerで即座にプレビューできる。やはり手元のエディターで軽快に使うのがスキル向上には良さそうだ。