架构图帮助您理解系统的工作原理。您可以使用它们来探索逻辑、跟踪数据和传达结构。Cursor 支持直接使用 Mermaid 等工具生成这些图表，因此您只需几个提示就能从代码转换为可视化图表。
架构图示例

​
为什么图表很重要

图表能够清晰地展示数据流向和组件交互方式。在以下情况下它们非常有用：
  • 想要理解代码库中的流程控制
  • 需要追踪从输入到输出的数据血缘关系
  • 正在为他人提供入门指导或记录系统文档
它们对于调试和提出更明智的问题也很有帮助。可视化能够帮助你（和模型）看到更大的全局。

​
需要考虑的两个维度

有几个不同的角度需要思考：
  • 目的：你是在映射逻辑、数据流、基础设施，还是其他内容？
  • 格式：你想要快速的东西（如 Mermaid 图表）还是正式的（如 UML）？

​
如何提示

从一个明确的目标开始。以下是一些常见的询问方式：
  • 流程控制：“向我展示请求如何从控制器流向数据库。”
  • 数据血缘：“追踪这个变量从进入到结束的整个过程。”
  • 结构：“给我一个这个服务的组件级视图。”
你可以包含起点和终点，或者让 Cursor 找到完整的路径。

​
使用 Mermaid

Mermaid 简单易学，可以直接在 Markdown 中渲染（需要合适的扩展）。Cursor 可以生成如下类型的图表：
  • flowchart 用于逻辑和序列
  • sequenceDiagram 用于交互
  • classDiagram 用于对象结构
  • graph TD 用于简单的方向图
您可以安装 Mermaid 扩展 来预览图表。
  1. 转到扩展选项卡
  2. 搜索 Mermaid
  3. 安装
安装 Mermaid 扩展

​
图表策略

从小处开始。不要试图一次性映射所有内容。
  • 选择一个函数、路由或流程
  • 让 Cursor 使用 Mermaid 为该部分创建图表
  • 一旦你有了几个图表，让它将它们组合起来
这反映了 C4 模型 —— 你从低层级（代码或组件）开始，然后向上构建到更高层级的概览。

​
推荐流程

  1. 从详细的低层级图表开始
  2. 将其总结为中层级视图
  3. 重复此过程，直到达到你想要的抽象层级
  4. 让 Cursor 将它们合并为单个图表或系统映射

​
要点总结

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