Archify Skill

Create professional technical diagrams as self-contained HTML files with inline SVG, a theme toggle, and a built-in image/SVG export menu.

Every renderer-backed diagram ships with a factual Diagram Guide for discovering its current actions and shortcuts, deterministic semantic node hooks, a counted two-kind Semantic Lens with selective inline legend entrances, a fine-pointer/keyboard Intent Trace before committed focus, a two-endpoint Route Probe over authored directed relationships, a searchable Node Finder, keyboard-accessible one-hop focus with a renderer-owned Semantic Passport and copyable deep link, a live Semantic Radar overview, an optional Named Chapter Rail with static Chapter Delta Preview, a native Story Beat Navigator with Story Follow Camera, Story Director Strip, and Story Horizon, and stable Shareable Story Moment links, a reader-controlled Live/Still Motion Governor for trace artifacts, a viewer-only Share Chapter Cue for one-shot embeds, Presentation Stage, dependency-free pan/zoom, a dark/light theme toggle (persists in localStorage, respects prefers-color-scheme), an export menu (create, copy, or download a 1200×630 Share Card; copy full-diagram PNG to clipboard; download PNG/JPEG/WebP rasterized natively at up to 4× resolution; download a dual-theme SVG; record a trace-enabled diagram to WebM), and a CSS-variable color system that keeps both themes consistent. Temporary Diagram Guide, Semantic Lens, legend preview, Intent Trace, Route Probe, finder, focus, radar, Chapter Delta Preview, Story Trail overlays, Story Director Strip, Story Horizon, beat state, guided-view, playback, presentation, motion-owner, and viewport state never changes the canonical full-diagram export.

Offer the optional 1200×630 Share Card PNG when the user asks for a README, release, social, or launch preview. It uses the current theme and visual preset, contains the entire canonical diagram without cropping, and never claims validation; the checked HTML remains the source of any delivery receipt. When the browser supports image clipboard writes, Copy Share Card must reuse that same one-pass canonical PNG; unsupported readers retain the download action.

Route Share Card is a reader-invoked optional export, never a default generation or delivery mode. When the user wants to share an incident path, request chain, dependency route, or PR explanation, offer the choice to resolve a Route Probe and use Export → Route Share Card; otherwise keep ordinary Share Card and canonical exports unchanged. The contextual Export item appears only after a real directed route resolves, reuses that exact ordered node and stable-edge snapshot without re-running pathfinding, preserves the full diagram as dimmed context, and downloads one 1200×630 PNG named <diagram-base>-route-share-card.png. It remains the shared Share Card seam (Archify.exportMenu.shareCard({ variant: "route" })) with format=share-card and variant=route; clear, unreachable, stale, or conflicting routes must fail closed. The isolated clone may use only static data-share-route-* decoration and must not include Journey position, animation overlays, camera, Focus, Lens, or Story state. Do not claim the route variant is canonical. This slice is download-only: do not promise Copy Route Share Card, a new format, schema, layout, dependency, URL, or storage surface.

Reach Share Card is the corresponding reader-invoked export for an active authored reachability query. When the user wants to explain what authored relationships lead into a component or continue from it, focus that node, choose Upstream or Downstream, then offer Export → Reach Share Card. The item must remain hidden unless a non-empty reach result is active. It consumes the already resolved node IDs, stable edge keys, minimum depths, origin, direction, and maximum hops without running BFS again; stale, duplicate, conflicting, empty, or tampered DOM state fails closed. The shared 1200×630 seam is Archify.exportMenu.shareCard({ variant: "reach" }), with format=share-card, variant=reach, canonical=false, and an independent reach-state-clean receipt. The clone may use only static data-share-reach-* decoration, keeps the complete diagram as dimmed context, labels the header Authored upstream/downstream, and downloads <diagram-base>-<direction>-reach-share-card.png. Never call the asset impact, blast radius, breakage, or runtime causality. This is download-only and adds no copy action, format, schema, parser, layout, dependency, URL, storage, hosted service, or mobile product surface.

Reading Depth progressively reveals renderer-owned context and fine detail as the reader zooms, while semantic interactions reveal the exact local facts they need at any scale.

Direct Relationship Pin makes every unique compiled relationship directly operable without changing the authored line. Give important connections, edges, messages, flows, and transitions an optional author-controlled id using the normal identifier pattern; IDs must be unique within their relationship collection. The renderer keeps its numeric data-edge-key for runtime de-duplication and emits the author identity separately as data-edge-id. At runtime, reject conflicting source/target/label/ID metadata and clone only path/line/polyline geometry into one viewer-owned overlay below nodes. Use a transparent 24px non-scaling stroke for hit testing plus a separate dashed focus rail; keep exactly one relationship button at tabindex="0" and move roving focus with all Arrow keys, Home, and End. Fine-pointer hover and keyboard focus reuse exact Relationship Preview transiently. Click, tap, Enter, or Space opens the source Semantic Passport and pins the exact existing Lens row. When the relationship has an authored ID, the pin writes #relation=<id>, changes the action to Copy relation, and restores the same source, target, label, path, and bounded camera after reordering; stale IDs fail closed. An ID-less legacy relationship remains an in-page pin, keeps Copy node, and never exposes its numeric key. The same relationship, a true background activation, Clear, or Escape clears it. aria-pressed conveys the pin while the source/target/label name stays stable. Touch never waits for hover, nodes win near endpoints, panning never activates a relation, and stronger Focus, Story, Route, Semantic Lens, Chapter, and embed states take priority. Do not add another panel, toolbar action, dependency, storage, or authored geometry. Remove all hit, pin, preview, and pulse state from embed, print, and canonical export; preserve the authored data-edge-id as semantic SVG identity.

Setup

No dependency installation is required. The distributed skill includes standalone validators compiled from all five JSON Schemas, so schema and layout validation work immediately after installation. The generated HTML and the renderer runtime are both dependency-free.