engineer-design-diagram
v0.5.0Generate 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.
by Jeremy LongshoreMIT2.6kupdated 10 hours ago
Source
git clone https://github.com/jeremylongshore/claude-code-plugins-plus-skillsClone the source, then follow the repository's marketplace instructions for your runtime. The plugin root is plugins/devops/engineer-design-diagram/ inside the repository.
Layout
├── .claude-plugin/plugin.json└── skills/engineer-design-diagram/SKILL.md
Skills1
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 from a live repo, diff a PR, trace a stack into a sequence diagram, or watch for drift against a fingerprint. Semantic OKLCH palette; Mermaid fallback for large graphs. Use when visualizing system architecture, reviewing a PR for structural change, diagnosing an incident from a trace, onboarding to a codebase, or detecting architectural drift. Trigger with "/design:generate", "/design:diff", "/design:trace", "/design:watch", "draw the architecture", "diagram this PR", "engineer design diagram", or "architecture diagram".
Manifests1
{
"name": "engineer-design-diagram",
"version": "0.5.0",
"description": "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.",
"author": {
"name": "Jeremy Longshore",
"email": "[email protected]"
},
"repository": "https://github.com/jeremylongshore/claude-code-plugins-plus-skills",
"homepage": "https://tonsofskills.com/plugins/devops/engineer-design-diagram",
"license": "MIT",
"keywords": [
"architecture",
"diagram",
"visualization",
"svg",
"html",
"pr-review",
"drift-detection",
"sequence-diagram",
"engineering-design",
"documentation",
"onboarding"
]
}