"Author, validate and render system diagrams as typed JSON with archify (architecture, workflow, sequence, dataflow, lifecycle). Use when a change touches orchestrator/temporal/, an ADR, an operation→CWFT mapping, or any docs/diagrams/archify/*.json, and when asked to visualise a component map, a runbook, a call sequence or a state machine for an mctlhq repository."
Resources
1Install
npx skillscat add mctlhq/mctl-gitops/archify-diagrams Install via the SkillsCat registry.
Archify diagrams
Diagrams in mctlhq repositories are code: a small JSON file next to the code
it describes, validated in CI like the code. Mermaid (docs/diagrams/*.mmd)
stays for pages GitHub renders itself; archify JSON is for anything that will
be presented, exported or embedded.
Where things live
| What | Path |
|---|---|
| Diagram sources | docs/diagrams/archify/<name>.<type>.json — type ∈ architecture, workflow, sequence, dataflow, lifecycle |
| archify toolkit | /opt/archify in the mctl-agents image (pinned commit); locally git clone https://github.com/tt-a1i/archify && (cd archify/archify && npm install) |
| CI | .github/workflows/diagrams.yml — validate --quality showcase on every PR, deliver + visual-check on main |
| Rendered HTML | never committed; CI uploads it as a job artifact |
Set ARCHIFY=/opt/archify/archify/bin/archify.mjs (or the local clone) andARCHIFY_CHROME to a Chromium binary when running visual-check.
Authoring loop (bounded — do not read renderer source)
- Pick the type from the question: components and boundaries →
architecture;
a process with lanes, gates and exceptions →workflow(schema_version: 2);
a call chain with time →sequence; a state machine →lifecycle;
a pipeline with stages →dataflow. - Read exactly one schema (
/opt/archify/archify/schemas/<type>.schema.json),common.schema.json, and one matching example from/opt/archify/archify/examples/.
Copy the field shape, never the facts. - Write the candidate first.
meta.quality_profilemust be"showcase".
At most 12 primary nodes, one obvious main path, sparse labels, fresh stable ids.
Omitmeta.visual_preset,meta.subtitle,meta.legend,meta.locale. - Validate after every edit:
node $ARCHIFY validate <type> <file> --quality showcase --json
A pass reports 9/9 artifact checks, 0 errors, 0 warnings. Fix only thesubjecta diagnostic names, choose from itssupportedFixes, re-run.
Stop and report truthfully if two rounds do not lower the error count. - Deliver once for acceptance:
node $ARCHIFY deliver <type> <file> <out>.html --quality showcase --json
thennode $ARCHIFY visual-check <out>.html --jsonwhen Chromium is available.
A non-zero exit is never a success.
mctl-specific rules
- Every node and label must be traceable to a file, constant or ADR in the
target repository. Name the source in a card (docs/adr/006,run_shepherd.py).
Never draw a component that does not exist yet without atag: "design". - Preserve exact identifiers: CWFT names (
mctl-agents-implement), status values
(review-fixing), MCP tool names (mctl_approve_dev_loop), env vars, paths. - Sub-labels must stay short (≈ 20 characters) — the showcase readability check
fails on 1440 px desktops otherwise. Put detail intagor in cards. - Brands: use only ids from
node $ARCHIFY brands "<name>" --json
(claude,github,postgresql,grafana,argo,kubernetes, …). Never guess. - Workflow v2 has six columns (
col0–5) and a lane band; place nodes by lane
and column, never by pixel. Prefer automatic routing; add arouteorvia
only after a diagnostic asks for one. Vertical edges across a lane gap cannot
carry labels longer than ≈ 6 characters. - Lifecycle: lanes other than
main/terminalshare one band; columnNof a
side lane sits beneath main columnN + 2. Afailurestate that can recover
needs a real transition back to an active state. - Sequence:
yvalues must stay inside the readable timeline (≈ 160 … viewBox
height − 90). Usecolumn_fit: "spread"for long participant names. - Commit the JSON with a Conventional Commit (
docs(diagrams): …); never commit
rendered HTML or PNGs. NoCo-Authored-Bytrailer.
Definition of done
validate --quality showcase --json→ok: true, 9/9 checks.- Every card item is a fact with a source, not a slogan.
- The diagram's
meta.viewstell the story in ≤ 3 guided chapters.