如何使用 Claude AI + draw.io 为项目创建架构图

介绍

在技​​术工程项目中，尤其是在涉及软件系统设计的项目中，专业的图表在简化复杂性和增强沟通方面发挥着至关重要的作用。

在本篇博客中，我将带您了解如何将Claude AI与draw.io结合使用，为复杂的代码库创建简洁、结构清晰且美观的图表。

我们将使用一个稍微复杂的系统进行演示：

✅在线课程注册系统（带管理员 + 付款集成）。

为什么可视化图表对工程师至关重要

• 📈 提高项目文档质量
• 🧠 明确系统架构和工作流程
• 🖼️ 在项目评估、实习和自由职业中给人留下深刻印象
• 🛠️ 节省协作和调试时间

无论是API 设计、微服务、数据库流程还是用户旅程，好的图表都至关重要。

📋 问题陈述

设计在线课程注册系统的后端流程。

主要组成部分：

• 学生浏览可选课程
• 管理员管理课程
• 学生选择课程 → 集成支付网关 → 报名确认
• 管理员可以批准或拒绝课程创建请求。
• 系统应处理支付失败案例

🛤️ 分步指南

步骤 1：编写详细的系统描述

在开始使用工具之前，请先明确您想要可视化的内容。草拟一份系统组件交互方式的逻辑描述。这包括：

• 分析源代码：例如，源代码、伪代码或算法。
• 撰写简短描述：用简单的语言解释逻辑或流程。
• 识别要素：记下应该包含在图表中的组件，例如流程、输入/输出、功能或参与者。

📌提示：这一步可以手动完成，也可以通过总结代码/流程的核心逻辑与人工智能协作完成。

描述示例：

1. 学生浏览可选课程。
2. 学生选择课程→进行支付。
3. 系统连接到支付网关API。
4. 如果付款成功 → 学生入学资格确认。
5. 如果支付失败→显示错误信息并提供重试选项。
6. 管理员负责课程​​的创建、编辑和删除。
7. 管理员可以批准/拒绝新创建的课程条目。

步骤 2：请 Claude 生成 draw.io XML 代码

逻辑结构准备就绪后，使用详细的提示信息，让 Claude AI 生成与 draw.io 兼容的 XML 图表。
与 ChatGPT 相比，Claude AI 更擅长生成更长、更简洁的代码块。

克劳德提示示例：

---

请为在线课程注册系统生成 draw.io 兼容的 XML 代码，用于绘制系统流程图。流程图中应包含
学生、管理员、支付网关等实体，
并清晰地展示成功/失败流程和管理员审批流程。
请按逻辑顺序排列元素，并标注所有边。流程图应美观大方。流程图如下所示：

1. 学生浏览可选课程。
2. 学生选择课程→进行支付。
3. 系统连接到支付网关API。
4. 如果付款成功 → 学生入学资格确认。
5. 如果支付失败→显示错误信息并提供重试选项。
6. 管理员负责课程​​的创建、编辑和删除。
7. 管理员可以批准/拒绝新创建的课程条目。

---

🎯 Claude 返回了一个完整的 XML。

📌提示：即使源代码只有一个文件，您也可以提供完整的源代码。Claude 会自动分析程序流程。

步骤 3：创建并保存.drawio文件

步骤：

• 复制 XML 输出。
• 打开文本编辑器。
• 粘贴XML内容。
• 另存为：📝course_flow.drawio

⚠️保存时请务必选择“所有文件”类型。

步骤 4：导入到 draw.io

有两种方法可以做到这一点：

1. 通过网页应用：

• 请访问https://app.diagrams.net/
• 点击设备 → 打开现有图表。
• 选择您的.drawio文件。

✅ 您的系统图现在应该会自动显示！

2. 通过桌面应用程序：如果您已安装 draw.io 桌面应用程序，只需使用该应用程序打开文件即可。

第五步：手动调整以提升视觉效果

导入的图表通常需要清理才能显得专业：

• 将方框水平和垂直对齐
• 对参与者进行颜色编码（学生、管理员、支付网关）
• 标签边缘（例如，“如果付款失败”、“管理员批准”）
• 使用一致的形状尺寸

🎨设计技巧：

• 对不同类型的实体使用不同的形状（矩形代表流程，菱形代表决策）。
• 坚持使用 2-3 种柔和的颜色（天蓝色、浅绿色、浅灰色）。
• 元素之间要留出足够的间距。
• 添加一个纯色矩形作为背景，以便能够正确导出完整图像（png/jpg 等格式）。

步骤 6：导出最终图表

一旦最终确定：

• 文件 → 导出为 → PNG / PDF
• 启用“包含我的图表副本”进行备份。
• 设置高分辨率以获得更佳画质。

🎯 最终结果

✅已准备好的专业系统图：

• 项目文档
• 演示文稿
• 自由职业者作品集
• 技术博客

⚠️ 关于人工智能局限性的说明

• 代码长度：ChatGPT 生成的 XML 代码长度有限。对于复杂或非常大的图表，请考虑使用 Claude AI 等替代方案，它们可以处理更长的输出。

• 拆分图：对于大型系统，将图表分成较小的部分，并分别生成/导入它们。

• 验证：务必交叉检查逻辑和流程；人工智能可能会引入一些小的不一致之处。

额外提示：接下来该做什么？

• 💬 在 draw.io 图表中添加内部注释
• 🔄 此工作流程适用于ER 图、UML 图、流程图和 API 流程。