[Cursor-Guide]アーキテクチャ図

オリジナルリンク: オリジナルリンク

---

Mermaidを使用してシステム構造とデータフローを可視化するアーキテクチャ図の生成方法を学びましょう

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

ダイアグラムの重要性

ダイアグラムは、データの流れやコンポーネント間の相互作用を明確にします。以下のような場合に有用です:

• コードベースのフロー制御を理解したい場合
• 入力から出力までのデータの流れを追跡する必要がある場合
• 他のメンバーをオンボーディングしたり、システムをドキュメント化する場合

また、デバッグやよりスマートな質問をするのにも最適です。視覚化はあなた（およびモデル）が全体像を把握するのに役立ちます。

考慮すべき2つの次元

考えるべきいくつかの異なる角度があります:

• 目的 : ロジック、データフロー、インフラストラクチャ、または他の何かをマッピングしていますか？
• フォーマット : Mermaidダイアグラムのような簡易なものか、UMLのような正式なものが欲しいですか？

プロンプトの方法

明確な目標から始めましょう。以下は一般的な質問方法です:

• フロー制御 : 「コントローラーからデータベースへのリクエストの流れを示してください。」
• データの流れ : 「この変数が入力されてから最終的にどこに行き着くかを追跡してください。」
• 構造 : 「このサービスのコンポーネントレベルのビューを提供してください。」

開始点と終了点を含めるか、Cursorに完全なパスを見つけるように依頼できます。

Mermaidの使用

Mermaidは学びやすく、適切な拡張機能があればMarkdownで直接レンダリングできます。Cursorは以下のようなダイアグラムを生成できます:

• ロジックとシーケンスのための flowchart
• 相互作用のための sequenceDiagram
• オブジェクト構造のための classDiagram
• 単純な方向性のあるマップのための graph TD

ダイアグラムをプレビューするにはMermaid拡張機能をインストールできます。

1. 拡張機能タブに移動
2. Mermaidを検索
3. インストール

ダイアグラム戦略

小さく始めましょう。一度にすべてをマッピングしようとしないでください。

• 1つの関数、ルート、またはプロセスを選択
• CursorにMermaidを使用してその部分をダイアグラム化するように依頼
• いくつかできたら、それらを結合するように依頼

これはC4モデルに似ています – 低レベル（コードやコンポーネント）から始め、より高レベルの概要に向かって作業を進めます。

推奨フロー

1. 詳細な低レベルのダイアグラムから始める
2. それを中レベルのビューに要約
3. 必要な抽象化レベルに達するまで繰り返す
4. Cursorにそれらを単一のダイアグラムまたはシステムマップに結合するように依頼

要点

• フロー、ロジック、データを理解するためにダイアグラムを使用
• 小さなプロンプトから始め、そこからダイアグラムを成長させる
• MermaidはCursorで作業する最も簡単なフォーマット
• C4モデルと同様に、低レベルから始めて抽象化を進める
• Cursorはダイアグラムの生成、改良、結合を簡単に支援できます

シリーズ記事インデックス

• [Cursor-Guide]コンテキストの操作
• [Cursor-Guide]モデルの選択
• [Cursor-Guide]ウェブ開発
• [Cursor-Guide]アーキテクチャ図
• [Cursor-Guide]大規模コードベース
• [Cursor-Guide]ドキュメンテーションの活用方法