engineer-design-diagram
Generate production-grade engineering design diagrams (architecture, sequence, delta, drift) as self-contained dark-themed HTML files with accessible inline SVG. Grounds every diagram in real repo topology via DCI — package manifests, docker-compose, k8s, terraform, import graph. Four modes: generate, diff, trace, watch. Semantic OKLCH palette; Mermaid fallback for large graphs.
Installation
Open Claude Code and run this command:
/plugin install engineer-design-diagram@claude-code-plugins-plus
Use --global to install for all projects, or --project for current project only.
What It Does
Generate production-grade engineering design diagrams as single-file dark-themed HTML with inline SVG, grounded in real repository topology.
Skills (1) plugin-local skills
Generate production-grade engineering design diagrams (architecture, sequence, delta, drift) as self-contained dark-themed HTML files with accessible inline SVG.
How It Works
/design:generate # diagram from current repo
/design:diff PR-123 # diff a specific PR
/design:trace ./crash.log # sequence diagram from a stack trace
/design:watch # check for drift since last fingerprint
Or invoke the skill directly with natural language: "draw the architecture for this repo", "diagram this PR", "engineer design diagram".
Use Cases
examples/aws-serverless.html, examples/microservices.html, examples/tiny-monorepo/expected-architecture.html — reference outputs you can open directly to see what the skill produces.