draw.io 图表生成器

技能文档

---
name: drawio-generator-pro
title: draw.io 图表生成器
category: 开发工具
description: 将自然语言流程描述转换为 draw.io 可编辑的 .drawio 图表文件，支持流程图、时序图、网络拓扑图、架构图等类型，内置 JSON 结构校验与 XML 规则校验。当用户描述业务流程需要生成流程图、要求画架构图/时序图/网络拓扑图，或需要交付可编辑的 draw.io 图表文件时触发。触发词：流程图、架构图、drawio、图表生成。
---

# draw.io 图表生成器

将自然语言描述转换为 draw.io 可编辑 XML（.drawio 文件）。生成结果并非完美，线条重叠、节点间距不理想等情况可能发生，正常交付流程为：生成 `.drawio` → 用 draw.io（app.diagrams.net 网页版或桌面版）打开 → 手动微调 → 保存。

## 技能工作流

### 步骤1：接收用户描述

接收用户的文字描述或文档，提炼出图表标题、节点内容和连接关系。若用户已提供结构化 JSON，可直接进入步骤3。

### 步骤2：生成结构化 JSON 并确认

把描述整理为 nodes + edges 的结构化 JSON，展示给用户确认：

```json
{
  "title": "流程名称",
  "type": "flowchart",
  "nodes": [
    {"id": "0", "type": "start", "label": "开始"},
    {"id": "1", "type": "process", "label": "处理步骤"},
    {"id": "2", "type": "decision", "label": "判断条件？"},
    {"id": "3", "type": "end", "label": "结束"}
  ],
  "edges": [
    {"source": "0", "target": "1"},
    {"source": "1", "target": "2"},
    {"source": "2", "target": "3", "label": "是"},
    {"source": "2", "target": "1", "label": "否"}
  ]
}
```

节点 type 取值：

| 值 | 说明 |
|----|------|
| `start` | 椭圆，开始节点 |
| `end` | 椭圆，结束节点 |
| `process` | 圆角矩形，处理步骤 |
| `decision` | 菱形，判断节点 |
| `document` | 文档形状 |
| `data` | 平行四边形，数据存储 |

edges.label 取值：`是`/`Y` 表示条件为真，`否`/`N` 表示条件为假，空字符串为普通顺序流。

### 步骤3：调用生成脚本

用户确认后，调用标准生成脚本 `scripts/gen.py`：

```bash
python3 scripts/gen.py "图表标题" '{"title":"...","nodes":[...],"edges":[...]}' [类型]
```

- 第三个参数为图表类型提示：`flowchart|sequence|network|architecture|hierarchy|function|deployment`，默认 `flowchart`
- 输出到当前目录下 `drawio-output/{图表标题}.drawio`
- 必须通过 `gen.py` 调用，禁止直接调用 `generator.py`

脚本内部流程：JSON Schema 校验 → 生成 XML → XML 规则校验 → 保存。校验失败时脚本会输出修正指令，按指令修正 JSON 后重试（最多 3 次）。

### 步骤4：交付文件

把生成的 `.drawio` 文件路径交付给用户，并告知：用 draw.io 网页版（app.diagrams.net）或桌面版打开文件进行查看和手动微调。

## 文件说明

| 文件 | 说明 |
|------|------|
| `scripts/gen.py` | 标准生成脚本（日常使用入口） |
| `scripts/__main__.py` | 完整管道（含 LLM 分析模式） |
| `scripts/generator.py` | 底层 XML 生成器（gen.py 内部调用） |
| `scripts/designer.py` | 构建结构化设计描述的 LLM prompt |
| `scripts/validator.py` | JSON Schema 与 XML 规则校验 |
| `scripts/parser.py` | 输入解析（txt/md/docx/pdf） |
| `references/drawio-xml-spec.md` | draw.io XML 格式规范（样式/属性速查） |

## 布局参数

`generator.py` 内置参数（可在 `gen.py` 中调用 `generate_drawio_xml()` 前修改）：

| 参数 | 默认值 | 说明 |
|------|--------|------|
| `CANVAS_WIDTH` | 850 | 画布宽度 |
| `_LAYER_GAP_Y` | 120 | 层间垂直间距 |
| `MAIN_X` | 425 | 主轴 X 坐标 |

如需压缩布局（A4 大小），修改这些全局变量后再生成的坐标计算参考（画布宽 850，主轴居中 x=425）：主轴节点 `x = 425 - width/2`，右侧分支 `x = 650` 或更大，垂直间距为上一节点 `y + height + 140px`。

使用说明

# draw.io 图表生成器

一句话把流程描述变成可编辑的 draw.io 图表文件（.drawio），内置多重校验，开箱即用。

## 使用

```bash
python3 scripts/gen.py "用户登录流程" '{"title":"用户登录流程","nodes":[{"id":"0","type":"start","label":"开始"},{"id":"1","type":"process","label":"输入账号密码"},{"id":"2","type":"end","label":"结束"}],"edges":[{"source":"0","target":"1"},{"source":"1","target":"2"}]}' flowchart
```

生成的 `.drawio` 文件输出到当前目录 `drawio-output/`，用 draw.io（app.diagrams.net）打开即可查看和微调。

## 工作原理

接收自然语言描述后，先生成 nodes + edges 的结构化 JSON，再由本地 Python 脚本自动计算坐标并生成 draw.io XML；生成前后分别进行 JSON Schema 校验和 XML 规则校验，不通过会给出修正指令，确保产出文件可直接打开编辑。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。