什么是 Draw.io 图表生成？

Draw.io 技能赋能 AI 编程 Agent 创建视觉精美且技术准确的图表，包括 ERD、UML 类图、时序图和系统架构图。通过利用 draw.io CLI 的强大功能，该技能实现了 XML 构建和手动布局这一繁琐过程的自动化，确保每种可视化效果都符合专业标准和严格的结构规则。使用像这样的 Openclaw Skills，开发者可以在几秒钟内从概念架构转化为最终文档。

该技能专为精度而设计，具有自动类型检测和智能布局逻辑。它处理坐标计算、元素间距和关系映射的复杂性，从而生成整洁、可读的 PNG、SVG 或 PDF 导出文件。无论您是在记录遗留数据库还是规划新的微服务架构，该技能都在自然语言描述和专业视觉资产之间提供了稳健的桥梁。

下载入口:https://github.com/openclaw/skills/tree/main/skills/romanmeclazcke/drawio

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Draw.io 图表生成 应用场景

• 生成用于数据库建模和模式设计的实体关系图 (ERD)。
• 创建 UML 类图以可视化面向对象的结构和继承。
• 通过自动化流程图可视化复杂的逻辑和流程。
• 使用时序图映射系统交互和参与者调用。
• 起草高层级的基础设施和软件架构概览。

1. Agent 根据用户输入关键词检测请求的图表类型（ERD、类图、时序图、流程图或架构图）。
2. 该技能在生成任何代码之前规划所有必要的实体、属性和关系。
3. 创建专用图表目录以管理资产。
4. Agent 生成一个经过严格验证的 .drawio XML 文件，包含唯一 ID 和精确的坐标计算。
5. 调用 draw.io CLI 将 XML 导出为高分辨率 PNG 图像。
6. 生成的图像立即呈现给用户进行查看。
7. 系统提示用户选择其他导出格式，如 SVG、PDF 或原始可编辑的 .drawio 文件。

Draw.io 图表生成 配置指南

确保您的系统中安装了 draw.io 桌面应用程序。对于 Linux 或无头环境，渲染需要 xvfb。

# 检查二进制文件是否可用
drawio --version

# 创建图表目录
mkdir -p ./diagrams

Draw.io 图表生成 数据架构与分类体系

该技能通过本地项目内的结构化文件系统管理数据。它同时组织源代码 XML 和生成的视觉资产。

name: drawio
description: Generate professional draw.io diagrams (ERD/database tables, class diagrams, sequence diagrams, flowcharts, architecture diagrams) and export them as PNG. Use when the user requests any kind of diagram, database model, class structure, flow, or system visualization.
metadata:
  openclaw:
    requires:
      bins: ["drawio"]

Draw.io Diagram Generation Skill

When to use this skill

• User requests a database diagram, ERD, or entity-relationship diagram
• User requests a class diagram or UML class structure
• User requests a sequence diagram or interaction diagram
• User requests a flowchart or process flow
• User requests an architecture diagram or system overview
• User mentions "draw.io", "diagram", "table", "entity", "class", "sequence", "flow"

?? MANDATORY RULES — READ BEFORE GENERATING ANYTHING

1. ALWAYS detect the diagram type first before writing any XML
2. NEVER mix styles between diagram types — each type has its own strict XML structure
3. ALWAYS assign unique sequential IDs to every mxCell starting from 0
4. NEVER use inside a value attribute — use separate rows/cells instead
5. ALWAYS calculate table/class heights correctly using the formulas provided
6. ALWAYS validate the XML structure before saving
7. ALWAYS export to PNG and include the PNG in the response before asking about other formats — this step is non-negotiable
8. NEVER use generic rounded rectangles for database tables or class entities
9. ALWAYS apply consistent spacing between diagram elements
   • Horizontal spacing between elements: minimum 120px
   • Vertical spacing between rows or steps: minimum 100px
   • Tables/classes must not overlap
   • Relationship lines must not cross through table headers

STEP 0 — Diagram Type Detection

Before generating any XML, identify the diagram type from the user's request:

Diagram Type References

Use the detailed rules/templates in these files based on the detected type.

• ERD / Database: ERD.md
• UML Class: CLASS.md
• Sequence: SEQUENCE.md
• Flowchart: FLOWCHART.md
• Architecture: LAYOUT.md

Generation Workflow — ALWAYS follow this exact order

Step 1 — Identify diagram type

Determine TYPE 1–5 from the user's message before writing any XML.

Step 2 — Plan all elements

List every entity/class/participant and all relationships before coding.

Step 3 — Create output folder

mkdir -p ./diagrams

Step 4 — Write and save the XML

Save to ./diagrams/.drawio

Mandatory pre-save checklist:

• All mxCell elements have unique sequential numeric IDs
• ERD tables use shape=table with shape=tableRow rows (never generic shapes)
• Class diagrams use swimlane with attribute block, divider line, and method block
• Sequence diagrams have lifelines, activation boxes, and correct arrow styles
• ERD relationship arrows connect to row cell IDs, not table container IDs
• Heights calculated correctly: 30 + (columns x 30) for ERD tables
• No literal in value attributes (use for multiline text cells only)
• XML is well-formed and all tags are closed

Step 5 — Export to PNG

# macOS
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f png --scale 2 -o ./diagrams/.png ./diagrams/.drawio

# Linux / headless
xvfb-run -a drawio -x -f png --scale 2 -o ./diagrams/.png ./diagrams/.drawio

Step 6 — Verify output

ls -lh ./diagrams/.png

Step 7 — Show PNG first (MANDATORY)

Always respond with the PNG image first (embed/attach it in the response).

Step 8 — Ask the user for delivery format (MANDATORY)

After showing the PNG, ALWAYS ask the user which additional format they want:

The diagram is ready! Which format would you like?

1 - PNG image (ready to view) 2 - .drawio file (editable in draw.io) 3 - SVG (scalable vector) 4 - PDF 5 - All of the above

Reply with the number(s) of your choice.

Then based on the response:

• 1 → send the PNG file
• 2 → send the .drawio file
• 3 → export SVG and send it
• 4 → export PDF and send it
• 5 → send all formats
• Multiple numbers (e.g. "1 2") → send all requested formats

Other export formats

# SVG (scalable vector)
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f svg -o ./diagrams/.svg ./diagrams/.drawio

# PDF
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f pdf -o ./diagrams/.pdf ./diagrams/.drawio

# High-res PNG (scale 3)
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f png --scale 3 -o ./diagrams/_hd.png ./diagrams/.drawio

# Transparent background
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f png -t --scale 2 -o ./diagrams/_transparent.png ./diagrams/.drawio