diagram-c4-update

Generate an interactive C4 architecture diagram as a self-contained HTML page for any repository.

Updated May 26, 2026
One-click install
npx skills add https://github.com/cagriy/dev-skills --skill diagram-c4-update-cagriy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-c4-update
Source: https://github.com/cagriy/dev-skills/tree/main/skills/diagram-c4-update
Command: npx skills add https://github.com/cagriy/dev-skills --skill diagram-c4-update-cagriy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Understanding how a project is structured — its systems, containers, and components — requires reading scattered manifests, deploy descriptors, and documentation. This Skill automates that by deriving a C4 architecture model from repository evidence and rendering it as one interactive HTML page the reader can drill down through, from system context to containers to components. ## Core Features & Use Cases - Repo classification and evidence grounding: Classifies the repository as software, plugin/agent-asset, or documents, then harvests manifests, deploy descriptors, ADRs, and READMEs, attaching an evidence pointer to every modelled element. - Reconciled model with sticky decisions: Writes diagram/c4-model.json in a Structurizr-compatible schema, preserving hand-edited fields, recorded judgement calls, and grid positions across re-runs while retiring unevidenced elements instead of deleting them. - Template-rendered interactive HTML: Renders diagram/c4.html wholesale from a plugin template via token substitution, producing a self-contained page that works offline over file:// with no external dependencies. - Use Case: Point it at a microservices repo to produce a drill-down architecture page for onboarding, or run it in a docs-only repo to turn ADRs and design documents into a navigable C4 model. ## Quick Start Ask the assistant to build an interactive C4 architecture diagram for the current project, optionally specifying fresh or render mode.

Frequently Asked Questions about diagram-c4-update

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a C4 architecture diagram for my project?

Run the skill in the repository root and it classifies the repo, harvests evidence from manifests and docs, then writes diagram/c4-model.json and diagram/c4.html. Open the HTML file in a browser to drill down from system context to containers to components.

What is the difference between fresh and render mode?

Fresh mode sets aside any existing model and re-derives everything from scratch. Render mode skips derivation entirely and re-renders the HTML page from the model already on disk, which is useful after hand-editing col/row layout values.

Does the C4 diagram tool work outside a git repository?

Yes, it runs in any directory. If git rev-parse fails it falls back to the current working directory and notes the run is not repo-scoped, so a plain folder of architecture documents still works.

Will re-running the diagram overwrite my manual layout changes?

No. Hand-edited names, descriptions, and technology fields are detected via generated-value stamps and left alone, and col/row positions are preserved for surviving elements. Unevidenced elements are retired to a retired list rather than deleted.

What are the limitations of this C4 diagram approach?

It produces only the four standard C4 abstraction levels — no deployment, dynamic, or code-level views. It never invents architecture, so under-evidenced elements are reported as not modelled rather than drawn, and it uses no external tools like Structurizr or Java.