360 Secure SkillHub
360 安全技能中心

drawio-to-html

将 .drawio 或含 mxGraphModel 的 XML 文件转换为内嵌 SVG 的自包含 HTML,支持圆角矩形、菱形、正交连线、箭头和标签,并保留颜色;转换脚本仅依赖 Python 标准库,但泳道、图片、复杂渐变、自定义形状及后续 diagram 不会渲染。

nellyxiaolong-cmyk
nellyxiaolong-cmyk
热度 7.64
最近更新 2026-09-05 23:21:22
分类:效率依赖:代码执行 / 读写文件应用场景:文件转换 / 工作流

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add drawio-to-html
Metadata
name
drawio-to-html
description
Convert drawio/diagrams.net flowchart and diagram files into self-contained HTML pages with embedded SVG rendering. Use when the user uploads or mentions a .drawio file and wants to convert it to HTML, view it in a browser, or share it as a web page. Triggers on phrases like "drawio转html", "流程图转网页", "把drawio转成html", "drawio to html".

Drawio to HTML

Convert drawio/diagrams.net XML files into standalone HTML pages with embedded SVG.

Supported Input

  • .drawio files (diagrams.net / draw.io native format)
  • Files containing mxGraphModel XML structure

Supported Output

  • Self-contained .html files with embedded SVG
  • No external dependencies — open directly in any browser
  • Preserves original colors, shapes, rounded corners, diamonds, arrows, edge labels

Workflow

Step 1: Locate the drawio file

Get the file path from the user or workspace context.

Step 2: Run the conversion script

Execute the bundled Python script:

python3 scripts/drawio2html.py <input.drawio> [output.html]

If output.html is omitted, the script defaults to <input>.html in the same directory.

Step 3: Report results

Tell the user:

  • Output file path
  • File size
  • Diagram name extracted from the XML
  • Any nodes/edges that could not be rendered (if applicable)

Node Shape Support

drawio Style SVG Output
rounded=1 / arcSize Rounded rectangle (pill or soft rounded)
rhombus Diamond (decision nodes)
default Rectangle with slight corner radius

Edge Support

  • Orthogonal connectors with waypoints
  • Solid and dashed lines
  • Arrow markers
  • Edge labels ("是"/"否" branch annotations)

Limitations

  • Does not render: swimlanes, images, complex gradient fills, custom shapes
  • Text inside nodes is centered; multi-line text supported
  • Only the first <diagram> element is rendered if multiple exist

Script Reference

The conversion logic lives in scripts/drawio2html.py. It is a pure-Python script with no external dependencies beyond the standard library (xml.etree, re, sys, os).