diagram-design: An AI Agent Skill That Puts Architecture Diagrams on a 4px Grid
Diagram output that used to eat hours of manual alignment now comes out of an AI agent on a pixel-perfect grid, provided you scrub sensitive data before it reaches a cloud model. The token numbers—33,807 full, 12,956 compressed—give teams on metered APIs a concrete cost baseline for this workflow.
diagram-design is an AI agent skill that replaces manual box-dragging with a layout spec: 45 HTML and inline SVG templates aligned to a 4px grid, all using 1px thin lines, zero shadows, and WCAG-AA contrast. It handles architecture diagrams, sequence diagrams, state machines, ER models, swimlanes, Gantt charts, Sankey diagrams, Wardley maps, and more, exporting to HTML, SVG, or PNG, and importing .drawio, Mermaid, and .excalidraw files.
The install path is two commands—`npx skills add cathrynlavery/diagram-design` or `epx add cathrynlavery/diagram-design --skill diagram-design`. It runs inside OpenCode, Claude Code, Codex, Cursor, and GitHub Copilot, and pairs with Tencent's WorkBuddy office workbench, which integrates WeChat, WeCom, Tencent Docs, and Tencent Meeting and works across desktop and mobile. For teams worried about leaks, the skill runs locally under an MIT license with no servers or telemetry, but any workflow that calls a cloud LLM needs data anonymization first.
Token costs are concrete: a third-party test on October 21 measured 33,807 tokens for a full repo file sent directly, and 12,956 tokens after enabling local skeleton compression. Two limitations stand out: output layout can vary between runs because it depends on the underlying model, and the generated HTML/SVG isn't natively editable in draw.io or diffable in a PR.
The 4px grid, 1px lines, and zero shadows are treated as hard constraints in the prompt templates, which is why the output reads as professional rather than AI-generated; the article turns aesthetics into a specification.
Compressing the codebase skeleton before sending it to the model cuts token consumption by more than half (33,807 to 12,956), so the security practice of anonymization also functions as a cost-control lever.
The version mismatch across plugin.json, the summary, and SKILL.md signals that the project hasn't standardized its release metadata, which could complicate automated installation or debugging for teams pinning exact versions.