メインコンテンツへスキップアーキテクチャ図は、システムの仕組みを把握するのに役立つ。ロジックの検討、データの流れの追跡、構造の共有に使える。Cursor は Mermaid などのツールでこれらの図を直接生成できるから、少ないプロンプトでコードからビジュアルまで一気にいける。
図はデータフローやコンポーネント間の相互作用を明確にしてくれる。こんなときに役立つよ:
- コードベースのフロー制御を理解したいとき
- 入力から出力までのデータリネージを追跡する必要があるとき
- 他のメンバーのオンボーディングやシステムのドキュメント化をするとき
デバッグや、より的確な質問をするのにも効果的。ビジュアルは、きみ（そしてモデル）が全体像をつかむのに役立つ。
いくつかの観点から考えよう:
- 目的: マッピングするのはロジック、データフロー、インフラ、それとも別のもの？
- 形式: さっと作れるもの（Mermaidのダイアグラムなど）にする？ それともフォーマルなもの（UMLなど）にする？
まずは明確なゴールを決めよう。よくある聞き方はこんな感じ:
- フロー: 「リクエストがコントローラからデータベースまでどう流れるか見せて」
- データリネージ: 「この変数がどこで入って最終的にどこに行くか追って」
- 構造: 「このサービスのコンポーネントレベルのビューを見せて」
開始点と終点を指定してもいいし、Cursorにパス全体を見つけてもらってもOK。
Mermaid は覚えやすく、（適切な拡張機能があれば）Markdown 上でそのままレンダリングできる。Cursor は次のようなダイアグラムを生成できる：
- ロジックや処理の流れには
flowchart
- やり取りには
sequenceDiagram
- オブジェクト構造には
classDiagram
- シンプルな有向グラフには
graph TD
ダイアグラムをプレビューするには、Mermaid 拡張機能をインストールしよう。
- Extensions タブを開く
- Mermaid を検索
- インストール
小さく始めよう。最初から全部をマッピングしようとしない。
- 関数・ルート・プロセスのどれかを1つ選ぶ
- その部分をMermaidで図解するようにCursorに頼む
- いくつかできたら、まとめて統合してもらう
これはC4モデルと同じ考え方で、低レベル（コードやコンポーネント）から始めて、より高レベルの概観へ段階的に上げていく。
- 詳細な低レベルのダイアグラムから始める
- それを中レベルのビューに要約する
- 望む抽象度に達するまで繰り返す
- 最後に、単一のダイアグラムやシステムマップにまとめるようにCursorに頼む
- フロー、ロジック、データを理解するために図を使う
- 小さなプロンプトから始めて、そこから図を広げていく
- Cursor では Mermaid が最も扱いやすいフォーマット
- C4 モデルと同様に、低レイヤーから始めて上位へ抽象化していく
- Cursor なら図の生成・ブラッシュアップ・統合までスムーズにできる
