creating-diagramslisted

# Creating Diagrams Turn a question about a system into one validated, self-contained HTML diagram. The bundled engine (a vendored copy of archify, see the plugin `NOTICE`) takes a small typed JSON specification, lays it out, checks its geometry, and renders an interactive viewer: light and dark modes, pan and zoom, search, focus, guided views, presentation mode, and PNG, JPEG, WebP, SVG, and WebM export. Artifacts make no network requests. In the commands below, `ENGINE` is the absolute path of this skill's `engine/` directory. The engine needs Node 18 or later and nothing else: no install, no `node_modules`. ## Inputs - **A description** in plain language. Ask only about gaps that would change the diagram; mark the rest as assumptions in a card instead of inventing facts. - **Pasted Mermaid.** Read it for topology and meaning, then author fresh JSON: `flowchart`/`graph` becomes `workflow` (or `architecture` for a component map), `sequenceDiagram` becomes `sequence`, `stateDiagram` becomes `lifecycle`. Never carry over Mermaid styling. - **A repository.** Read entry points, service definitions, infra code (`docker-compose.yml`, Terraform, Kubernetes manifests, CI config), and the main call paths. Architecture components may cite source lines in `components[].sources`; the engine verifies every cited file and line against a pinned commit. Setup: `meta.repository` holds `url` (must match `git remote get-url origin`; a repo without an origin cannot be cited) and `revision`