架构图能帮你理解系统如何运作。你可以用它们来梳理逻辑、跟踪数据，并清晰传达结构。Cursor 支持直接用 Mermaid 等工具生成这些图表，只需几条提示就能把代码变成可视化。
架构图示例

​
为什么图示很重要

图示能更清晰地展示数据如何流动、组件如何交互。在这些场景里尤其有用：
  • 想理清代码库里的流程控制
  • 需要追踪数据从输入到输出的来龙去脉
  • 在为他人做上手引导或为系统写文档
它们也很适合用来调试、以及提出更有洞察的问题。可视化能帮你（和模型）看清全局。

​
需要考虑的两个维度

可以从几个不同的角度来想：
  • 目的：是在表达/梳理逻辑、数据流、基础设施，还是别的？
  • 格式：是想要快速上手的（比如 Mermaid 图），还是更正式的（比如 UML）？

​
如何编写提示

先确定一个明确的目标。以下是一些常见的问法：
  • 流程：”告诉我请求是如何从控制器走到数据库的。“
  • 数据沿袭：”从进入到最终落点，追踪这个变量。“
  • 结构：”给我这个服务的组件级视图。“
你可以给出起点和终点，或者让 Cursor 自己找出完整路径。

​
使用 Mermaid

Mermaid 上手简单，并且可以直接在 Markdown 中渲染（需要合适的扩展）。Cursor 可以生成如下图表：
  • flowchart：逻辑流程和顺序
  • sequenceDiagram：交互时序
  • classDiagram：对象结构
  • graph TD：简单的有向图
你可以安装 Mermaid 扩展 来预览图表。
  1. 打开 Extensions 选项卡
  2. 搜索 Mermaid
  3. 点击安装
Installing Mermaid extension

​
图表策略

从小处着手。别试图一次性把一切都映射出来。
  • 先选一个函数、路由或流程
  • 让 Cursor 用 Mermaid 为这部分出图
  • 有了几个之后，再让它把它们合并
这和 C4 模型 的做法一致——从低层级（代码或组件）起步，逐步上升到更高层级的概览。
  1. 先从一个细致的低层级图表开始
  2. 把它提炼成一个中层视图
  3. 重复，直到达到你想要的抽象层级
  4. 让 Cursor 把它们合并成一张图或系统示意图

​
关键要点

  • 用图示来理解流程、逻辑和数据
  • 从小提示起步，再逐步扩展你的图表
  • 在 Cursor 里，Mermaid 是最好用的格式
  • 先从底层细节开始，再向上抽象，就像 C4 模型那样
  • Cursor 能轻松帮你生成、打磨、并组合图表