架构图

学习如何使用 Mermaid 生成架构图，以可视化系统结构和数据流

架构图有助于你理解系统的工作方式。你可以用它们来梳理逻辑、追踪数据、沟通结构。Cursor 支持直接使用 Mermaid 等工具生成这些图表，让你只需几个提示就能从代码转化为可视化内容。

为什么需要图表

图表能澄清数据流向和组件间的交互。当你有以下需求时，它们非常有用：

• 想要理解代码库中的流程控制
• 需要追踪数据从输入到输出的流转过程
• 正在为他人做入职培训或为系统编写文档

图表同样适用于调试和提出更有针对性的问题。可视化有助于你（以及模型）把握全局。

需要考虑的两个维度

你可以从不同角度思考图表：

• 目的：你是在映射逻辑、数据流、基础设施还是其他内容？
• 格式：你需要快速生成（如 Mermaid 图）还是正式规范（如 UML）？

如何提问

从明确的目标开始。以下是一些常见的提问方式：

• 流程控制：“展示请求如何从 controller 流向数据库。”
• 数据流转：“追踪这个变量从进入到最终去向的全过程。”
• 结构视图：“给我这个服务的组件级视图。”

你可以指定起点和终点，或让 Cursor 查找完整路径。

使用 Mermaid

Mermaid 易于学习，并可直接在 Markdown 中渲染（需安装相应扩展）。Cursor 可以生成如下类型的图表：

• flowchart：用于逻辑和流程序列
• sequenceDiagram：用于交互过程
• classDiagram：用于对象结构
• graph TD：用于简单的方向性关系图

你可以安装 Mermaid 扩展来预览图表：

1. 打开扩展（Extensions）标签页
2. 搜索 Mermaid
3. 安装

绘图策略

从小处着手，不要试图一次性绘制全部内容。

• 选择一个函数、路由或流程
• 让 Cursor 用 Mermaid 为这部分生成图表
• 有了几个小图后，再让它们合并 这种方式类似 C4 模型——从底层（代码或组件）出发，逐步上升到更高层次的概览。

推荐流程

1. 从详细的底层图表开始
2. 将其总结为中层视图
3. 重复，直到达到你想要的抽象层级
4. 让 Cursor 把它们合并为一个完整的系统图

要点总结

• 用图表理解流程、逻辑和数据
• 从小的提示开始，逐步扩展你的图表
• Mermaid 是在 Cursor 中最易用的格式
• 从底层出发，逐步抽象，就像 C4 模型一样
• Cursor 可以帮助你轻松生成、完善和合并图表