架構圖能幫你掌握系統的運作方式。你可以用它們來梳理邏輯、追蹤資料，並清楚傳達結構。Cursor 支援直接用像 Mermaid 這樣的工具產生這些圖表，所以只要幾個提示就能從程式碼到視覺化。
架構圖範例

​
為什麼圖表很重要

圖表能釐清資料的流向與元件間的互動。它們在這些情境特別有用：
  • 想理解程式碼庫裡的流程控制
  • 需要追蹤資料從輸入到輸出的沿革
  • 在協助他人上手或撰寫系統文件時
它們也很適合用來除錯，或提出更精準的問題。視覺化能幫助你（以及模型）掌握全局。

​
需要考慮的兩個面向

可以從幾個不同方向來想：
  • 目的：你是在描繪邏輯、資料流、基礎設施，還是其他？
  • 格式：你想要快速上手的（像 Mermaid 圖）還是偏正式的（像 UML）？

​
如何撰寫提示

先設定一個明確的目標。以下是一些常見的提問方式：
  • 流程控制：「示範請求如何從 controller 流向資料庫」
  • 資料沿襲：「追蹤這個變數從進入到最後落點」
  • 結構：「給我這個 service 的元件層級視圖」
你可以指定起點與終點，或請 Cursor 找出完整路徑。

​
使用 Mermaid

Mermaid 容易上手，且能直接在 Markdown 中渲染（安裝對應的擴充套件即可）。Cursor 可以生成這些圖表：
  • flowchart：邏輯與流程
  • sequenceDiagram：互動序列
  • classDiagram：物件結構
  • graph TD：簡單的方向圖
你可以安裝 Mermaid 擴充套件來預覽圖表。
  1. 前往 Extensions 分頁
  2. 搜尋 Mermaid
  3. 安裝
安裝 Mermaid 擴充套件

​
圖表策略

從小處著手。別打算一次把所有東西都映射完。
  • 選一個 function、route 或 process
  • 請 Cursor 用 Mermaid 把那一部分畫成圖
  • 有了幾個之後，請它把它們合併
這呼應了 C4 model——從低層級（code 或 components）開始，往上推到更高層級的總覽。
  1. 先從詳細的低層級圖開始
  2. 把它摘要成中層級視圖
  3. 重複進行，直到達到你要的抽象層級
  4. 請 Cursor 把它們合併成單一圖表或系統地圖

​
重點摘要

  • 用圖表理解流程、邏輯與資料
  • 從小型提示開始，逐步擴充你的圖表
  • Mermaid 是在 Cursor 中最好用的格式
  • 先從低層細節開始，再往上抽象，就像 C4 模型一樣
  • Cursor 能輕鬆幫你產生、微調並組合圖表