Agent skill · design visual · jeremylongshore
engineer-design-diagram
Generate production-grade engineering design diagrams (architecture,\
Why this skill is useful
Adds a comprehensive diagram generation capability grounded in real repository topology, including executable commands for generating various types of diagrams.
What it needs
Requires docker, kubectl, terraform installed locally. About 9k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Engineer Design Diagram Generates production-grade engineering design diagrams as single-file HTML with inline SVG, grounded in real repository topology. Credit: design palette + arrow-masking pattern inspired by Cocoon AI's architecture-diagram-generator (MIT). See THIRDPARTYLICENSES.md. Overview Most diagramming tools produce pretty pictures disconnected from reality. This skill does the opposite: it reads the actual repo (package manifests, docker-compose, k8s, terraform, import graph) and emits a diagram that reflects the real system. It also knows how the system changed — PR-diff mode highlights structural deltas, trace mode turns a stack/log into a sequence diagram, and drift mode detects when the architecture has wandered from a stored fingerprint. Four modes share a common pipeline (DCI grounding → node/edge graph → template fill → fingerprint write). Output is a single self-contained HTML file that opens in any browser, plus a Mermaid text block for copy-paste into docs. Dark theme with semantic OKLCH color coding by component role. Accessible by default (ARIA, <title>/<desc>, reduced-motion, keyboard navigation). Layout Philosophy — pick the shape before you draw Dense technical systems want to render wide. This is how Anthropic docs, Linear docs, and Vercel architecture pages present multi-component systems: a sticky left rail for context (nav, invariants, legend) and a generous main column for the diagram itself. Mimic that pattern when your content is dense, and use the simpler single-SVG hero when it isn't. Two supported output shapes, one decision up front: Shape Use when Template ------- ---------- ---------- Single-SVG hero (classic) ≤8 nodes, one-screen takeaway, no sub-grouping, no accompanying explanation needed templates/base.html Docs-layout page (widescreen) ≥8 nodes, multiple planes/groupings/sub-blocks, want invariants + detail cards + legend alongside the diagram templates/docs-layout.html Widescreen-first for docs-layout. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/engineer-design-diagram--af58fd