@littledragon_wxl/drawio-style-graph 1.0.0

package/references/style-diagram-matrix.md

@@ -0,0 +1,159 @@
+# Style-to-Diagram-Type Adaptation Guide
+
+How each visual style performs for each diagram type in draw.io.
+
+## Architecture Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Default choice. Colorful node fills, clear layering with swimlanes |
+| 2 Dark Terminal | ★★★★★ | Popular for dev blogs. Colored borders on dark background |
+| 3 Blueprint | ★★★★★ | Perfect for formal architecture docs. Cyan-on-navy with grid feel |
+| 4 Notion Clean | ★★★★ | Minimal, works for inline docs. Minimal color variation |
+| 5 Glassmorphism | ★★★★ | Striking for presentations. `glass=1` + `shadow=1` |
+| 6 Claude Official | ★★★★ | Warm aesthetic. Thick 2.5px borders, teal/beige palette |
+| 7 OpenAI Official | ★★★★ | Clean, precise. White-on-white with minimal gray borders |
+| 8 Dark Luxury | ★★★★★ | Premium editorial. Gold-on-black layers, 6 semantic color buckets |
+
+## Class Diagram / ER Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★ | Colored headers per entity/class category |
+| 2 Dark Terminal | ★★★★ | High contrast for code-like diagrams. Use lighter text |
+| 3 Blueprint | ★★★★★ | Best for formal UML documentation. Monospace font, cyan strokes |
+| 4 Notion Clean | ★★★★★ | Clean, minimal. Ideal for Notion/confluence embedded ERDs |
+| 5 Glassmorphism | ★★ | Glass effects distract from structural content. Use with caution |
+| 6 Claude Official | ★★★★★ | Warm, readable. Thick borders on class boxes |
+| 7 OpenAI Official | ★★★★★ | Minimal aesthetic matches UML precision |
+| 8 Dark Luxury | ★★★ | Non-standard dark background for UML. Use only for premium editorial |
+
+## Sequence Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★ | Clear lifelines. Activation boxes visible |
+| 2 Dark Terminal | ★★★★ | Good for dev articles. Dashed lifelines visible on dark bg |
+| 3 Blueprint | ★★★★★ | Formal, technical documentation. Use cyan lifelines |
+| 4 Notion Clean | ★★★★★ | Best for Notion-embedded sequence diagrams |
+| 5 Glassmorphism | ★★ | Glass effects make lifelines hard to read |
+| 6 Claude Official | ★★★★ | Warm contrast. Thick message arrows |
+| 7 OpenAI Official | ★★★★★ | Minimal, precise. Ideal for API docs |
+| 8 Dark Luxury | ★★★★ | Gold primary arrows. Dramatic contrast for dev blogs |
+
+## Flowchart / Process Flow
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Default. Colorful decision diamonds (yellow), process boxes (blue) |
+| 2 Dark Terminal | ★★★★ | Works well for dev workflow diagrams |
+| 3 Blueprint | ★★★★ | Formal process documentation. Sharp corners |
+| 4 Notion Clean | ★★★★ | Clean for SOPs and inline docs |
+| 5 Glassmorphism | ★★★★ | Striking for product demos |
+| 6 Claude Official | ★★★★ | Warm aesthetic for presentations |
+| 7 OpenAI Official | ★★★★ | Clean and minimal |
+| 8 Dark Luxury | ★★★★ | Gold decision diamonds. Premium process docs |
+
+## Mind Map / Concept Map
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Colorful branches, engaging |
+| 2 Dark Terminal | ★★★★ | Neon-like branches on dark bg |
+| 3 Blueprint | ★★ | Blueprint grid conflicts with radial layout |
+| 4 Notion Clean | ★★★★★ | Ideal for brainstorming |
+| 5 Glassmorphism | ★★★★★ | Stunning visual for presentations |
+| 6 Claude Official | ★★★★ | Warm, readable |
+| 7 OpenAI Official | ★★★★ | Clean and minimal |
+| 8 Dark Luxury | ★★★★★ | Gold accent branches on black. Standout in presentations |
+
+## Data Flow Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Color-coded arrows by data type |
+| 2 Dark Terminal | ★★★★★ | Glowing data paths on dark bg |
+| 3 Blueprint | ★★★★★ | Formal data flow documentation |
+| 4 Notion Clean | ★★★★ | Minimal, clean. Use blue arrows only |
+| 5 Glassmorphism | ★★ | Distracts from flow semantics |
+| 6 Claude Official | ★★★★ | Readable. Consistent dark gray arrows |
+| 7 OpenAI Official | ★★★★ | Precise, minimal |
+| 8 Dark Luxury | ★★★★★ | Color-coded data paths (gold, mint, amber). Data engineering |
+
+## Agent / Memory Architecture
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Colorful layers, engaging |
+| 2 Dark Terminal | ★★★★★ | Popular for AI/ML blog posts. Purple AI glow |
+| 3 Blueprint | ★★★★ | Formal AI system documentation |
+| 4 Notion Clean | ★★★★ | Clean for AI research notes |
+| 5 Glassmorphism | ★★★★★ | Stunning for AI product presentations |
+| 6 Claude Official | ★★★★★ | Anthropic AI aesthetic. Teal-green agent boxes |
+| 7 OpenAI Official | ★★★★★ | OpenAI aesthetic. Brand green accents |
+| 8 Dark Luxury | ★★★★★ | Best for premium AI system docs. Gold on deep black |
+
+## Network Topology
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Colorful device shapes |
+| 2 Dark Terminal | ★★★★★ | Cyberpunk-style network maps |
+| 3 Blueprint | ★★★★★ | Ideal for infrastructure docs |
+| 4 Notion Clean | ★★★★ | Clean for IT documentation |
+| 5 Glassmorphism | ★★★★ | Striking for presentations |
+| 6 Claude Official | ★★★★ | Professional network diagrams |
+| 7 OpenAI Official | ★★★★ | Clean infrastructure diagrams |
+| 8 Dark Luxury | ★★★★★ | Deep black classic. Gold topology lines |
+
+## Use Case Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★ | Colorful use case ellipses |
+| 2 Dark Terminal | ★★ | Stick figures less visible on dark bg |
+| 3 Blueprint | ★★★★★ | Classic UML aesthetic |
+| 4 Notion Clean | ★★★★★ | Perfect for product requirement docs |
+| 5 Glassmorphism | ★★ | Unnecessary visual noise |
+| 6 Claude Official | ★★★★★ | Warm, professional |
+| 7 OpenAI Official | ★★★★★ | Clean, precise UML |
+| 8 Dark Luxury | ★★★ | Stick figures less visible on deep black |
+
+## State Machine Diagram
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★ | Colorful states |
+| 2 Dark Terminal | ★★★★ | Glowing states and transitions |
+| 3 Blueprint | ★★★★★ | Best for formal UML state machines |
+| 4 Notion Clean | ★★★★★ | Clean for documentation |
+| 5 Glassmorphism | ★★ | Distracts from state transitions |
+| 6 Claude Official | ★★★★ | Readable |
+| 7 OpenAI Official | ★★★★★ | Minimal, precise |
+| 8 Dark Luxury | ★★★★ | High contrast for state transitions |
+
+## Comparison / Feature Matrix
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Color-coded cells |
+| 2 Dark Terminal | ★★★★ | Works for dev tool comparisons |
+| 3 Blueprint | ★★ | Grid conflicts with table layout |
+| 4 Notion Clean | ★★★★★ | Perfect for Notion-embedded tables |
+| 5 Glassmorphism | ★★ | Distracts from tabular data |
+| 6 Claude Official | ★★★★★ | Clean, warm |
+| 7 OpenAI Official | ★★★★★ | Minimal, precise |
+| 8 Dark Luxury | ★★★ | Dark bg non-standard for tables |
+
+## Timeline / Gantt
+
+| Style | Suitability | Notes |
+|-------|-------------|-------|
+| 1 Flat Icon | ★★★★★ | Colorful bars by category |
+| 2 Dark Terminal | ★★★★ | Works for dev roadmaps |
+| 3 Blueprint | ★★★★ | Formal project plans |
+| 4 Notion Clean | ★★★★★ | Ideal for Notion project docs |
+| 5 Glassmorphism | ★★★★ | Striking for keynote presentations |
+| 6 Claude Official | ★★★★ | Warm, professional |
+| 7 OpenAI Official | ★★★★ | Clean timeline |
+| 8 Dark Luxury | ★★★★ | Premium project roadmaps |

package/references/style-extraction.md

@@ -0,0 +1,255 @@
+# Style Extraction — agent reference
+
+Loaded on demand by `SKILL.md` when the user asks to learn a style ("learn my style from `<path>` as `<name>`") or when the agent needs to render a sample after extraction.
+
+## Sample diagram (for approval render)
+
+After extracting a candidate preset, render this seven-node sample using the candidate's palette/shapes/fonts/edges. Each role appears exactly once; six edges, one dashed, exercise `edges.arrow`, `edges.style`, and `edges.dashedFor`.
+
+**Layout (TB):**
+- Row 1 (y=40): `gateway` centered at x=340
+- Row 2 (y=180): `security` (x=80), `service` (x=340), `queue` (x=600)
+- Row 3 (y=340): `database` (x=80), `external` (x=340), `error` (x=600)
+
+**Template — substitute `{{...}}` placeholders from the candidate preset.**
+
+The vertex style for role `R` is built as:
+`<shapes[R]>;whiteSpace=wrap;html=1;fillColor=<palette[roles[R]].fillColor>;strokeColor=<palette[roles[R]].strokeColor>;fontFamily=<font.fontFamily>;fontSize=<font.fontSize>`
+- If `extras.sketch=true`, append `;sketch=1` to every vertex style AND every edge style.
+- If `extras.globalStrokeWidth !== 1` (i.e., any value other than the drawio default of 1, including `0.5`), append `;strokeWidth=<n>` to every vertex style AND every edge style.
+
+The edge style is built as:
+`<edges.style>;<edges.arrow>`
+- Per-edge routing keys (`exitX/entryX/...`) are added as literals below.
+- Edge 15 exercises `edges.dashedFor`:
+  - If `edges.dashedFor` is **non-empty**, use its first entry as the edge's `value` (label) AND append `;dashed=1` to the edge style.
+  - If `edges.dashedFor` is empty (`[]`), use the label `cross-call` and do NOT append `;dashed=1` — the preset has no dashed convention, so the sample must not fake one.
+
+**Placeholder expansion (applied when filling the XML):**
+- `{{VSTYLE:<role>}}` expands to the vertex-style formula above with `R = <role>`. Write the result as a literal string; do not URL-encode.
+- `{{ESTYLE}}` expands to the edge-style formula above.
+- `{{EDGE15_LABEL}}` and `{{EDGE15_DASH}}` follow the Edge-15 rule above.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="drawio" version="26.0.0">
+  <diagram name="Preset Sample">
+    <mxGraphModel>
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+
+        <!-- Row 1: gateway -->
+        <mxCell id="2" value="Gateway" style="{{VSTYLE:gateway}}" vertex="1" parent="1">
+          <mxGeometry x="340" y="40" width="160" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Row 2: security | service | queue -->
+        <mxCell id="3" value="Auth" style="{{VSTYLE:security}}" vertex="1" parent="1">
+          <mxGeometry x="80" y="180" width="160" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="4" value="Service" style="{{VSTYLE:service}}" vertex="1" parent="1">
+          <mxGeometry x="340" y="180" width="160" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="5" value="Queue" style="{{VSTYLE:queue}}" vertex="1" parent="1">
+          <mxGeometry x="600" y="180" width="160" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Row 3: database | external | error -->
+        <mxCell id="6" value="Database" style="{{VSTYLE:database}}" vertex="1" parent="1">
+          <mxGeometry x="80" y="340" width="160" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="7" value="External API" style="{{VSTYLE:external}}" vertex="1" parent="1">
+          <mxGeometry x="340" y="340" width="160" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="8" value="Error Sink" style="{{VSTYLE:error}}" vertex="1" parent="1">
+          <mxGeometry x="600" y="340" width="160" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Edges -->
+        <mxCell id="10" value="" style="{{ESTYLE}};exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="2" target="3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="11" value="" style="{{ESTYLE}};exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="2" target="4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="12" value="" style="{{ESTYLE}};exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="2" target="5">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="13" value="" style="{{ESTYLE}};exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="4" target="7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="14" value="" style="{{ESTYLE}};exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="4" target="6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="15" value="{{EDGE15_LABEL}}" style="{{ESTYLE}}{{EDGE15_DASH}};exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="4" target="8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+```
+
+### Rendering the sample
+
+1. Write the filled XML to `/tmp/drawio-preset-<name>.drawio`.
+2. Run the same `drawio -x -f png -e -s 2 -o <preset-name>-sample.png <tmp>.drawio` command the main workflow uses (substitute the binary name you resolved in SKILL.md Step 1 if it isn't `drawio`).
+3. Repair the IEND chunk: `python3 <this-skill-dir>/scripts/repair_png.py <preset-name>-sample.png` — the `-e` flag truncates the PNG the same way the main workflow's step 7 does, so the sample needs the same fix to be readable.
+4. Save the PNG as `./preset-<name>-sample.png` (the user's working directory).
+5. Show the user: preset summary table + PNG path + provenance/confidence line.
+
+### Approval loop
+
+- "save" / "looks good" → write candidate to `~/.drawio-skill/styles/<name>.json`; delete tempfile and sample PNG.
+- "change <field> to <value>" → edit the in-memory candidate; re-render; re-ask.
+- "cancel" → delete tempfile and sample PNG; no save.
+
+### If sample render fails (draw.io CLI missing / export error)
+
+Still show the summary table and the provenance line. Note: *"Could not render sample PNG (CLI unavailable). Save anyway on your OK."* Do not block.
+
+## XML extraction path
+
+Input: a `.drawio` file path. Output: candidate preset JSON. Deterministic, no LLM inference.
+
+### Steps
+
+1. **Parse the file.** Read the XML, collect every `<mxCell>` with a `style=` attribute, split into vertices (`vertex="1"`) and edges (`edge="1"`).
+2. **Tokenize each `style=` string** on `;`. Each element is either `key=value` or a bare keyword (e.g., `rhombus`, `ellipse`, `rounded=1`).
+3. **Extract palette.** For every vertex, take the `(fillColor, strokeColor)` pair (skip vertices with neither). Count frequency. Keep the top ≤7 pairs.
+4. **Extract shape vocabulary + role mapping.** For each vertex determine a shape class by precedence:
+   `cylinder3 > ellipse > rhombus > swimlane > rounded=1 > rounded=0`.
+   Then infer the semantic role from the vertex's shape class and its `value` (label) attribute. **Evaluate the rules below in order; first match wins.**
+   - `cylinder3` → `database`
+   - `rhombus` → `decision`
+   - `swimlane` → `container`
+   - `dashed=1` present + **grey-family fill** (hex where the R, G, and B channels all fall within ±16 of each other, i.e., near-achromatic) → `external`
+   - label matches `/queue|bus|kafka|rabbit/i` → `queue`
+   - label matches `/gateway|api|lb|load/i` → `gateway`
+   - label matches `/auth|login|jwt|oauth/i` → `security`
+   - label matches `/error|fail|alert/i` → `error`
+   - everything else → `service`
+
+   For each **role that has a canonical palette slot** — `service`, `database`, `queue`, `gateway`, `error`, `external`, `security` — the most frequent `(role, color-pair)` mapping wins. The pair goes into the role's canonical palette slot:
+   `service→primary, database→success, queue→warning, gateway→accent, error→danger, external→neutral, security→secondary`.
+   Set `roles[role]` to that slot name.
+
+   **Decision and container shapes do not get a `roles[...]` entry** — they are recorded only in `shapes.decision` and `shapes.container`. Any color pairs observed on decision/container vertices still participate in the palette (they can fill leftover slots) but are not tied to a semantic role.
+
+   Leftover color pairs (not claimed by any role-slot mapping) fill remaining empty palette slots in descending-frequency order.
+
+   Record the shape class string used per role in `shapes[role]`. The six named shape keys are `service`, `database`, `queue`, `decision`, `external`, `container` — `gateway`, `error`, and `security` roles inherit `shapes.service` and do not get their own `shapes[...]` entry. Example: `shapes.database = "shape=cylinder3"`.
+
+5. **Extract fonts.** Compute modal `fontFamily` and `fontSize` across vertices; emit them as `font.fontFamily` and `font.fontSize`. Also track `fontStyle` per vertex as a **working variable** (not an output field — the schema has no top-level `font.fontStyle`). If a distinguishable subset of vertices uses a larger `fontSize` combined with `fontStyle=1` (bold), treat that subset as titles: set `font.titleFontSize` to their modal size and `font.titleBold: true`. Otherwise omit both title fields.
+
+6. **Extract edge defaults.** Take the modal edge style string, but strip these per-edge coordinate keys before counting: `entryX`, `entryY`, `exitX`, `exitY`, `entryDx`, `entryDy`, `exitDx`, `exitDy`. Record arrow style from `endArrow`/`endFill` separately in `edges.arrow`.
+   If any edges have `dashed=1`, collect their `value` (label) attributes. If ≥2 share a common token (e.g., all are labeled "async" or "optional"), add that token to `edges.dashedFor`.
+
+7. **Extract extras.** `sketch=1` seen on any vertex or edge → `extras.sketch = true`. Modal `strokeWidth` across vertices → `extras.globalStrokeWidth` (default `1`).
+
+8. **Set provenance.**
+   ```json
+   {
+     "source": { "type": "xml", "path": "<input absolute path>", "extracted_at": "YYYY-MM-DD" },
+     "confidence": "high"
+   }
+   ```
+
+### XML edge cases
+
+| Situation | Behavior |
+|---|---|
+| Source has <3 distinct color pairs | Leave unfilled slots as `null`. Downgrade `confidence` to `"medium"`. Summary warns the user. |
+| Source has >7 color pairs | Keep the top 7 by frequency. Summary warns that some colors were dropped. |
+| Non-standard `shape=` keywords (e.g., `shape=mxgraph.aws4.*`) | These do not match the Step 4 precedence ladder, so the vertex falls through to `rounded=0` for shape-class purposes. Iconography is lost; color, label, and edge style are still captured. Role inference still runs via the label-regex rules. Summary notes: *"Non-standard shape library detected — iconography not preserved in preset (color and label captured)."* |
+| Non-English labels | The English-keyword regexes in step 4 will mostly miss; most vertices collapse to `service`. Palette/shapes/font/edges still captured correctly (they don't depend on label text). `confidence` stays `"high"`. Summary notes: *"Role labels not in English — `service`/`database`/`decision`/`container`/`external` inferred from shape class; other roles not mapped."* |
+| File has no `<mxCell vertex="1">` at all | Stop. Refuse to save. Message: *"Nothing to learn from — source file has no shapes."* |
+
+## Image extraction path
+
+Input: path to a PNG/JPG (or any vision-readable image format). Output: candidate preset JSON. Inference-based; `confidence: "medium"` at best.
+
+**Prerequisite:** the agent's vision capability must be available (same mechanism the main workflow's self-check uses). If vision is not available, stop and tell the user:
+*"Image-based learning needs a vision-enabled model (Claude Sonnet or Opus). Re-run on such a model, or provide the `.drawio` source file instead."*
+
+### Steps
+
+1. **Read the image.** Use the agent's vision input — the same path the main workflow's step 5 uses to read exported PNGs during self-check.
+
+2. **Extract palette by visual inspection.** Identify distinct fill-color regions on shape bodies.
+
+   For each distinct fill:
+   - `fillColor` — quantize each RGB channel to the nearest multiple of 16. If the resulting HSL lightness is below 0.75, raise it to 0.85 (keep hue and saturation; set L=0.85; HSL→RGB round-trip). Emit as `#RRGGBB`. Drawio-standard pastels occupy L≈0.85–0.96; below 0.75 reads as "too dark for a fill color" and this step lifts it back into that range.
+   - `strokeColor` — read the matching border. If unreadable, derive from fill by darkening ~25% (match HSL, drop L by 0.25).
+
+   Map each `(fillColor, strokeColor)` pair to a named slot using this decision order:
+
+   1. **Grey check first.** If the fill has R, G, and B channels all within ±16 of each other (same definition as the XML path's grey-family rule), OR HSL saturation < 0.20, classify as `neutral`. This check wins regardless of hue angle.
+   2. **Hue band otherwise.** Use these explicit HSL hue ranges:
+      - 180°–260° → `primary` (blue)
+      - 80°–170° → `success` (green)
+      - 45°–65° → `warning` (yellow)
+      - 20°–44° → `accent` (orange)
+      - 0°–19° or 320°–360° → `danger` (red/pink)
+      - 260°–320° → `secondary` (purple)
+   3. **No band matched** (gap regions at 65°–80° or 170°–180°) → spill to the nearest band by angular distance.
+
+   **Collision rule.** If ≥2 distinct fills land in the same slot, sort them by total pixel area covered in the image (descending). The largest keeps the canonical slot. Remaining fills spill to the **nearest empty slot** measured by hue-band angular distance — first to adjacent bands on either side, then farther out. If every slot is already filled, drop the extras and warn in the summary.
+
+3. **Extract shape vocabulary.** Classify every visible shape by silhouette:
+   - rounded rectangle → `rounded=1`
+   - sharp rectangle → `rounded=0`
+   - circle / oval → `ellipse`
+   - diamond → `rhombus`
+   - cylinder (rectangle with curved top/bottom) → `shape=cylinder3`
+   - titled container (header bar + nested children inside) → `swimlane;startSize=30`
+   - dashed-bordered rectangle → `rounded=1;dashed=1`
+
+   Role assignment uses the **same label-text + shape rules as the XML path step 4**. Visible labels are read via vision.
+
+4. **Extract fonts.** Best-effort. Distinguishable categories:
+   - clearly serif → `fontFamily: "Georgia"`
+   - clearly monospaced → `fontFamily: "Courier New"`
+   - otherwise → `fontFamily: "Helvetica"`
+
+   Size by relative appearance:
+   - small → `fontSize: 11`
+   - medium → `fontSize: 12`
+   - large → `fontSize: 14`
+
+   If titles/container headers are distinctly larger or bolder → set `titleFontSize` accordingly and `titleBold: true`.
+
+5. **Extract edge defaults.**
+   - Right-angle orthogonal arrows → `edges.style = "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1"`.
+   - Curved arrows → append `;curved=1` to `edges.style`.
+   - Filled triangle arrowheads → `edges.arrow = "endArrow=classic;endFill=1"`.
+   - Open V-shaped arrowheads → `edges.arrow = "endArrow=open;endFill=0"`.
+   - Any dashed arrows near labels like "optional", "async", "fallback", "secondary" → add those label tokens to `edges.dashedFor`.
+
+6. **Extract extras.**
+   - Visibly hand-drawn / rough / sketch look (wavy strokes, uneven fills) → `extras.sketch = true`.
+   - Heavy strokes (clearly >1.5× normal) → `extras.globalStrokeWidth = 2`.
+   - Otherwise default: `extras = { "sketch": false, "globalStrokeWidth": 1 }`.
+
+7. **Set provenance and confidence.**
+   ```json
+   {
+     "source": { "type": "image", "path": "<input absolute path>", "extracted_at": "YYYY-MM-DD" },
+     "confidence": "medium"
+   }
+   ```
+   Adjustments:
+   - <3 distinct shapes identifiable → `confidence: "low"`.
+   - Image path stays at `"medium"` by default. The only path to `"high"` is a strictly-verifiable signal: the source image was exported from drawio itself (recognizable drawio default chrome, grid, or a visible drawio watermark), **and** all seven palette slots are filled, **and** all seven roles are labeled. This preserves the semantic gap between inference-based (image) and parse-based (XML) provenance.
+
+### Image edge cases
+
+| Situation | Behavior |
+|---|---|
+| Vision unavailable | Stop as described above — do not fall back to guessing. |
+| Image has <3 identifiable shapes | Continue; mark `confidence: "low"`; summary explicitly warns the user that the preset is a loose approximation. |
+| Image has no visible labels | Role assignment collapses to shape-class only: cylinders → `database`, diamonds → `decision`, swimlanes → `container`, dashed-bordered rectangles with grey fill → `external`, everything else → `service`. Palette/font/edges still captured. Summary notes: *"No labels readable — semantic roles beyond shape-class not inferred."* |
+| Two palette slots would land in the same hue family | Keep the more frequent one in its canonical slot; spill the other to the adjacent empty slot (rule in step 2). |
+| Image has more than 7 distinct fills | Keep the 7 most area-covering fills per the Step 2 collision rule. Summary warns that some colors were dropped. |

package/references/style-presets.md

@@ -0,0 +1,110 @@
+# Style Presets — Learn, Apply, Manage
+
+A **style preset** is a named JSON file capturing a user's visual preferences — palette, shape vocabulary, fonts, edge style. When a preset is active, it fully replaces the built-in conventions in SKILL.md's color/shape/edge tables.
+
+Read this file when:
+- The user asks to "learn", "save", "remember", or "extract" a style from a file
+- The user wants to manage existing presets (list, set default, delete, rename)
+- You've resolved an active preset in Step 0 and need the application rules
+- You need to validate a preset file before loading it
+
+## Locations and lookup order
+
+1. `~/.drawio-skill/styles/<name>.json` — user presets (survive `git pull`).
+2. `<this-skill-dir>/styles/built-in/<name>.json` — built-ins shipped with the skill (`default`, `corporate`, `handdrawn`).
+
+A user preset shadows a built-in of the same name.
+
+Only user presets can have `"default": true`. When the user says *"make `<built-in-name>` my default"*, copy the built-in JSON to `~/.drawio-skill/styles/<name>.json` first, then set `default: true` on the copy — leave the shipped built-in untouched.
+
+**Name normalisation:** always lowercase the user-provided name before writing or looking up files (the preset schema enforces lowercase; uppercase names will fail validation).
+
+## Applying a preset
+
+When SKILL.md's Step 0 identified a preset, it fully replaces the built-in palette, shape keywords, edge defaults, and font for this diagram — do not mix values from the built-in color table.
+
+**Color lookup.** For each role a shape plays (service / database / queue / gateway / error / external / security), resolve `preset.roles[role]` to a slot name, then `preset.palette[<slot>]` to the `(fillColor, strokeColor)` pair. If `roles[role]` is unset or the resolved slot is `null`, follow this fallback ladder:
+
+1. Try the role's canonical slot (`service→primary`, `database→success`, `queue→warning`, `gateway→accent`, `error→danger`, `external→neutral`, `security→secondary`).
+2. If that slot is also empty, pick the most-populated non-null slot in the preset.
+3. Never reach into the built-in color table — the preset is authoritative.
+
+**Decision and container shapes** are not in `preset.roles` — they have shape vocabulary (`preset.shapes.decision`, `preset.shapes.container`) but no role-to-slot mapping. Pick their colors as follows:
+- **Decision** (rhombus) → use `preset.palette.warning` (the canonical yellow slot in the built-in conventions). If `warning` is empty, apply the slot-fallback ladder above starting from `warning`.
+- **Container** (swimlane) → use the palette slot matching the tier/grouping the container represents (e.g. a "Services" tier container uses `primary`; a "Data" tier uses `success`). If no tier signal is available, default to `primary`.
+
+**Shape keywords.** Use `preset.shapes[role]` as the **prefix** of the vertex style string (before `whiteSpace=wrap;html=1;...`). Example: for a database role, if `preset.shapes.database = "shape=cylinder3"`, the vertex style starts `shape=cylinder3;whiteSpace=wrap;html=1;fillColor=...`. The six named shape keys are `service`, `database`, `queue`, `decision`, `external`, `container`. Roles `gateway`, `error`, and `security` reuse `preset.shapes.service` unless the preset explicitly populates a key with their name.
+
+**Edges.** Use `preset.edges.style` as the base edge style string. Append `preset.edges.arrow`. Per-edge routing keys (`exitX/exitY/entryX/entryY/...`) are still added by the usual routing rules in SKILL.md. If the flow between two shapes matches a token from `preset.edges.dashedFor` (either because the user's prompt used that word, or because one end of the edge plays a role whose typical relation is "optional"), append `;dashed=1` to the edge style.
+
+**Fonts.** Append `fontFamily=<preset.font.fontFamily>;fontSize=<preset.font.fontSize>` to every vertex style. Container headers and swimlane titles additionally get `fontSize=<preset.font.titleFontSize>;fontStyle=1` when `preset.font.titleBold` is `true`.
+
+**Extras.**
+- `preset.extras.sketch === true` → append `sketch=1` to every vertex style and every edge style.
+- `preset.extras.globalStrokeWidth !== 1` (any value other than the drawio default of 1, including `0.5`) → append `strokeWidth=<n>` to every vertex style and every edge style.
+
+**Interaction with diagram-type presets** (ERD / UML / Sequence / ML / Flowchart). Diagram-type presets set structural style keywords that the user preset must preserve (e.g. ERD tables rely on `shape=table;startSize=30;container=1;childLayout=tableLayout;...`). The rule: keep the diagram-type preset's structural keywords, then layer the user preset's color / font / edge / extras on top. When a diagram-type preset hardcodes a color (`fillColor=#dae8fc`, etc.) that conflicts with the user preset, the user preset's color wins. Exception: `fillColor=none` is structural — do not replace it with a palette color.
+
+## Learn flow
+
+**Triggers:** "learn my style from `<path>` as `<name>`", "save this as `<name>` style", "remember this style as `<name>`".
+
+**Dispatch by file extension:**
+- `.drawio`, `.xml` → XML path
+- `.png`, `.jpg`, `.jpeg`, `.svg` (rasterized flat image) → image path
+
+**Steps:**
+
+1. **Load the extraction reference.** Read `references/style-extraction.md` into context.
+2. **Extract** following the XML path or image path procedure in the reference.
+3. **Normalize and build candidate.** Convert the user-provided preset name to lowercase. Use this normalized name for ALL file paths in this flow. Build the candidate preset JSON and write it to `/tmp/drawio-preset-<name>.json` (where `<name>` is the already-normalized name). Do **not** save to `~/.drawio-skill/styles/<name>.json` yet.
+4. **Render a sample** using the sample-diagram skeleton in `references/style-extraction.md`, parameterized by the candidate preset. Export PNG to `./preset-<name>-sample.png` using the same `drawio -x -f png -e -s 2 -o ./preset-<name>-sample.png /tmp/drawio-preset-<name>.drawio` command the main workflow uses, then run `repair_png.py` on it (see the Rendering the sample steps in `style-extraction.md`).
+5. **Show the user:**
+   - Preset summary table (palette hex values, shapes per role, font, edge style, extras).
+   - The sample PNG path (and embed the image if the environment supports it).
+   - Provenance line: `source.type`, `source.path`, `extracted_at`, `confidence`.
+6. **Wait for approval:**
+   - "save" / "looks good" → write candidate to `~/.drawio-skill/styles/<name>.json`. Create `~/.drawio-skill/styles/` if it doesn't exist. Delete tempfile and sample PNG.
+   - "change `<field>` to `<value>`" → edit the in-memory candidate, re-render, re-ask.
+   - "cancel" / "abort" / "no" → delete tempfile and sample PNG; nothing saved.
+
+**Error behavior:**
+
+| Failure | Behavior |
+|---|---|
+| Source path does not exist | Stop; report path not found. |
+| XML parse fails | Stop; report the parse error; suggest opening the file in drawio desktop to repair. |
+| Image vision unavailable | Stop; tell user to re-run on a vision-capable model or provide the `.drawio` file. |
+| Extraction yields 0 vertices / shapes | Stop; refuse to save. |
+| Extraction yields <3 distinct color pairs | Continue; mark `confidence: "low"` (image) or `"medium"` (XML); warn in summary. |
+| Preset name collides with existing user preset | Ask: overwrite, or pick a new name. |
+| Preset name collides with a built-in preset | Save to user dir (shadows the built-in); warn once. |
+| Sample render fails | Still show summary; note "could not render sample — saving on your OK anyway". Do not block. |
+
+## Management operations
+
+All operations are natural language — no slash commands.
+
+*Apply name normalisation (lowercase) to all `<name>`, `<a>`, `<b>` arguments before any file operation.*
+
+| User says | Agent does |
+|---|---|
+| "list my styles", "what styles do I have", "show me my style presets" | Read `~/.drawio-skill/styles/` and `<this-skill-dir>/styles/built-in/`. Print a table: `name`, `location` (user/built-in), `source.type`, `confidence`, `default` flag. Built-ins shadowed by a user preset are marked so. |
+| "show my `<name>` style", "what's in `<name>`" | Print the preset JSON (pretty-printed) + a one-line summary (source, confidence, is-default). |
+| "make `<name>` the default", "set `<name>` as default" | If `<name>` is a user preset: set `default: true` on it; clear `default` on any other user preset that had it; save both files. If `<name>` is a built-in: copy `<this-skill-dir>/styles/built-in/<name>.json` → `~/.drawio-skill/styles/<name>.json` first, then set `default: true` on the copy. Never mutate the shipped built-in. |
+| "remove default", "unset default" | Clear `default: true` from whichever user preset has it. |
+| "delete `<name>`", "remove `<name>`" | Confirm first. Then `rm ~/.drawio-skill/styles/<name>.json`. Refuse to delete files under `<this-skill-dir>/styles/built-in/` — suggest shadowing with a user preset of the same name. |
+| "rename `<a>` to `<b>`" | `mv ~/.drawio-skill/styles/<a>.json ~/.drawio-skill/styles/<b>.json`, then update the `name` field inside. Fails if `<a>` is a built-in (offer to copy-then-rename instead). |
+| "learn my style from `<path>` as `<name>`" | Dispatch to the Learn flow above. |
+
+## Preset file validation
+
+When loading any preset (for generation or management), do a lightweight structural check:
+- Required top-level fields present (`name`, `version`, `palette`, `roles`, `shapes`, `font`, `edges`).
+- `version === 1`.
+- Every populated palette slot has both `fillColor` and `strokeColor` as `#RRGGBB`.
+- `confidence` ∈ {`"low"`, `"medium"`, `"high"`} if present.
+
+On validation failure:
+- **During generation:** warn the user, fall back to built-in conventions for this one diagram, do not mutate the file.
+- **During learn:** refuse to save the candidate; report which field failed.

package/references/styles/style-1-flat-icon.md

@@ -0,0 +1,79 @@
+# Style 1: Flat Icon (Default)
+
+Adapted from fireworks-tech-graph Style 1. Clean, colorful, draw.io-native aesthetic.
+
+## Color Palette → Draw.io Mapping
+
+| Role | fillColor | strokeColor | Use for |
+|------|-----------|-------------|---------|
+| primary (service) | `#eff6ff` | `#bfdbfe` | services, clients, main components |
+| success (database) | `#f0fdf4` | `#bbf7d0` | databases, storage |
+| warning (queue) | `#fff7ed` | `#fed7aa` | queues, decisions |
+| accent (gateway/API) | `#faf5ff` | `#e9d5ff` | gateways, APIs, orchestration |
+| danger (error) | `#fef2f2` | `#fecaca` | errors, alerts |
+| secondary (security) | `#f0fdfa` | `#ccfbf1` | security, auth |
+| neutral (external) | `#f9fafb` | `#e5e7eb` | external systems, neutral |
+
+## Typography → Draw.io Mapping
+
+```
+fontFamily=Helvetica Neue,Helvetica,Arial,PingFang SC,Microsoft YaHei,SimHei,sans-serif
+fontSize=14        (labels)
+fontSize=12        (sub-labels)
+fontSize=16        (titles)
+fontStyle=1        (bold, for titles)
+fontColor=#111827  (primary text)
+fontColor=#6b7280  (secondary text)
+```
+
+## Shape Preferences
+
+```
+rounded=1          (rounded corners, 8px equivalent)
+whiteSpace=wrap
+html=1
+```
+
+For standard boxes: `rounded=1;whiteSpace=wrap;html=1;`
+For databases: `shape=cylinder3;whiteSpace=wrap;html=1;`
+For decisions: `rhombus;whiteSpace=wrap;html=1;`
+For clouds: `cloud;whiteSpace=wrap;html=1;`
+For documents: `shape=document;whiteSpace=wrap;html=1;`
+
+## Edge Style → Draw.io Mapping
+
+Base edge style:
+```
+edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;
+```
+
+Arrow colors (append to edge style):
+| Flow Type | strokeColor | Additional |
+|-----------|-------------|------------|
+| Primary data flow | `#2563eb` | — |
+| Secondary/alt | `#dc2626` | — |
+| Data/retrieval | `#16a34a` | — |
+| Async/event | `#9333ea` | `dashed=1` |
+| Control/trigger | `#ea580c` | — |
+
+## Extras
+
+```
+strokeWidth=1.5   (on all shapes)
+sketch=0          (no sketch mode)
+shadow=0          (no drop shadows)
+```
+
+## Complete Vertex Style Template
+
+For a service node (primary role):
+```
+rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#bfdbfe;strokeWidth=1.5;fontFamily=Helvetica Neue,Helvetica,Arial,PingFang SC,Microsoft YaHei,SimHei,sans-serif;fontSize=14;fontColor=#111827;
+```
+
+## Complete Edge Style Template
+
+For a primary data flow edge:
+```
+edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;
+```