archify

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.