アーキテクチャ図は、システムの仕組みを把握するのに役立つ。ロジックの検討、データの流れの追跡、構造の共有に使える。Cursor は Mermaid などのツールでこれらの図を直接生成できるから、少ないプロンプトでコードからビジュアルまで一気にいける。
アーキテクチャ図の例

​
図が重要な理由

図はデータフローやコンポーネント間の相互作用を明確にしてくれる。こんなときに役立つよ:
  • コードベースのフロー制御を理解したいとき
  • 入力から出力までのデータリネージを追跡する必要があるとき
  • 他のメンバーのオンボーディングやシステムのドキュメント化をするとき
デバッグや、より的確な質問をするのにも効果的。ビジュアルは、きみ（そしてモデル）が全体像をつかむのに役立つ。

​
検討すべき2つの側面

いくつかの観点から考えよう:
  • 目的: マッピングするのはロジック、データフロー、インフラ、それとも別のもの？
  • 形式: さっと作れるもの（Mermaidのダイアグラムなど）にする？ それともフォーマルなもの（UMLなど）にする？

​
プロンプトの作り方

まずは明確なゴールを決めよう。よくある聞き方はこんな感じ:
  • フロー: 「リクエストがコントローラからデータベースまでどう流れるか見せて」
  • データリネージ: 「この変数がどこで入って最終的にどこに行くか追って」
  • 構造: 「このサービスのコンポーネントレベルのビューを見せて」
開始点と終点を指定してもいいし、Cursorにパス全体を見つけてもらってもOK。

​
Mermaid を使う

Mermaid は覚えやすく、（適切な拡張機能があれば）Markdown 上でそのままレンダリングできる。Cursor は次のようなダイアグラムを生成できる：
  • ロジックや処理の流れには flowchart
  • やり取りには sequenceDiagram
  • オブジェクト構造には classDiagram
  • シンプルな有向グラフには graph TD
ダイアグラムをプレビューするには、Mermaid 拡張機能をインストールしよう。
  1. Extensions タブを開く
  2. Mermaid を検索
  3. インストール
Mermaid 拡張機能のインストール

​
ダイアグラム戦略

小さく始めよう。最初から全部をマッピングしようとしない。
  • 関数・ルート・プロセスのどれかを1つ選ぶ
  • その部分をMermaidで図解するようにCursorに頼む
  • いくつかできたら、まとめて統合してもらう
これはC4モデルと同じ考え方で、低レベル（コードやコンポーネント）から始めて、より高レベルの概観へ段階的に上げていく。
  1. 詳細な低レベルのダイアグラムから始める
  2. それを中レベルのビューに要約する
  3. 望む抽象度に達するまで繰り返す
  4. 最後に、単一のダイアグラムやシステムマップにまとめるようにCursorに頼む

​
重要なポイント

  • フロー、ロジック、データを理解するために図を使う
  • 小さなプロンプトから始めて、そこから図を広げていく
  • Cursor では Mermaid が最も扱いやすいフォーマット
  • C4 モデルと同様に、低レイヤーから始めて上位へ抽象化していく
  • Cursor なら図の生成・ブラッシュアップ・統合までスムーズにできる