架構圖表幫助您理解系統的運作方式。您可以使用它們來探索邏輯、追蹤資料流，以及溝通結構。Cursor 支援直接使用 Mermaid 等工具生成這些圖表，因此您只需幾個提示就能從程式碼轉換為視覺化呈現。
架構圖表範例

​
為什麼圖表很重要

圖表能夠清楚說明資料如何流動以及元件如何互動。在以下情況下它們特別有用：
  • 想要理解程式碼庫中的流程控制
  • 需要追蹤從輸入到輸出的資料血緣關係
  • 正在協助他人上手或記錄您的系統
它們對於除錯和提出更聰明的問題也很有幫助。視覺化能幫助您（和模型）看到更大的全貌。

​
需要考慮的兩個維度

有幾個不同的角度需要思考：
  • 目的：您是要映射邏輯、資料流、基礎架構，還是其他內容？
  • 格式：您想要快速的東西（如 Mermaid 圖表）還是正式的（如 UML）？

​
如何提示

從明確的目標開始。以下是一些常見的詢問方式：
  • 流程控制：“向我展示請求如何從控制器流向資料庫。”
  • 資料血緣：“追蹤這個變數從進入到結束的完整路徑。”
  • 結構：“給我這個服務的元件層級視圖。”
您可以包含起始點和結束點，或要求 Cursor 找出完整路徑。

​
使用 Mermaid

Mermaid 簡單易學，可以直接在 Markdown 中渲染（需要適當的擴充功能）。Cursor 可以生成以下類型的圖表：
  • flowchart 用於邏輯和序列
  • sequenceDiagram 用於互動
  • classDiagram 用於物件結構
  • graph TD 用於簡單的方向圖
您可以安裝 Mermaid 擴充功能 來預覽圖表。
  1. 前往擴充功能分頁
  2. 搜尋 Mermaid
  3. 安裝
安裝 Mermaid 擴充功能

​
圖表策略

從小處開始。不要試圖一次性映射所有內容。
  • 選擇一個函數、路由或流程
  • 請 Cursor 使用 Mermaid 為該部分繪製圖表
  • 一旦你有了幾個圖表，請它將它們組合起來
這反映了 C4 模型 – 你從低層級（程式碼或組件）開始，然後向上發展到更高層級的概覽。

​
建議的流程

  1. 從詳細的低層級圖表開始
  2. 將其總結為中層級視圖
  3. 重複直到達到你想要的抽象層級
  4. 請 Cursor 將它們合併為單一圖表或系統地圖

​
重點整理

  • 使用圖表來理解流程、邏輯和資料
  • 從小型提示開始，然後逐步擴展您的圖表
  • Mermaid 是在 Cursor 中最容易使用的格式
  • 從低層級開始，然後向上抽象，就像在 C4 模型中一樣
  • Cursor 可以幫助您輕鬆生成、優化和組合圖表