Back to Details

drawio-diagram-forge

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Draw.io Diagram Forge

Draw.io 图表生成工具

Generate draw.io editable diagrams using AI-powered workflow.
借助AI驱动的工作流生成可编辑的draw.io图表。

When to Use

适用场景

  • Creating architecture diagrams (Azure, AWS)
  • Converting flowcharts from text descriptions
  • Transforming images/screenshots into editable format
  • Generating swimlane, sequence diagrams
  • 创建架构图（Azure、AWS）
  • 从文本描述转换流程图
  • 将图片/截图转换为可编辑格式
  • 生成泳道图、序列图

Prerequisites

前置条件

ToolRequired
VS CodeYes
Draw.io IntegrationYes
GitHub CopilotYes
工具是否必需
VS Code是
Draw.io Integration是
GitHub Copilot是

Quick Start

快速开始

Create a login flow diagram
Generate an Azure Hub-Spoke architecture diagram
From inputs/requirements.md, create a system diagram
Create a login flow diagram
Generate an Azure Hub-Spoke architecture diagram
From inputs/requirements.md, create a system diagram

Output Formats

输出格式

ExtensionDescriptionWhen to Use
*.drawio
Native formatRecommended
*.drawio.svg
SVG + metadataMarkdown/Web
*.drawio.png
PNG + metadataImage with edit
Output: 
outputs/
扩展名描述使用场景
*.drawio
原生格式推荐使用
*.drawio.svg
SVG+元数据文档/网页展示
*.drawio.png
PNG+元数据带编辑信息的图片
输出目录: 
outputs/

Workflow

工作流

USER INPUT → ORCHESTRATOR → MANIFEST GATEWAY → SVG FORGE → COMPLETED
用户输入 → 协调器 → 清单校验门 → SVG生成器 → 完成

Quality Gates

质量校验门

ScoreAction
90-100Proceed
70-84Fix and retry
50-69Simplify
0-29Ask user
分数区间操作
90-100继续执行
70-84修复后重试
50-69简化需求
0-29询问用户补充信息

Limits

限制条件

LimitValue
Manifest revision2
SVG revision2
Total timeout45min
限制项数值
清单修订次数2次
SVG修订次数2次
总超时时间45分钟

Cloud Icons

云图标

→ references/cloud-icons.md
→ references/cloud-icons.md

Enable in VS Code

在VS Code中启用

  1. Open 
    .drawio
    file
  2. Click "+ More Shapes" (bottom-left)
  3. Enable: Azure, AWS
  4. Apply
  1. 打开
    .drawio
    文件
  2. 点击左下角的**"+ 更多形状"**
  3. 启用Azure、AWS选项
  4. 应用设置

Azure Format (Critical)

Azure格式（关键要求）

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

<!-- CORRECT -->
<mxCell style="aspect=fixed;image=img/lib/azure2/networking/Front_Doors.svg;..." />
xml
<!-- WRONG -->
<mxCell style="shape=mxgraph.azure.front_door;..." />

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

References

参考资料

FileDescription
mxcell-structure.mdmxCell XML structure
cloud-icons.mdAzure/AWS icon guide
style-guide.mdNode colors, edge styles
文件描述
mxcell-structure.mdmxCell XML结构说明
cloud-icons.mdAzure/AWS图标指南
style-guide.md节点颜色、连线样式规范

Scripts

脚本

ScriptDescription
scripts/validate_drawio.py
Validate mxCell structure
脚本描述
scripts/validate_drawio.py
校验mxCell结构

Troubleshooting

故障排除

IssueSolution
Blank in draw.ioCheck 
content
attribute
Edges not visibleVerify node IDs
Icons missingEnable Azure/AWS shapes
问题现象解决方法
draw.io中显示空白检查
content
属性
连线不可见验证节点ID是否正确
图标缺失启用Azure/AWS形状选项

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
  • 已生成
    .drawio
    或
    .drawio.svg
    文件
  • 图表可在VS Code的Draw.io扩展中正常打开
  • 所有节点和连线均可见
  • 质量校验门得分≥85