Draw.io To HTML

Use this skill when the user says:

/drawio-to-html 为我将"C:\path\file.drawio"转换成html

Generate the HTML file in the same directory as the .drawio source unless the user gives an explicit output path. With no actions file, generate a plain view-only HTML page. With an actions JSON file, generate a clickable HTML page from:

• a .drawio source file,
• an exported SVG from draw.io,
• an actions JSON file mapping draw.io mxCell id values to click behavior,
• local assets referenced by those actions.

Workflow

1. Edit the .drawio file in draw.io/diagrams.net.
2. If click interactions are needed, write an actions.txt or actions.json beside the .drawio file, and keep user-facing resources under an assets/ folder beside that config.
3. Update the actions JSON instead of editing generated HTML by hand.
4. Run build_all.ps1 to export SVG and generate HTML.
5. Run quick_check.ps1 after script or actions changes.
6. Inspect the generated HTML in a browser when visual layout or interactions changed.

Commands

From the skill directory, convert an external draw.io file and save HTML beside it:

.\build_all.ps1 -Drawio "C:\Users\Tzhang\Desktop\实习_国金\0630\全景图.drawio"
.\quick_check.ps1

With the command above, the default output is C:\Users\Tzhang\Desktop\实习_国金\0630\全景图.html. A temporary SVG is also written beside the source as 全景图.rendered.svg.

To add interactions, place actions.json beside the .drawio file, or pass -Actions explicitly:

.\build_all.ps1 -Drawio "C:\path\file.drawio" -Actions "C:\path\actions.json"
.\quick_check.ps1 -Actions "C:\path\actions.json" -AssetsRoot "C:\path"

You can also write actions.txt beside the .drawio file. build_all.ps1 will translate it to actions.json automatically before compilation.

If draw.io cannot be found automatically, pass -DrawioExe or set DRAWIO_EXE:

$env:DRAWIO_EXE = "C:\Program Files\draw.io\draw.io.exe"
.\build_all.ps1

Device-Specific Paths

Never hard-code a single draw.io install path in long-lived instructions. build_all.ps1 resolves draw.io in this order:

1. -DrawioExe argument.
2. DRAWIO_EXE environment variable.
3. draw.io or drawio available on PATH.
4. Common Windows install paths under Program Files, Program Files (x86), and %LOCALAPPDATA%.
5. Windows uninstall registry entries whose display name looks like draw.io or diagrams.net.

If all checks fail, ask the user for the local draw.io executable path.

Action Configuration

Use references/actions-config.md when adding, removing, or validating click actions. Prefer the helper script for common JSON edits. For a simpler workflow, author actions.txt beside the source diagram and let the build translate it to actions.json. The bundled panorama example lives under examples/panorama/ and is not the default configuration:

node .\scripts\manage_actions.cjs add --actions "C:\path\actions.json" --id "mxCell-id" --type modal-html --file "assets/report.html" --title "Report"
node .\scripts\manage_actions.cjs add-choice --actions "C:\path\actions.json" --id "mxCell-id" --label "Option A" --type new-tab --file "assets/report.html"
node .\scripts\manage_actions.cjs validate --actions "C:\path\actions.json" --assets-root "C:\path"

Keep action snippets in assets/action-snippets/ when users want copyable JSON examples.

Rules

• Treat .drawio as the source of truth; do not manually redraw the diagram in HTML.
• Treat exported SVG and generated HTML as build outputs.
• When -Drawio is passed, write generated HTML beside the source .drawio using the same base name, for example 全景图.html.
• When -Drawio is omitted, use the skill's bundled sample and write to output/clickable.generated.html for testing.
• Do not assume the panorama example actions apply to arbitrary draw.io files.
• When a node is deleted and recreated in draw.io, re-check the new mxCell id and update actions JSON.
• Keep action paths relative to the actions JSON file or skill/project root.