架构图 ¶

架构图是一种强大的工具，可以帮助您梳理系统逻辑、追踪数据流向，并与团队成员或利益相关者沟通系统的整体结构。Cursor 提供了直接生成这些图表的功能，特别是通过 Mermaid 工具，让您可以轻松地将代码转化为直观的可视化内容。

为什么架构图很重要 ¶

架构图能够以直观的方式展示数据如何流动以及组件之间如何交互。根据官方文档，它们在以下场景中特别有用：

• 理解代码库中的流程控制：帮助您弄清楚请求、数据或逻辑在系统中的流转路径。
• 追踪数据沿袭：从输入到输出，清晰地了解数据的来源、处理过程和最终去向。
• 团队协作与文档记录：对于新成员入职或系统文档编写，图表是快速传达系统结构的最佳方式。
• 调试与问题分析：通过可视化系统，架构图可以帮助您和模型（如 Cursor 的 AI 助手）看到更全面的画面，从而提出更精准的问题或发现隐藏的 bug。

简而言之，架构图不仅是技术文档的一部分，更是开发、调试和沟通的得力助手。

需要考虑的两个维度 ¶

在创建架构图之前，您需要明确以下两个关键维度：

1. 目的（Purpose）：您希望图表展示什么内容？是逻辑流程、数据流、基础设施布局，还是其他方面的内容？
2. 格式（Format）：您需要一个快速生成的简易图表（如 Mermaid 图），还是一个更正式的标准图（如 UML）？

明确这两个维度将帮助您更好地与 Cursor 交互，并生成符合需求的图表。

如何向 Cursor 提出请求（Prompting 技巧） ¶

在请求 Cursor 生成架构图时，清晰的目标至关重要。官方文档提供了一些常见提问方式，适用于不同的目的：

• 流程控制（Flow Control）：例如，“请展示请求如何从控制器传送到数据库。”这种提问适用于理解系统中的逻辑路径。
• 数据沿袭（Data Lineage）：例如，“追踪这个变量从输入到输出的完整路径。”这有助于了解数据在系统中的生命周期。
• 结构视图（Structure）：例如，“给我这个服务的组件级视图。”这种方式适合获取系统模块或服务的整体架构。

在提问时，您可以指定起点和终点，也可以让 Cursor 自动为您找到完整路径。清晰的指令会让生成的图表更加贴合您的需求。

使用 Mermaid 绘制图表 ¶

Mermaid 是一种轻量级的图表绘制语言，非常适合在 Markdown 中直接渲染（需要安装相应的扩展）。Cursor 支持使用 Mermaid 生成多种类型的图表，包括但不限于以下几种：

• flowchart：用于展示逻辑流程和序列。
• sequenceDiagram：用于描述系统组件或角色之间的交互。
• classDiagram：用于展示对象的结构和类关系。
• graph TD：用于简单的有向图映射。

安装 Mermaid 扩展 ¶

为了在 Cursor 中预览 Mermaid 图表，官方文档建议安装 Mermaid 扩展。步骤如下：

1. 打开 Cursor 的“Extensions（扩展）”选项卡。
2. 搜索“Mermaid”。
3. 安装名为“Markdown Mermaid”的扩展（链接：Mermaid extension）。

安装完成后，您可以在 Markdown 文件中直接查看 Mermaid 图表的渲染效果。

Mermaid 的优势 ¶

Mermaid 的语法简单易学，且与 Cursor 的集成非常顺畅。通过几行代码，您就可以生成复杂的流程图或结构图，而无需借助外部工具。

绘制架构图的策略 ¶

官方文档建议采用循序渐进的策略绘制架构图，不要一开始就试图映射整个系统。以下是具体步骤：

1. 从小处着手：选择一个具体的功能、路由或流程作为起点。例如，专注于某个 API 接口的数据处理流程。
2. 请求 Cursor 使用 Mermaid 生成图表：针对选定部分，让 Cursor 生成一个简单的 Mermaid 图表。
3. 逐步组合：当您有了多个小的图表后，可以请求 Cursor 将它们合并为一个更大的图表，逐步扩展到整个系统。

参考 C4 模型 ¶

这种方法与 C4 模型 一致。C4 模型是一种架构描述方法，建议从代码或组件的低层次开始，逐步抽象到更高的层次（如系统上下文）。具体流程如下：

1. 从详细的低层次图表开始：专注于具体功能或模块的实现细节。
2. 总结为中层次视图：提取关键信息，形成更高层次的概括视图。
3. 重复抽象：继续向上抽象，直到达到您所需的层次。
4. 合并为完整图表：最后，请求 Cursor 将所有图表合并为一个完整的系统地图或单个综合图表。

这种分层方法可以帮助您避免一开始就陷入复杂的系统全貌中，从而更好地理解和管理架构图。

推荐的工作流程 ¶

基于官方文档，以下是推荐的工作流程，旨在帮助您高效地创建和管理架构图：

1. 从低层次详细图表开始：选择一个小的、具体的系统部分进行可视化。
2. 总结为中层次视图：将详细图表提炼为更简洁的中层视图，突出关键组件和流转。
3. 逐层抽象：根据需要，逐步上升到更高层次的抽象视图，直至达到目标视角。
4. 合并图表：让 Cursor 将多个层次的图表整合为一个完整的系统图或分层视图。

通过这种方式，您可以确保图表的清晰性和逻辑性，同时避免信息过载。

核心收获（Takeaways） ¶

• 用图表来理解流程、逻辑和数据：架构图是梳理复杂系统的有效工具，适用于开发、调试和文档记录。
• 从小的请求开始，逐步扩展图表：避免一开始就试图绘制整个系统，从小模块入手，逐步构建。
• Mermaid 是 Cursor 中最易用的格式：其简单的语法和直接渲染能力使其成为首选工具。
• 从低层次开始，向上抽象：遵循 C4 模型，从代码级别的细节逐步上升到系统级别的概览。
• Cursor 能帮助生成、优化和合并图表：通过与 Cursor 的交互，您可以轻松完成从简单到复杂的图表绘制过程。

总结 ¶

架构图是理解和沟通系统设计的重要工具，而 Cursor 提供了一个便捷的平台来生成和管理这些图表。通过明确目标、使用 Mermaid 工具、遵循分层绘制策略，您可以在 Cursor 中快速创建清晰且实用的架构图。无论是用于个人学习、团队协作，还是系统文档记录，Cursor 的架构图功能都能为您提供强有力的支持。