アーキテクチャ図

Mermaid を使ってシステムの構造とデータフローを可視化するアーキテクチャ図の作り方を学ぼう

アーキテクチャ図は、システムがどう動くかを理解するのに役立つ。ロジックの整理、データの追跡、構造の共有に使えるよ。Cursor は Mermaid などのツールでこれらの図を直接生成できるから、数回のプロンプトでコードからビジュアルまで一気にいける。

図が大事な理由

図はデータの流れやコンポーネント間の相互作用をはっきりさせてくれる。こんなときに役立つよ:

• コードベースのフロー制御を理解したいとき
• 入力から出力までのデータリネージを追跡する必要があるとき
• メンバーのオンボーディングやシステムのドキュメント化をするとき

デバッグにも、より質の高い質問をするのにも効果的。ビジュアルがあると、きみ（とモデル）が全体像をつかみやすくなる。

検討すべき2つの観点

いくつかの角度から考えられるよ：

• 目的: ロジック、データフロー、インフラ、それとも別の何かをマッピングする？
• 形式: 手早く作る（Mermaidのダイアグラムのような）か、きっちりした形式（UMLのような）にする？

プロンプトの作り方

まずは明確なゴールから始めよう。よくある聞き方はこんな感じ:

• フロー: “リクエストがコントローラからデータベースまでどう流れるか見せて。”
• データリネージ: “この変数がどこで入って最終的にどこに至るかトレースして。”
• 構造: “このサービスをコンポーネント単位で見せて。”

開始点と終了点を指定してもいいし、Cursor に経路全体を見つけてもらってもいいよ。

Mermaid を使う

Mermaid は習得しやすく、（対応する拡張機能があれば）Markdown 内でそのままレンダリングできる。Cursor は次のようなダイアグラムを生成できる:

• ロジックやフローには flowchart
• やり取りには sequenceDiagram
• オブジェクト構造には classDiagram
• シンプルな有向グラフには graph TD

ダイアグラムをプレビューするには Mermaid extension をインストールしよう。

1. Extensions タブへ移動
2. Mermaid を検索
3. インストール

図解の戦略

小さく始めよう。最初から全部をマップしようとしないで。

• 1つの関数、ルート、またはプロセスを選ぶ
• その部分をMermaidで図解するようにCursorに頼む
• いくつか作れたら、まとめて統合するように頼む

これはC4モデルに沿ったやり方。低レベル（コードやコンポーネント）から始めて、より高レベルの概観へ積み上げていく。

推奨フロー

1. 詳細な低レベルの図から始める
2. それを中レベルのビューに要約する
3. 望む抽象度に達するまで繰り返す
4. Cursorに単一の図やシステムマップへマージするように頼む

まとめ

• フロー、ロジック、データを理解するには図を使おう
• 小さなプロンプトから始めて、そこから図を育てていく
• Mermaid は Cursor で扱いやすい最適なフォーマット
• C4 モデルと同様に、低レベルから始めて上位へ抽象化していく
• Cursor は図の生成・洗練・統合をスムーズに手伝ってくれる