Ctrl K

Quick Ref / Command

Engineer Kit

/ak:diagram

Interactive system maps

Compile typed JSON IR into validated interactive system maps, SVG, embeddable fragments, and self-contained HTML readers without browser dependencies.

Select archetype

Author typed IR

Apply schema invariants

Choose compile flags

Rule 01

Pick by target artifact, not by the word diagram.

Rule 02

Typed JSON IR is the source; compile it offline to SVG, fragment, or HTML.

Rule 03

Identical IR bytes must emit identical output bytes.

Rule 04

Whiteboard sketches, print charts, and inline Mermaid belong to other skills.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

Start

Input, scope, route

1 Select archetype Match intent to architecture, workflow, sequence, dataflow, or lifecycle before writing IR.
2 Author typed IR Set schema_version, diagram_type, meta, visual preset, theme, and optional finite trace animation.

Work

Agent / skill execution

3 Apply schema invariants Use strict node role enums, alphanumeric hyphen IDs, and adequate workflow lane spacing.
4 Choose compile flags Pick --format svg, fragment, or html plus --preset, --theme, and --out for the destination file.

Verify

Gate, review, validation

5 Compile offline Run the Node compiler on the typed IR with zero browser, network, telemetry, or font download.
6 Keep motion finite Trace animation, if requested, lasts at most eight seconds and disables under prefers-reduced-motion.

Report, handoff, artifact

7 Verify bytes Identical IR bytes must emit identical SHA-256 output bytes across environments.
8 Deliver artifact Return the self-contained HTML reader, clean SVG, or embeddable fragment at the requested --out path.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

Arguments

[input-file]

Typed IR file

Optional path to a typed JSON IR diagram. Omit it only when the IR will be authored in-session before compile.

/ak:diagram architecture.json --format html --out ./build/diagram.html

Shared options

--format <svg|fragment|html>

Output format

Compile to a clean vector SVG, an embeddable scoped HTML fragment, or a standalone interactive HTML reader. Default compile path is the self-contained HTML reader.

/ak:diagram architecture.json --format svg --out ./build/diagram.svg

--preset <classic|signal-flow|blueprint|editorial>

Visual preset

classic is a clean slate, signal-flow uses emerald/cyan glow, blueprint is technical dark blue, and editorial is warm serif.

/ak:diagram architecture.json --format fragment --preset signal-flow --theme dark

--theme <light|dark>

Color theme

light or dark theme for the compiled SVG, fragment, or HTML reader. Finite trace animation, if requested, stays at most eight seconds and respects reduced motion.

/ak:diagram architecture.json --format html --theme dark --out ./build/diagram.html

--out <path>

Output path

Destination file for the compiled artifact. Identical IR bytes emit identical SHA-256 output bytes across environments.

/ak:diagram architecture.json --format html --out ./build/diagram.html

Modes / Routes

--format svg|fragment|html

Compile format

Research:: schema-and-reader
Review:: Refuse unknown formats
Validate:: Artifact matches format

--preset

Visual preset

Research:: classic/signal-flow/blueprint/editorial
Review:: Keep enum values
Validate:: Preset applied

--theme

Light or dark

Research:: light|dark
Review:: Keep enum values
Validate:: Theme applied

--out

Output path

Research:: destination file
Review:: Do not overwrite without path
Validate:: File written

Special Operations

Zero network

Compilation operates offline in pure Node.js; no remote calls, telemetry, or font downloads.

Reduced motion

Trace animation stays finite and disables automatically under prefers-reduced-motion.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Default IR compile

/ak:diagram architecture.json

Use when:: Typed IR already exists and the default interactive HTML reader is enough.
Expected:: Selects an archetype from the IR, compiles architecture.json offline to a self-contained HTML reader, and reports the output path without opening a browser or calling the network.

HTML reader Recommended

/ak:diagram architecture.json --format html --theme dark --out ./build/diagram.html

Use when:: The desired artifact is a standalone interactive HTML reader with a dark theme.
Expected:: Compiles the typed IR offline to a self-contained HTML reader at ./build/diagram.html, applies the dark theme, and keeps any trace motion finite with reduced-motion disable.

Vector SVG

/ak:diagram architecture.json --format svg --out ./build/diagram.svg

Use when:: A clean vector file is needed instead of an interactive reader.
Expected:: Compiles architecture.json to a deterministic SVG at ./build/diagram.svg, stays offline in Node.js, and does not emit HTML, fragments, or browser-rendered stills.

Embeddable fragment

/ak:diagram architecture.json --format fragment --preset signal-flow --theme dark

Use when:: The map must embed into an existing page rather than ship as a standalone file.
Expected:: Compiles a scoped HTML fragment with the signal-flow preset and dark theme, keeps compilation offline, and reports that the fragment is for embedding rather than a standalone reader.

Handled Scope

Architecture, workflow, sequence, dataflow, and lifecycle archetypes
Typed JSON IR with schema invariants and grounded graph queries
Offline Node compile to SVG, scoped fragments, and HTML readers
Visual presets classic, signal-flow, blueprint, and editorial
Finite trace motion with reduced-motion disable

Artifacts Produced

Compiled diagram

Pattern

<out>.html | <out>.svg | scoped HTML fragment

Self-contained interactive HTML reader, clean vector SVG, or embeddable scoped fragment compiled from typed JSON IR.