Files
diagram-design/commands/import-drawio.md
T
ClaudeandCathryn Lavery ced802198d feat(import): redraw draw.io files at a chosen format, size, and detail level
Adds a draw.io import path to the skill. Points at a .drawio file and
produces an editorial diagram fitted to where it's going — not a
format conversion.

- scripts/drawio_extract.py: decodes all four containers draw.io writes
  (raw XML, deflate+base64 payloads, PNG tEXt chunks, SVG content attrs),
  flattens mxGraphModel into absolute-positioned nodes/edges, and reports
  structural signals: hubs, containers, depth, cycles, collapsible leaf
  groups, budget flags. Deterministic half — makes no design decisions.
- references/output-spec.md: the three dials. Nine size presets with
  per-size-class type ramps and safe areas; faithful/balanced/simplified
  detail levels with a fixed degrade ladder; engineer/mixed/executive
  audience wording; fidelity ledger; CJK font fallback.
- references/import-drawio.md: the redraw procedure — extract, set dials,
  pick type, build the semantic model, redraw on the grid. Includes the
  draw.io palette/shape → semantic role mappings, multi-page handling,
  edge cases, and anti-patterns.
- commands/import-drawio.md: /diagram-design:import slash command.
- SKILL.md: new §11 (import + output dials), taste-gate entries, §12 output.
- export.md: sizing section — scale factors and exact-pixel targets.
- assets/example-import-drawio.html: worked import of the checked-in
  fixture at balanced/doc-inline, lint-clean.
- scripts/verify-drawio-import.py: drives the real extractor against the
  fixture in all four containers and checks the references stay in sync.

faithful is the one documented exemption from the §7 complexity budget,
and it's conditional: zoned above 9 nodes, split above 24. The §6
connector rules never relax for imported content.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M5f1aK1zNcgnQUnXZgG2LU
2026-08-11 13:51:30 -07:00

3.2 KiB

description, argument-hint, allowed-tools
description argument-hint allowed-tools
Redraw a draw.io file as an editorial diagram at a chosen format, size, and detail level <drawio-file> [--format=html|svg|png|html+png] [--size=<preset>] [--detail=faithful|balanced|simplified] [--audience=engineer|mixed|executive] [--type=<diagram-type>] [--page=N|NAME|all] [--variant=light|dark|full] [--output=<path>]
Read
Write
Edit
Bash
Glob

Redraw the draw.io file at $1 as a diagram in this skill's design system, following skills/diagram-design/references/import-drawio.md and skills/diagram-design/references/output-spec.md. Treat those references as the source of truth — don't reimplement the logic here.

Full argument string: $ARGUMENTS

Accepts .drawio, .drawio.xml, .xml, .drawio.png, and .drawio.svg.

Defaults

  • --format=html — a self-contained HTML file next to the source.
  • --size=doc-inline — viewBox 0 0 960 600.
  • --detail=balanced · --audience=mixed.
  • --variant=light — the minimal light template.
  • Page 0 when the file has several pages.
  • Type is chosen from the extracted structure; --type forces one of the 27.

Flags

  • --format — html (default), svg, png, or html+png. Non-HTML formats are produced from the HTML via references/export.md, never hand-authored.
  • --size — any preset in output-spec.md §2: doc-inline, doc-wide, slide-16x9, slide-4x3, social-og, social-square, print-a4-landscape, print-letter-landscape, fit.
  • --detail — faithful (≤24 nodes, zoned), balanced (≤12), simplified (≤7).
  • --audience — engineer, mixed, executive. Governs wording, not element count.
  • --type — force a diagram type instead of inferring it.
  • --page — page index, page name, or all (one file per page).
  • --variant — light, dark, or full editorial template.
  • --output — output base path; the extension is appended per format.

Required behaviour

  1. No file provided → ask which .drawio file. Don't guess.
  2. Always run skills/diagram-design/scripts/drawio_extract.py first. Never read a .drawio file directly — most are compressed, and the raw XML is noise.
  3. Extractor exits non-zero → report its message verbatim and stop.
  4. Digest shows 0 nodes → the source is image-only or encrypted. Say so; ask for the original file. Don't invent content.
  5. Multi-page file with no --page → list the pages with their node/edge counts and ask which one.
  6. Requested detail level is impossible at the requested size (e.g. faithful on a 40-node source at slide-16x9) → say so before drawing and propose overview + per-zone detail.
  7. --detail=faithful above 9 nodes → zone the layout; above 24 nodes, split into overview + detail files.
  8. Never carry over source coordinates, colors, or fonts. The output is a redraw in the project's style-guide.md skin.
  9. Run the SKILL.md §9 taste gate and the output-spec.md §6 checklist before writing.

After writing the files, report the paths, sizes, the three dials used, and the fidelity ledger (what was merged, collapsed, or dropped).