Browser

drawio-to-html

Try it

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", "流程图转网页",

What it does

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

The skill document

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  [output.html]

If output.html is omitted, the script defaults to .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 StyleSVG Output
rounded=1 / arcSizeRounded rectangle (pill or soft rounded)
rhombusDiamond (decision nodes)
defaultRectangle 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 `` 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).

Related skills

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.

by johnpatternai21 installs8 stars

Read and write Excel workbooks, worksheets, ranges, tables, and charts in OneDrive through Microsoft Graph with managed OAuth.

by byungkyu800 installs42 stars

Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.

by fly0pants

Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.

by Iván1 installs

More from nellyxiaolong-cmyk

Browse all skills

Analyze portrait photos to recommend the most flattering hairstyle based on face shape, facial features, hair texture, and personal style. Use when the user uploads a portrait/headshot photo and asks for hairstyle recommendations, haircut advice, or wants to see how they would look with a suggested

by nellyxiaolong-cmyk1 installs