メニュー
C4 architectural modeling for documenting software architecture. Use when creating architecture diagrams, planning new systems, communicating with stakeholders, or conducting architecture reviews.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | c4-modeling |
| description | C4 architectural modeling for documenting software architecture. Use when creating architecture diagrams, planning new systems, communicating with stakeholders, or conducting architecture reviews. |
Create hierarchical architecture diagrams at four abstraction levels using the C4 model and Mermaid syntax.
| Variable | Default | Description |
|---|---|---|
| DEFAULT_LEVEL | context | Start with context, container, component, or code |
| OUTPUT_FORMAT | mermaid | mermaid, structurizr, plantuml |
| INCLUDE_LEGEND | true | Add legend to diagrams |
MANDATORY - Follow the Workflow steps below when creating C4 diagrams.
If you're about to:
STOP -> Check the appropriate level guidelines in reference/level-guidelines.md -> Then proceed
| Level | Name | Purpose | Audience |
|---|---|---|---|
| 1 | Context | System in environment | Everyone |
| 2 | Container | Major components | Technical stakeholders |
| 3 | Component | Internal structure | Developers |
| 4 | Code | Implementation | Developers (sparingly) |
Show: System, users, external systems Hide: Internal details, databases, technology
Show: Applications, APIs, databases, queues Hide: Internal structure, classes
Show: Modules, services, repositories Hide: Individual classes, functions
Show: Classes, interfaces, key abstractions Use: Only for complex/critical areas
See reference/level-guidelines.md for detailed guidance.
See reference/mermaid-syntax.md for Mermaid C4 syntax.
C4Context
title System Context Diagram
Person(user, "User", "Description")
System(system, "System", "Description")
System_Ext(ext, "External", "Description")
Rel(user, system, "Uses")
C4Container
title Container Diagram
Container(web, "Web App", "React", "UI")
Container(api, "API", "Node.js", "Backend")
ContainerDb(db, "Database", "PostgreSQL", "Storage")
Rel(web, api, "Calls", "REST")
See reference/mermaid-syntax.md for complete syntax reference.
Diagrams should include:
Generic BAML patterns for type-safe LLM prompting. Covers schema design, DTO generation, client wrappers, and cross-language codegen. Framework-agnostic.
Browser automation for documentation discovery. Use when curl fails on JS-rendered sites, when detecting available browser tools, or when configuring browser-based documentation collection.
Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.
Patterns and techniques for analyzing brownfield codebases. Use when onboarding to unfamiliar code, preparing for refactoring, conducting architecture reviews, or identifying technical debt.
Detect new imports in modified files and auto-install missing dependencies. Works with npm, uv, pip, cargo, go mod, and other package managers. Triggers after code implementation to keep manifests in sync.
Navigate hierarchical ai-docs indexes to find documentation. Check local docs FIRST for speed and curated context before web searching. Covers Claude Code, BAML, MCP, and other tracked libraries.