[Cursor-Guide]架构图

原始链接: 原始链接

---

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

架构图能帮助您理解系统运作方式。您可以用它们来梳理逻辑、追踪数据并传达结构。Cursor支持直接使用Mermaid等工具生成这些图表，只需几个提示就能从代码转换为可视化图形。

图表的重要性

图表能清晰展示数据流动和组件交互。当您遇到以下情况时特别有用：

• 需要理解代码库中的控制流
• 需要追踪数据从输入到输出的流转路径
• 为新成员培训或编写系统文档

它们也是调试和提出更精准问题的利器。可视化能帮助您（和模型）看清全局。

两个考量维度

可以从以下几个角度思考：

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

如何提问

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

• 控制流："展示请求如何从控制器流转到数据库"
• 数据溯源："追踪这个变量从输入到最终输出的路径"
• 结构："给出这个服务的组件级视图"

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

使用Mermaid

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

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

您可以安装Mermaid扩展来预览图表。

1. 转到扩展选项卡
2. 搜索Mermaid
3. 安装

图表策略

从小处着手。不要试图一次性映射所有内容。

• 选择一个函数、路由或流程
• 让Cursor用Mermaid绘制该部分图表
• 积累几个后，再要求合并它们

这符合C4模型的理念——从底层（代码或组件）开始，逐步构建更高层次的概览。

推荐流程

1. 从详细的底层图表开始
2. 将其概括为中阶视图
3. 重复直到达到所需的抽象层级
4. 让Cursor将它们合并为单个图表或系统地图

关键要点

• 使用图表理解流程、逻辑和数据
• 从小提示开始，逐步扩展图表
• Mermaid是在Cursor中最易用的格式
• 从底层开始向上抽象，如同C4模型
• Cursor能轻松帮助生成、优化和合并图表

系列文章索引

• [Cursor-Guide]上下文应用指南
• [Cursor-Guide]模型选择指南
• [Cursor-Guide]Web开发指南
• [Cursor-Guide]架构图
• [Cursor-Guide]大型代码库管理
• [Cursor-Guide]文档协作指南