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

​
为什么图示很重要

图示能澄清数据如何流动、组件如何交互。它们在这些场景很有用：
  • 想要理解代码库里的流程控制
  • 需要从输入到输出追踪数据沿袭/血缘
  • 在为他人做上手引导或为系统撰写文档时
它们也非常适合用于调试，并促成更聪明的问题。可视化能帮你（以及模型）看清全局大图。

​
需要考虑的两个维度

可以从几个不同的角度来思考：
  • 目的：你是在描述逻辑、数据流、基础设施，还是别的东西？
  • 格式：你想要快速上手的（比如 Mermaid 图），还是更正式的（比如 UML）？

​
如何编写提示

先明确目标。下面是一些常见的提问方式：
  • 流程：“演示一下请求如何从控制器流向数据库。”
  • 数据血缘：“从进入到最终落点，追踪这个变量的全程。”
  • 结构：“给我这个服务的组件级视图。”
你可以指定起点和终点，或者让 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 把它们合并成一张图或系统地图

​
关键要点

  • 用图示来理解流程、逻辑和数据
  • 先从小型提示入手，再逐步扩展你的图示
  • 在 Cursor 中，Mermaid 是最易用的格式
  • 先从低层级入手，再向上抽象，和 C4 模型的做法一致
  • Cursor 能帮你轻松生成、优化并组合图示