diagram
Produce diagrams two ways: Mermaid DSL copied to the clipboard for mermaid.live or excalidraw (default; also ERD, class, gantt), or a polished self-contained interactive HTML through the local archify
SKILL.mdai/skills/diagram/SKILL.md
GitHubCreate a diagram for: $ARGUMENTS
Route
- Mermaid (default) — quick or editable output, and every flowchart, sequence, class, state, ER, or gantt diagram.
- archify — only when the user asks for a polished, shareable, or interactive HTML (or names archify) AND the diagram is an architecture, workflow, sequence, data-flow, or lifecycle/state diagram. Everything else stays on Mermaid.
- Engine missing (
${AI_VENDOR_DIR:-~/.local/share/ai-vendor}/archifyabsent, or nonode): say so, offerbash ~/.config/ai/scripts/vendor.sh sync archify(network clone of the latest release — run only with 대협's consent), and deliver Mermaid meanwhile. Environments without a shell (Claude Cowork, Codex desktop app) always take the Mermaid route.
Mermaid
- Pick the fitting type (flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt) and output the DSL in a ```mermaid block.
- Save to
/tmp/diagram.mmdand copy it to the clipboard (pbcopy;wl-copy/xclipon Linux). - Tell the user: preview at mermaid.live, or excalidraw.com → Menu → Mermaid to Excalidraw. When layout matters (many cross-group edges), render it first — a local page loading mermaid from the jsdelivr CDN, screenshotted with headless Chrome — and look before handing over.
Excalidraw import constraints (hard)
- No
\ninside node text — it renders literally. Use commas or split into nodes. - No HTML tags or markdown inside node text.
classDef/:::classonly in flowchart, classDiagram, stateDiagram — never in sequenceDiagram, erDiagram, gantt.
archify
Engine root: ENGINE="${AI_VENDOR_DIR:-$HOME/.local/share/ai-vendor}/archify/archify" (installed by ai/scripts/vendor.sh sync archify; vendor.sh check archify compares it with the latest release). The engine's SKILL.md is the authority and changes with each release — read it fresh every time rather than relying on section names from an earlier version.
- Read
$ENGINE/SKILL.mdand follow its native-diagram path — choose the type, read the schema and example it names, write the candidate, then onefinalizerun that validates, delivers, and browser-checks it — calling the CLI asnode "$ENGINE/bin/archify.mjs". Its one-page explainer mode is outside this skill. A non-zerofinalizeis never success; its repair limit applies, and when it is reached, stop and report the remaining diagnostics. - One override: work in
/tmp/archify, so the engine's per-request.archify/<type>-<slug>-<timestamp>/folder lands there, unless 대협 names a path. When a receipt's update notice fires, relay it and point 대협 tobash ~/.config/ai/scripts/vendor.sh sync archify— never update mid-task. - Look before reporting — required here, though the engine calls it optional: once
finalizepasses, runnode "$ENGINE/bin/archify.mjs" visual-check <output.html> --summary --require-provenancewith the same--out-diras thefinalizethat produced that HTML (none after a first run), and read the screenshots it lists. When it cannot run here, take headless Chrome screenshots of the delivered HTML at 1440×900 and at a tall viewport ("/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --hide-scrollbars --window-size=1440,900 --screenshot=<out.png> file://<html>;brave-origin/chromium/google-chromeon Linux — whichever is on PATH) and read those. Fix what the automated gates cannot see — overlapping boundaries, clipped rows, dead space — then rerunfinalizeandvisual-checkwith one fresh--out-dir, as the engine's delivery contract says. Never open a visible browser unless asked. - Report as the engine's output guidance says (a clickable link to the HTML first, no command or receipt recap), and say whether the screenshots were looked at and what was skipped.