Claude Code C4 Architecture Skill for Mermaid Context and Container Diagrams
Describe people, systems, applications, and data stores at the right C4 level. Start with the system boundary and then expand the interactions between deployable units.
中文Install in Claude Code
Use Claude Code, the pinned skill directory, and a preview tool with Mermaid C4 support. Bring a confirmed list of actors and dependencies.
- Get the complete `cli-tool/components/skills/creative-design/c4-architecture` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/c4-architecture/SKILL.md`, open Claude Code at the project root, and call `/c4-architecture`.
Example task
Diagram a fictional community-event signup service. Put visitors, the signup system, and an email provider in the context view. Split the system into web app, API, and registration database in the container view.What to check
Both diagrams should preview successfully. The first shows who uses the system and its external dependencies. The second makes internal roles and call direction visible.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does the database belong in the system context view?
Use the context diagram for the system's external view. Show the internal database and applications in the container diagram with their responsibilities.