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

​
為什麼圖示很重要

圖示能釐清資料怎麼流動、元件怎麼互動。這些情境特別好用：
  • 想理解程式碼庫裡的流程控制
  • 需要追蹤資料血統，從輸入一路到輸出
  • 要帶新人上手或替系統寫文件
它們也超適合除錯，還能讓你問出更聰明的問題。視覺化能幫你（還有模型）看見全貌。

​
需要考量的兩個面向

可以從幾個不同的角度來思考：
  • 目的：你是在描繪邏輯、資料流程、基礎設施，還是其他？
  • 格式：你想要快速上手的（例如 Mermaid 圖）還是比較正式的（例如 UML）？

​
要怎麼下指令

先訂一個明確的目標。這裡有一些常見的提問方式：
  • 流程： 「告訴我請求是怎麼從 controller 走到資料庫的。」
  • 資料沿革： 「把這個變數從進來到最後落點的整條路徑追出來。」
  • 結構： 「給我這個 service 的元件層級視圖。」
你可以指定起點和終點，或請 Cursor 自動找出完整路徑。

​
使用 Mermaid

Mermaid 容易上手，只要安裝對的擴充功能，就能直接在 Markdown 裡渲染。Cursor 可以產生像這樣的圖表：
  • flowchart：用於邏輯與流程
  • sequenceDiagram：用於互動序列
  • classDiagram：用於物件結構
  • graph TD：用於簡單的有向圖
你可以安裝 Mermaid 擴充功能 來預覽圖表。
  1. 前往「Extensions」分頁
  2. 搜尋「Mermaid」
  3. 點擊安裝
安裝 Mermaid 擴充功能

​
圖表策略

從小處著手。別一開始就想一次把所有都畫完。
  • 選一個函式、路由或流程
  • 請 Cursor 用 Mermaid 把那一部分畫成圖
  • 有了幾個之後，再請它把它們合併
這呼應了 C4 模型——先從低層級（程式碼或元件）開始，然後往上整理成更高層級的總覽。
  1. 先從細節充足的低層級圖開始
  2. 把它摘要成中層視圖
  3. 重複以上步驟，直到達到想要的抽象層級
  4. 請 Cursor 把它們合併成單一圖或系統地圖

​
重點

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