AI驱动Draw.io图表生成工具：自动创建可编辑架构图、流程图、泳道图

drawio-diagram-forge by aktsmm/agent-skills

75 周安装量

10 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aktsmm/agent-skills --skill drawio-diagram-forge

AI/机器学习图表工具 VSCode

🇨🇳中文介绍

Draw.io 图表锻造

使用 AI 驱动的工作流程生成 可编辑的 draw.io 图表。

使用场景

创建架构图（Azure, AWS）
将文本描述转换为流程图
将图像/截图转换为可编辑格式
生成泳道图、序列图

先决条件

工具	是否必需
VS Code	是
Draw.io Integration	是
GitHub Copilot	是

快速开始

创建登录流程图表

生成 Azure 中心辐射型架构图

根据 inputs/requirements.md 创建系统图表

输出格式

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

分数	操作
90-100	继续
70-84	修复并重试
50-69	简化
0-29	询问用户

限制项	值
清单修订次数	2
SVG 修订次数	2
总超时时间	45 分钟

在 VS Code 中启用

打开 .drawio 文件
点击 "+ More Shapes"（左下角）
启用：Azure, AWS
应用

Azure 格式（关键）

<!-- 错误 -->
<mxCell style="shape=mxgraph.azure.front_door;..." />

<!-- 正确 -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />

文件	描述
mxcell-structure.md	mxCell XML 结构
cloud-icons.md	Azure/AWS 图标指南
style-guide.md	节点颜色、边样式

脚本	描述
`scripts/validate_drawio.py`	验证 mxCell 结构

问题	解决方案
在 draw.io 中显示空白	检查 `content` 属性
边不可见	验证节点 ID
图标缺失	启用 Azure/AWS 形状

生成了 .drawio 或 .drawio.svg 文件
图表在 VS Code Draw.io 扩展中正确打开
所有节点和边均可见
质量门控分数 ≥ 85

2026 年 1 月 23 日

🇺🇸English

Draw.io Diagram Forge

Generate draw.io editable diagrams using AI-powered workflow.

When to Use

Creating architecture diagrams (Azure, AWS)
Converting flowcharts from text descriptions
Transforming images/screenshots into editable format
Generating swimlane, sequence diagrams

Prerequisites

Tool	Required
VS Code	Yes
Draw.io Integration	Yes
GitHub Copilot	Yes

Quick Start

Create a login flow diagram



Generate an Azure Hub-Spoke architecture diagram



From inputs/requirements.md, create a system diagram

Output Formats

Extension	Description	When to Use
`*.drawio`	Native format	Recommended
`*.drawio.svg`	SVG + metadata	Markdown/Web
`*.drawio.png`	PNG + metadata	Image with edit

Output : outputs/

Workflow

USER INPUT → ORCHESTRATOR → MANIFEST GATEWAY → SVG FORGE → COMPLETED

Quality Gates

Score	Action
90-100	Proceed
70-84	Fix and retry
50-69	Simplify
0-29	Ask user

Limits

Limit	Value
Manifest revision	2
SVG revision	2
Total timeout	45min

Cloud Icons

→ references/cloud-icons.md

Enable in VS Code

Open .drawio file
Click "+ More Shapes" (bottom-left)
Enable: Azure, AWS
Apply

Azure Format (Critical)

<!-- WRONG -->
<mxCell style="shape=mxgraph.azure.front_door;..." />

<!-- CORRECT -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />

References

File	Description
mxcell-structure.md	mxCell XML structure
cloud-icons.md	Azure/AWS icon guide
style-guide.md	Node colors, edge styles

Scripts

Script	Description
`scripts/validate_drawio.py`	Validate mxCell structure

Troubleshooting

Issue	Solution
Blank in draw.io	Check `content` attribute
Edges not visible	Verify node IDs
Icons missing	Enable Azure/AWS shapes

Done Criteria

.drawio or .drawio.svg file generated
Diagram opens correctly in VS Code Draw.io extension
All nodes and edges visible
Quality gate score ≥ 85

Weekly Installs

Repository

aktsmm/agent-skills

GitHub Stars

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

codex46

opencode45

claude-code44

gemini-cli44

github-copilot44

cursor41

AI 代码实施计划编写技能 | 自动化开发任务分解与 TDD 流程规划工具

50,900 周安装

`*.drawio`	原生格式	推荐
`*.drawio.svg`	SVG + 元数据	Markdown/网页
`*.drawio.png`	PNG + 元数据	可编辑的图像