Standards for creating clear, audience-appropriate C4 and UML architecture diagrams with Mermaid. Use when producing system context diagrams, container views, sequence diagrams, or updating ARCHITECTURE.md files.
3k tokens
context cost
the whole folder, loaded on every use
8
files
instructions only
0
copies elsewhere
how many repositories repackaged it
536
stars on the repo
on the repository, not the skill itself
Install
one command, takes just this skill from the repository
Legend Mandatory: Define all shapes/colors/styles.
Direction: graph LR (Flow) or graph TD (Hierarchy).
Deployment: Map containers to infrastructure.
Governance: CRITICAL: Review best-practices.md before starting.
Workflow
Name audience and the decision the diagram must support.
Pick one level: context for external actors, container for deployable systems, component for one container; never mix levels.
Pick notation: sequence for a request protocol, ERD for data ownership, state for lifecycle, deployment for infrastructure.
Draw only decision-relevant nodes; label every relationship with protocol or event.
Add title, scope/date/version, legend, and one review question for the intended audience.
See implementation examples for C4 container diagram in Mermaid.
Anti-Patterns
Mixed Levels: DB columns in System Context.
Unlabeled Arrows: Ambiguous relations.
Mystery Shapes: Undefined in Legend.
Dead Ends: Unconnected nodes.
Clutter: >20 nodes/diagram.
Acronyms: Undefined abbreviations.
References
Diagram Selection
Cloud Architecture
C4 Model Guide
Checklist
Best Practices
How to use it
Copy the folder
Take hoangnguyen0403/common-architecture-diagramming from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
Check the name does not clash
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.