Tech

Claude に進捗の図を作らせるなら Mermaid がおすすめな理由

公開
Tech Claude

仕事のタスクが増えてくると、どれが終わっていて、どれが止まっているのかが分かりにくくなります。そこで私は、Claude にタスクの進み具合を色分けした図にしてもらっています。

最初は、色付きの図を HTML（Web ページ）で作ってもらっていました。見た目はきれいなのですが、作るたびに AI の利用量（トークン）を多く使ってしまいます。そこで今は、Mermaid で図を作ってもらっています。

Mermaid とは

Mermaid は、コード（文字）からフローチャートやシーケンス図などの図を作れるツールです。例えば、次のように書きます。

flowchart LR
  A[データの確認] --> B[画面を作る]
  B --> C[絞り込みを作る]
  C --> D[お客様に報告]

  classDef done fill:#9be29b
  classDef doing fill:#ffd966
  classDef todo fill:#dddddd
  class A done
  class B doing
  class C,D todo

緑が「完了」、黄色が「作業中」、灰色が「未着手」です。

裏側ではどう動いているのか

Mermaid は JavaScript で作られたライブラリで、図になるまでにおおまかに次の3つの段階を通ります。

  1. 読み取る：書いた文字をパーサー（文の決まりに沿って読み取るプログラム）が読み、「どんな箱があり、どれとどれが矢印でつながるか」というデータに変えます。
  2. 配置を決める：箱を置く場所と、矢印の通り道を自動で計算します。
  3. 描く：ブラウザで表示できる SVG という形式で図を作ります。

GitHub では、Markdown の中に「“`mermaid」と書いたところが、この仕組みで図に変わります。

つまり Mermaid で持っているのは図そのものではなく、「図の設計図」を文字で書いたものです。この点が、AI と相性の良い理由にもなっています。

Mermaid が良い理由

  • AI が正確に作りやすい Claude は文字を書くのが得意です。絵を直接描かせるより、文字で設計図を書かせるほうが、思ったとおりの図になりやすいと感じています。
  • 書く量が少ない HTML では見た目の指定まで書くので長くなりますが、Mermaid なら数十行で済みます。そのぶんトークンの節約になり、返事も速くなります。
  • 一部だけ直せる 状態が変わったら、色を決めている1行を変えるだけです。
  • 何が変わったかが残る ただの文字なので、Git などで前と後の違いを1行ずつ見られます。画像だと、どこが変わったのかが分かりません。
  • 表示できる場所が多い GitHub、GitLab、Notion、Obsidian などは、書いたものをそのまま図として表示できます。

図が複雑になりそうなとき

箱や矢印が増えて読みにくくなったら、次のようにしています。

  • まとまりで囲む：subgraph で、関係する箱を1つの枠にまとめる
  • 図を分ける：全体の図には大きな段階だけを書き、細かい手順は別の図にする
  • 向きを変える：横に長すぎるときは、LR（左から右）を TB（上から下）にする
  • 名前を短くする：箱には短い名前だけを入れ、説明は図の外に書く

Mermaid で描ける図と、苦手なこと

描ける図には、フローチャートのほかに、シーケンス図（やり取りの順番）、ガントチャート（日程）、状態遷移図、ER図（データのつながり）、円グラフ、マインドマップ、タイムラインなどがあります。

一方で、次のような苦手なこともあります。

  • 表（行と列のマス目）は作れない 表が欲しいときは、Markdown の表を使います。
  • 箱の位置を自分で決めにくい 配置は自動で計算されるので、「この箱をここに置きたい」という細かい指定には向きません。
  • 箱が多いと線が交差して読みにくくなる 上の「図が複雑になりそうなとき」の方法で分けます。
  • 表示する場所によって使える機能が違う 新しい種類の図は、まだ表示できないサービスがあります。WordPress のように対応していない場所では、画像にして貼る必要があります（この記事の図も画像です）。

気をつけていること

  • 図を作り直させない 進み具合が変わったときは「B を完了にして」とだけ頼み、色の行だけを変えてもらいます。毎回ゼロから作らせると、Mermaid でもトークンを使ってしまいます。
  • 進捗の全体の図は1枚にする 全体の図がいくつもあると、どれが最新か分からなくなります。全体の図は1枚だけにして、それを更新しています。
  • 見た目が大事なときは別の方法で作る お客様に見せる資料のように見た目が大事なときは、Mermaid ではなく別の方法で作っています。

おわりに

Mermaid は、図を「文字で書いた設計図」として持つツールです。だから AI に作らせやすく、少しの変更で更新できます。AI は何でも作ってくれますが、作らせ方によって使う量が大きく変わります。「毎回使う図は、軽い形で作らせて、変わったところだけ直してもらう」と決めてから、気軽に進み具合を確かめられるようになりました。