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

skills/diagram-design/references/export.md

@@ -92,6 +92,32 @@ Default `device_scale_factor=2` for crisp output. Accept `1` for compact assets
 
 `example-architecture.html` → `example-architecture.png`, written next to the source. Honour explicit user-provided paths.
 
+## Sizing the export
+
+The PNG's pixel dimensions are the SVG's `viewBox` × `device_scale_factor`. So the size decision was already made when the diagram was drawn — see [`output-spec.md` §2](output-spec.md) for the presets. Export only picks the multiplier.
+
+| Destination | Scale | Result from a 1280×720 `viewBox` |
+|---|---|---|
+| Docs, README, wiki | 2 | 2560×1440 |
+| Slide deck (projected) | 2 | 2560×1440 |
+| Print / PDF handout | 3 | 3840×2160 |
+| Inline thumbnail, email | 1 | 1280×720 |
+
+### Hitting an exact pixel size
+
+When the user needs specific dimensions (an OG card at exactly 1200×630, a slide image at 1920×1080), compute the scale factor instead of guessing — Playwright accepts fractional values:
+
+```
+scale = target_width / viewBox_width
+```
+
+A 960-wide `viewBox` at a 1200px target is `scale=1.25`. Two rules:
+
+- **Never scale below 1** to hit a small target — that soft-focuses the type. Redraw at a smaller preset instead.
+- **Never scale past 4** — beyond that you're upscaling a layout that was designed for a smaller canvas; redraw at `slide-16x9` or a print preset.
+
+If the target aspect ratio doesn't match the `viewBox` aspect ratio, say so and offer to redraw at the matching preset. Padding or cropping a finished diagram to fit a frame is not an export operation — it breaks the 40px safe margin.
+
 ## Edge cases
 
 - **Source is `assets/index.html`** (the gallery, multiple SVGs in one file): refuse the export and ask the user which specific diagram file they meant. Don't guess.