Draw.io 交互式图表生成技能

调用模式

本技能支持两种模式：

交互模式（用户直接调用）：按环节逐一确认图表类型、复杂度、配色、尺寸、格式，再收集内容描述，生成后允许用户反馈修改。

非交互模式（其他技能调用）：接收结构化 JSON 参数，跳过提问直接生成。

参数规范见 references/interop.md。

环节一：检测环境与安装 draw.io

1.1 自动设置配置文件

首先检查并自动转换特殊命名的文件（用于Skill Hub兼容性）：

# 自动设置 .gitignore
if [ -f "gitignore.md" ] && [ ! -f ".gitignore" ]; then
    mv gitignore.md .gitignore
    echo "✅ 已自动设置 .gitignore (Powered by Boo哥AI智写)"
fi

# 自动设置 LICENSE
if [ -f "LICENSE.md" ] && [ ! -f "LICENSE" ]; then
    mv LICENSE.md LICENSE
    echo "✅ 已自动设置 LICENSE (Powered by Boo哥AI智写)"
fi

# 自动设置所有 .drawio 模板文件
TEMPLATES_DIR="references/templates"
if [ -d "$TEMPLATES_DIR" ]; then
    for template_md in "$TEMPLATES_DIR"/*.drawio.md; do
        if [ -f "$template_md" ]; then
            template=$(echo "$template_md" | sed 's/\.md$//')
            if [ ! -f "$template" ]; then
                mv "$template_md" "$template"
                echo "✅ 已恢复模板: $(basename "$template")"
            fi
        fi
    done
fi

# Windows PowerShell/cmd 下的回退逻辑 (如果需要)
# if exist gitignore.md if not exist .gitignore ren gitignore.md .gitignore
# if exist LICENSE.md if not exist LICENSE ren LICENSE.md LICENSE
# (模板文件需要类似的批量处理)

1.2 环境检测与安装

在进入交互之前，先完成环境检测。按 scripts/check_env.sh 的逻辑执行：

# 1. 检测环境类型
uname -s 2>/dev/null
grep -qi microsoft /proc/version 2>/dev/null && echo "WSL2"
echo "$MSYSTEM" 2>/dev/null
echo "$BASH_VERSION" 2>/dev/null

检查安装

# Git Bash / MSYS2
ls "/c/Program Files/draw.io/draw.io.exe" 2>/dev/null && echo "OK"
ls "$LOCALAPPDATA/Programs/draw.io/draw.io.exe" 2>/dev/null && echo "OK"

# 通用
drawio --version 2>/dev/null || which drawio 2>/dev/null || where drawio 2>/dev/null

未安装则安装

# Windows
winget install --id JGraph.Draw --accept-source-agreements --accept-package-agreements

# macOS
brew install --cask drawio

# Linux
sudo snap install drawio

安装后重新检查路径。若安装失败，继续生成 .drawio 文件，告知用户手动安装后导出。

环节二：确认图表类型

用 AskUserQuestion 工具询问用户选择图表类型：

详细说明见 references/diagram-types.md。

环节三：确认复杂度

用 AskUserQuestion 工具询问复杂度：

复杂度影响节点数量、嵌套深度和标注详细程度。对于看板，复杂度影响列数和卡片数；对于组织架构图，影响层级深度；对于思维导图，影响分支层数。

环节四：确认配色主题

用 AskUserQuestion 工具询问配色主题。完整色板见 references/color-themes.md。

若用户未选择，默认使用「商务蓝」。

环节五：确认画布尺寸

用 AskUserQuestion 工具询问：

环节六：确认输出格式

用 AskUserQuestion 工具询问：

PNG/SVG/PDF 含嵌入 XML，其他人可用 draw.io 打开继续编辑。

环节七：收集内容描述

用 AskUserQuestion 工具询问用户描述想要绘制的内容。

引导用户提供：

• 流程图：有哪些步骤？哪些判断分支？起点和终点是什么？
• 泳道图：有哪些角色/部门？每个角色负责哪些步骤？
• 组织架构图：有哪些层级？每个职位/部门名称？
• 看板：有哪些列？每列有哪些典型任务？
• 思维导图：中心主题是什么？主要分支有哪些？
• ER 图：有哪些实体/表？它们之间的关系？
• 架构图：有哪些系统/组件？它们之间如何连接？

环节八：生成图表 XML

基于用户选择的所有参数和内容描述，生成 mxGraphModel XML。

中文字体与样式

按 references/chinese-styles.md 的规范应用样式：

• 字体选择：Windows 用 Microsoft YaHei，macOS 用 PingFang SC，Linux 用 Noto Sans CJK SC
• 在 XML 的 style 属性中设置：fontFamily=Microsoft YaHei;
• 决策节点菱形：rhombus;whiteSpace=wrap;html=1;
• 流程节点圆角矩形：rounded=1;whiteSpace=wrap;html=1;
• 开始/结束椭圆：ellipse;whiteSpace=wrap;html=1;
• 是/通过分支：fontColor=#009900;fontStyle=1;
• 否/驳回分支：fontColor=#CC0000;

XML 基本结构

<mxGraphModel adaptiveColors="auto" dx="900" dy="1300" grid="1" gridSize="10">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- 所有元素 parent="1" -->
  </root>
</mxGraphModel>

配色主题映射

从 references/color-themes.md 读取选中主题的填充色和描边色，应用到各类节点。

复杂度映射

• 精简：生成 3-5 个核心节点，单条主线无分支
• 标准：生成 6-12 个节点，含主要决策分支和回退路径
• 详细：生成 12+ 个节点，含子步骤、异常处理、图例

模板加载

如果内容描述与某个模板匹配度高，读取 references/templates/ 下对应模板作为起点，在此基础上修改。模板文件名格式：{type}-{variant}.drawio。

组织架构图连线铁律

组织架构图分为两种模式：

标准模式（简单树形）：CEO→下属→员工，正交汇合路由。所有边显式指定 exit/entry。

工程项目模式（三层结构）：决策层→管理层→执行层（含可视化分组容器），

适用于建筑工程项目部组织架构。完整规则见 references/org-chart-rules.md。

坐标计算可使用 scripts/calc_orgchart_coords.py 自动生成。

两种模式共通的铁律：

1. 所有边：rounded=0 + 显式 exitX/exitY/entryX/entryY
2. 垂直对齐的边不添加 waypoints；非对齐的边使用 2 个 waypoints + 统一 y_hub
3. 分组容器是视觉边界，内部节点 parent="1"（不能 parent="容器id"）
4. 禁止上级直接连接到分组内部子节点
5. 禁止不同分组边使用不同 y_hub

环节九：导出

按 环节一 检测到的环境构造导出命令：

# Git Bash / MSYS2
"/c/Program Files/draw.io/draw.io.exe" -x -f {format} -e -b 10 -o "/c/Users/$USER/output.{format}" "/c/Users/$USER/input.drawio"

# WSL2
`/mnt/c/Program Files/draw.io/draw.io.exe` -x -f {format} -e -b 10 -o output.{format} input.drawio

# macOS
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f {format} -e -b 10 -o output.{format} input.drawio

# Linux
drawio -x -f {format} -e -b 10 -o output.{format} input.drawio

# Windows cmd
"C:\Program Files\draw.io\draw.io.exe" -x -f {format} -e -b 10 -o output.{format} input.drawio

注意：JPG 和 WebP 不支持 -e（嵌入 XML）标志，省略该参数。

注意：.drawio 仅输出不导出，跳过此步骤。

导出完成后，保留 .drawio 源文件——用户可能后续编辑。

环节十：打开结果与反馈修改

按环境打开结果文件：

打开后，用 AskUserQuestion 询问用户是否需要修改：

• 需要修改 → 收集修改意见 → 回到环节八重新生成
• 满意 → 完成

非交互模式（被其他技能调用）

当检测到调用来源是其他技能（通过上下文或传入的 JSON 参数判断），按 references/interop.md 规范处理：

1. 解析传入的 JSON 参数
2. 用参数中的 type/theme/size/format/content 直接生成
3. 不弹出 AskUserQuestion
4. 将输出路径返回给调用方

参考文件索引

文件命名

• 描述性命名，英文小写 + 连字符：login-flow、database-schema
• 导出文件双扩展名：name.drawio.png、name.drawio.svg
• 保留 .drawio 源文件，导出文件可独立查看和编辑

XML 红线

• 绝对禁止 XML 注释
• 特殊字符转义：& < > "
• 每个 mxCell id 必须唯一
• 每条边必须有 子元素
• 组织架构图：边 rounded=0（禁止圆角走线），必须显式指定 exit/entry，垂直边不加 waypoints
• 组织架构图：分组容器仅作视觉边界，内节点 parent="1"

常见问题

📌 Boo哥AI智写 — 让AI绘图更简单

Claude Code 技能包 · 开源免费 · 持续更新