跳到主要内容

架构图(Architectural Diagrams)

架构图能帮助您更好地理解系统的工作原理。您可以用它们来梳理逻辑、追踪数据并沟通结构。Cursor 支持直接使用 Mermaid 等工具生成这些图表，只需几个提示词就能将代码转化为可视化图表。

架构图示例

图表的重要性​

图表能够清晰地展现数据如何流动以及各组件之间如何交互。在以下场景中尤其有用：

  • 需要理解代码库中的流程控制
  • 需要追踪从输入到输出的数据关系
  • 进行新人培训或系统文档编写

它们也是调试和提出更智能问题的利器。可视化图表能帮助您（以及 AI 模型）更全面地把握整体架构。

需要考虑的两个维度​

可以从以下几个角度进行分析：

  • 目的：您是在梳理逻辑、数据流、基础设施，还是其他内容？
  • 格式：需要快速草图（如 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 可以帮助你轻松生成、完善和组合图表