架构图

学习使用 Mermaid 生成架构图，用可视化方式呈现系统结构与数据流

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

为什么图示很重要

图示能澄清数据如何流动、组件如何交互。它们在这些场景很有用：

• 想要理解代码库里的流程控制
• 需要从输入到输出追踪数据沿袭/血缘
• 在为他人做上手引导或为系统撰写文档时

它们也非常适合用于调试，并促成更聪明的问题。可视化能帮你（以及模型）看清全局大图。

需要考虑的两个维度

可以从几个不同的角度来思考：

• 目的：你是在描述逻辑、数据流、基础设施，还是别的东西？
• 格式：你想要快速上手的（比如 Mermaid 图），还是更正式的（比如 UML）？

如何编写提示

先明确目标。下面是一些常见的提问方式：

• 流程：“演示一下请求如何从控制器流向数据库。”
• 数据血缘：“从进入到最终落点，追踪这个变量的全程。”
• 结构：“给我这个服务的组件级视图。”

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

使用 Mermaid

Mermaid 上手简单，并且可以直接在 Markdown 中渲染（配合合适的扩展）。Cursor 可以生成这些图表类型：

• flowchart 用于逻辑与流程
• sequenceDiagram 用于交互
• classDiagram 用于对象结构
• graph TD 用于简单的有向图

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

1. 前往 Extensions 选项卡
2. 搜索 Mermaid
3. 安装

图示策略

从小处着手。别试图一次性把所有内容都映射出来。

• 先选一个函数、路由或流程
• 让 Cursor 用 Mermaid 把这部分画出来
• 有了几个之后，再让它把这些合并

这和 C4 模型 的思路一致——从低层级（代码或组件）开始，逐步上升到更高层级的概览。

推荐流程

1. 先做一张详细的低层级图
2. 把它提炼成中层视图
3. 持续重复，直到达到你需要的抽象层级
4. 让 Cursor 把它们合并成一张图或系统地图

关键要点

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