C4 Architecture Skill
Skill Verified ActiveGenerate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
To help users create professional, audience-appropriate architecture documentation using the C4 model and Mermaid diagrams, simplifying the visualization of software structure and design decisions.
Features
- Generate C4 Context, Container, Component, Deployment, and Dynamic diagrams
- Support for microservices and event-driven architectures
- Audience-appropriate diagram selection and detail
- Adherence to C4 model best practices and anti-patterns
- Mermaid syntax output for broad compatibility
Use Cases
- Documenting system architecture for various stakeholders
- Visualizing software structure and component relationships
- Creating diagrams for technical documentation and presentations
- Explaining complex system designs through clear visualizations
Non-Goals
- Generating UML diagrams or other diagramming formats
- Interacting with live systems to discover architecture
- Providing runtime analysis or code quality checks
Workflow
- Understand scope and audience
- Analyze system structure (conceptually)
- Generate appropriate C4 diagram(s) using Mermaid syntax
- Document diagrams in markdown files with context
Practices
- Architecture Documentation
- Diagramming Best Practices
- C4 Model Implementation
Trust
- info:Issues Attention17 issues opened and 4 closed in the last 90 days, indicating slow response times from maintainers.
Installation
npx skills add davila7/claude-code-templatesRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Pathfinder
100Map a codebase into feature-grouped flowcharts, identify duplicated concerns across features, and propose a unified architecture. Use when asked to "find the ideal path," unify duplicated systems, or audit architecture before a refactor. Emits a proposed unified flowchart plus per-system /make-plan prompts.
Sf Diagram Mermaid
99Salesforce architecture diagrams using Mermaid with ASCII fallback. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use sf-diagram-nanobananapro), or asks about non-Salesforce systems.
Figma Generate Diagram Prerequisite
97MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
Azure Resource Visualizer
96Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. WHEN: create architecture diagram, visualize Azure resources, show resource relationships, generate Mermaid diagram, analyze resource group, diagram my resources, architecture visualization, resource topology, map Azure infrastructure.
V3 Ddd Architecture
100Domain-Driven Design architecture for claude-flow v3. Implements modular, bounded context architecture with clean separation of concerns and microkernel pattern.
Understand
100Analyze a codebase to produce an interactive knowledge graph for understanding architecture, components, and relationships