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

​
図が大事な理由

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

​
検討すべき2つの観点

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

​
プロンプトの作り方

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

​
Mermaid を使う

Mermaid は習得しやすく、（対応する拡張機能があれば）Markdown 内でそのままレンダリングできる。Cursor は次のようなダイアグラムを生成できる:
  • ロジックやフローには flowchart
  • やり取りには sequenceDiagram
  • オブジェクト構造には classDiagram
  • シンプルな有向グラフには graph TD
ダイアグラムをプレビューするには Mermaid extension をインストールしよう。
  1. Extensions タブへ移動
  2. Mermaid を検索
  3. インストール
Mermaid 拡張機能のインストール

​
図解の戦略

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

​
まとめ

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