アーキテクチャ図は、システムがどのように動作するかを理解するのに役立ちます。これらを使用してロジックを探索し、データを追跡し、構造を伝達することができます。CursorはMermaidなどのツールを使用してこれらの図を直接生成することをサポートしているため、わずか数回のプロンプトでコードから視覚的な表現に変換できます。
アーキテクチャ図の例

​
図表が重要な理由

図表は、データの流れやコンポーネントの相互作用を明確にします。以下のような場合に有用です：
  • コードベースのフロー制御を理解したい場合
  • 入力から出力までのデータ系譜を追跡する必要がある場合
  • 他の人をオンボーディングしたり、システムを文書化したりする場合
また、デバッグやより賢い質問をするのにも最適です。視覚的な表現により、あなた（そしてモデル）が全体像を把握できるようになります。

​
考慮すべき2つの次元

考慮すべきいくつかの異なる角度があります：
  • 目的: ロジック、データフロー、インフラストラクチャ、またはその他のものをマッピングしていますか？
  • 形式: 迅速なもの（Mermaidダイアグラムなど）または正式なもの（UMLなど）が必要ですか？

​
プロンプトの方法

明確な目標から始めましょう。以下は一般的な質問の仕方です：
  • フロー制御: “リクエストがコントローラーからデータベースまでどのように流れるかを教えてください。”
  • データ系譜: “この変数が入力される場所から最終的に到達する場所まで追跡してください。”
  • 構造: “このサービスのコンポーネントレベルのビューを教えてください。”
開始点と終了点を含めることも、Cursorに完全なパスを見つけてもらうこともできます。

​
Mermaidの使用

Mermaidは学習が簡単で、Markdown内で直接レンダリングされます（適切な拡張機能があれば）。Cursorは以下のような図を生成できます：
  • ロジックとシーケンス用のflowchart
  • インタラクション用のsequenceDiagram
  • オブジェクト構造用のclassDiagram
  • シンプルな方向性マップ用のgraph TD
図をプレビューするにはMermaid拡張機能をインストールできます。
  1. 拡張機能タブに移動
  2. Mermaidを検索
  3. インストール
Mermaid拡張機能のインストール

​
図表戦略

小さく始めましょう。一度にすべてをマッピングしようとしないでください。
  • 1つの関数、ルート、またはプロセスを選択する
  • Cursorにその部分をMermaidを使って図表化してもらう
  • いくつか作成したら、それらを組み合わせてもらう
これはC4モデルを反映しています。低レベル（コードやコンポーネント）から始めて、より高レベルの概要に向かって作業を進めます。

​
推奨フロー

  1. 詳細な低レベル図表から始める
  2. それを中レベルビューに要約する
  3. 望む抽象化レベルに達するまで繰り返す
  4. Cursorにそれらを単一の図表またはシステムマップに統合してもらう

​
要点

  • フロー、ロジック、データを理解するために図を使用する
  • 小さなプロンプトから始めて、そこから図を発展させる
  • MermaidはCursorで作業する際に最も使いやすい形式である
  • C4モデルと同様に、低レベルから始めて上位に抽象化する
  • Cursorは図の生成、改良、組み合わせを簡単に支援できる