企业官网建设流程全解析

drawio-skill 快速指南：从自然语言到可编辑架构图的三步路径

【免费下载链接】drawio-skillAgent skill that turns natural language, code, Terraform/K8s, SQL, OpenAPI, AsyncAPI, Protobuf and GraphQL sources into editable, tested draw.io architecture diagrams: incremental sync, multi-view projection, drift diff, CI architecture tests, whiteboard derasterize, interactive HTML/PPTX/Mermaid exports.项目地址: https://gitcode.com/gh_mirrors/dr/drawio-skill

写技术文档或准备架构评审时，手绘架构图常常最耗时：摆形状、连线、对齐文字，一下午就没了。drawio-skill 让 AI 智能体直接用自然语言生成可编辑的.drawio图表，自动检查布局，并支持导出 PNG/SVG/PDF/JPG。

⚙️ 操作实录：一句话需求到成图

把一句需求发给装好它的智能体：

画一个微服务电商架构图：Mobile/Web/Admin 客户端，API Gateway， Auth/User/Order/Product/Payment 微服务，Kafka 消息队列，Notification 服务， 以及各自独立的数据库

它会先规划布局，写出图表 XML，导出 PNG，再对结果做最多两轮自检，自动修复形状重叠、文字截断、连线堆叠；不满意还可以继续给最多 5 轮反馈。确认无误后，再指定 PNG、SVG、PDF、JPG 任一种格式导出即可。

按场景拆解能力

画系统架构

不限于口头描述：Terraform、Kubernetes、docker-compose 配置可以直接出架构图，使用 AWS/Azure/GCP/K8s 官方图标；SQL DDL 变成 ER 图，OpenAPI 文档变成按 HTTP 方法着色的 API 图；Python/JS/Go/Rust 代码库的依赖图也开箱即用，另有 11 种预置图型（ERD、UML、时序、C4、BPMN、泳道等）覆盖架构评审与文档场景。

表达流程与流水线

流程图用有语义的形状——平行四边形表示输入输出、菱形表示判断，业务流程在评审会上好讲。环形拓扑适合 CI/CD 流水线这类闭环，连线沿外围绕行，不穿过节点形状。

统一团队图表风格

多人维护图表时风格漂移是常见问题。你可以按次指定预设，也可以从一份现成的.drawio文件或截图学习出一个命名的样式并设为默认，之后的图都会沿用同一套配色和字体。

🎨 样式预设与默认设置

两条短指令即可：

画一个微服务架构图，使用 "corporate" 样式 把 "corporate" 设为我的默认样式

📦 部署与依赖

前置条件是 draw.io 桌面应用及其 CLI（建议 ≥30，解锁 Mermaid →.drawio转换与 ELK 自动布局）：

# macOS brew install --cask drawio

Windows 与 Linux 可从 draw.io 官方发布页下载安装器或.deb/.rpm包。随后获取 skill：

git clone https://gitcode.com/gh_mirrors/dr/drawio-skill

详细用法、语义工作流（增量同步、多视图投影、漂移对比）与提示词示例见 docs/USAGE_CN.md。

drawio-skill 把"口述 → 出图 → 交付"压进一次对话，产出物仍可在 draw.io 里继续编辑；遇到渲染或环境问题，先看 skills/drawio-skill/references/troubleshooting.md。

【免费下载链接】drawio-skillAgent skill that turns natural language, code, Terraform/K8s, SQL, OpenAPI, AsyncAPI, Protobuf and GraphQL sources into editable, tested draw.io architecture diagrams: incremental sync, multi-view projection, drift diff, CI architecture tests, whiteboard derasterize, interactive HTML/PPTX/Mermaid exports.项目地址: https://gitcode.com/gh_mirrors/dr/drawio-skill