c4-modeling

Name: c4-modeling
Author: hack23

github.com/hack23開発1344 回インストール今日更新

リポジトリ

c4-modeling について

c4-modelingは、MermaidのC4図でソフトウェアアーキテクチャを記録する開発者向けスキルです。図の抽象レベルや記法、現在と将来の設計を文書化する方法を案内します。

主な機能

014つのC4抽象レベルのガイド
02Mermaid C4図の構文と例
03現状・将来のアーキテクチャ文書化
04図の明瞭さと命名規則

活用シーン

01システム境界と外部依存関係の記録
02コンテナと通信関係の可視化
03複雑なコンテナのコンポーネント説明

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hack23/homepage --skill c4-modeling

インストール後、Claude Code で/c4-modelingを入力して読み込まれたか確認します。

詳細

C4 モデルスキル

目的

このスキルでは、アーキテクチャドキュメント向けに、Mermaid 構文を使用して C4（Context、Container、Component、Code）モデルの図を作成するためのガイダンスを提供します。C4 モデルでは、Simon Brown の C4 モデル手法に従い、さまざまな抽象度でソフトウェアアーキテクチャを階層的に可視化できます。

ルール

C4 モデルのレベル

C4 モデルは、次の 4 つの抽象度で構成されます。

レベル 1：システムコンテキスト - システムが環境にどのように適合するかを示します
レベル 2：コンテナー - コンテナー間の通信と、テクノロジーに関する大まかな選択を示します
レベル 3：コンポーネント - コンテナーがどのようにコンポーネントに分解されるかを示します
レベル 4：コード - 実装の詳細を示します（任意。多くの場合、IDE で表示する方が適しています）

各レベルを使用するタイミング

システムコンテキスト図 - 必ず使用：

新しいシステムをドキュメント化する場合
システムの境界を示す場合
ユーザーと外部依存関係を特定する場合
アーキテクチャ決定記録で使用する場合
システムドキュメントのホームページで使用する場合

コンテナー図 - 必ず使用：

デプロイ可能なユニットが複数あるすべてのシステムで使用する場合
テクノロジースタックを示す場合
コンテナー間の通信をドキュメント化する場合
セキュリティアーキテクチャ（信頼境界）で使用する場合
デプロイメントドキュメントで使用する場合

コンポーネント図 - 使用を推奨：

多数のコンポーネントを含む複雑なコンテナーの場合
内部構造を説明する場合
新しい開発者のオンボーディングで使用する場合
技術的負債の分析で使用する場合

コード図 - 使用はまれ：

特定の複雑なパターンを説明する場合にのみ使用します
IDE での可視化に適しています
代わりに UML クラス図を検討してください

ドキュメントの要件

必須：

現在の状態と将来の状態の図を両方作成します（ARCHITECTURE.md と FUTURE_ARCHITECTURE.md）
各図にタイトル、説明、凡例を含めます
図全体で一貫した表記法を使用します
要素間の関係をドキュメント化します
使用するテクノロジーを記載します
アーキテクチャに変更があった場合は図をバージョン管理します
コードの変更に合わせて図を最新の状態に保ちます

禁止事項：

過度に詳細な図を作成しないでください（重要な要素に絞ります）
同じ図に異なる抽象度を混在させないでください
コンテナー図からテクノロジーの選択を省略しないでください
曖昧な関係ラベルを使用しないでください

C4 図の Mermaid 構文

Mermaid は、C4Context、C4Container、C4Component ディレクティブを使用した C4 図に対応しています。

例

例 1：システムコンテキスト図

C4Context
    title System Context Diagram for Hack23 CIA Platform

    Person(user, "Political Analyst", "A user analyzing political data")
    Person(admin, "Administrator", "Manages the system")
    
    System(cia, "Citizen Intelligence Agency", "Provides political data analysis and visualization")
    
    System_Ext(riksdagen, "Riksdagen API", "Swedish Parliament open data")
    System_Ext(worldbank, "World Bank API", "Global economic indicators")
    System_Ext(github, "GitHub API", "Politician activity tracking")
    System_Ext(auth, "OAuth Provider", "Authentication service")
    
    Rel(user, cia, "Uses", "HTTPS")
    Rel(admin, cia, "Administers", "HTTPS")
    Rel(cia, riksdagen, "Fetches data from", "HTTPS/REST")
    Rel(cia, worldbank, "Fetches data from", "HTTPS/REST")
    Rel(cia, github, "Tracks activity via", "HTTPS/REST")
    Rel(cia, auth, "Authenticates via", "OAuth 2.0")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

例 2：コンテナー図

C4Container
    title Container Diagram for Hack23 CIA Platform

    Person(user, "Political Analyst", "Analyzes political data")
    
    System_Boundary(cia, "Citizen Intelligence Agency") {
        Container(web, "Web Application", "React, JavaScript", "Provides political analysis UI")
        Container(api, "API Application", "Spring Boot, Java", "Provides data via REST API")
        Container(worker, "Background Worker", "Java", "Processes data updates")
        ContainerDb(db, "Database", "PostgreSQL", "Stores political data, analytics")
        ContainerDb(cache, "Cache", "Redis", "Caches frequently accessed data")
        Container(search, "Search Engine", "Elasticsearch", "Full-text search")
    }
    
    System_Ext(riksdagen, "Riksdagen API", "Parliament data")
    System_Ext(cdn, "CloudFront CDN", "Static content delivery")
    System_Ext(auth, "Auth0", "Authentication")
    
    Rel(user, web, "Uses", "HTTPS")
    Rel(user, cdn, "Loads static assets", "HTTPS")
    Rel(web, api, "Makes API calls", "HTTPS/REST")
    Rel(web, auth, "Authenticates", "OAuth 2.0")
    Rel(api, db, "Reads/Writes", "JDBC/SSL")
    Rel(api, cache, "Reads/Writes", "Redis Protocol")
    Rel(api, search, "Queries", "HTTPS/REST")
    Rel(worker, riksdagen, "Fetches data", "HTTPS/REST")
    Rel(worker, db, "Writes", "JDBC/SSL")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

例 3：コンポーネント図

C4Component
    title Component Diagram for CIA API Application

    Container(web, "Web Application", "React", "UI for political analysis")
    Container(worker, "Background Worker", "Java", "Data processing")
    ContainerDb(db, "Database", "PostgreSQL", "Data storage")
    
    Container_Boundary(api, "API Application") {
        Component(auth, "Authentication Controller", "Spring Security", "Handles authentication/authorization")
        Component(politician, "Politician Controller", "Spring MVC", "Manages politician data")
        Component(vote, "Vote Controller", "Spring MVC", "Manages voting records")
        Component(analytics, "Analytics Controller", "Spring MVC", "Provides analytics data")
        
        Component(politicianService, "Politician Service", "Spring Bean", "Business logic for politicians")
        Component(voteService, "Vote Service", "Spring Bean", "Business logic for votes")
        Component(analyticsService, "Analytics Service", "Spring Bean", "Calculates analytics")
        
        Component(dataAccess, "Data Access Layer", "Spring Data JPA", "Database access")
        Component(cacheLayer, "Cache Layer", "Spring Cache", "Caching abstraction")
    }
    
    Rel(web, auth, "Authenticates", "HTTPS/REST")
    Rel(web, politician, "Gets politician data", "HTTPS/REST")
    Rel(web, vote, "Gets voting records", "HTTPS/REST")
    Rel(web, analytics, "Gets analytics", "HTTPS/REST")
    
    Rel(politician, politicianService, "Uses")
    Rel(vote, voteService, "Uses")
    Rel(analytics, analyticsService, "Uses")
    
    Rel(politicianService, dataAccess, "Uses")
    Rel(voteService, dataAccess, "Uses")
    Rel(analyticsService, dataAccess, "Uses")
    
    Rel(politicianService, cacheLayer, "Uses")
    Rel(voteService, cacheLayer, "Uses")
    
    Rel(dataAccess, db, "Reads/Writes", "JDBC")
    Rel(worker, dataAccess, "Writes data")
    
    UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")

例 4：シンプルなホームページのコンテナー図

C4Container
    title Container Diagram for Hack23 Homepage

    Person(visitor, "Visitor", "Someone browsing the website")
    
    System_Boundary(homepage, "Hack23 Homepage") {
        Container(web, "Static Website", "HTML/CSS/JavaScript", "Corporate website")
    }
    
    System_Ext(s3, "AWS S3", "Static file storage")
    System_Ext(cloudfront, "AWS CloudFront", "CDN for global delivery")
    System_Ext(github, "GitHub Actions", "CI/CD pipeline")
    
    Rel(visitor, cloudfront, "Visits", "HTTPS")
    Rel(cloudfront, s3, "Fetches content", "HTTPS")
    Rel(github, s3, "Deploys to", "AWS SDK")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

例 5：信頼境界を含むセキュリティアーキテクチャ

C4Container
    title Security Architecture for CIA Platform

    Person(publicUser, "Public User", "Unauthenticated visitor")
    Person(authUser, "Authenticated User", "Registered analyst")
    Person(admin, "Administrator", "System administrator")
    
    System_Boundary(dmz, "DMZ - Public Access") {
        Container(cdn, "CloudFront CDN", "AWS", "Static content delivery")
        Container(waf, "Web Application Firewall", "AWS WAF", "Threat protection")
        Container(web, "Web Application", "React/S3", "Public UI")
    }
    
    System_Boundary(app, "Application Tier - Authenticated") {
        Container(api, "API Gateway", "AWS API Gateway", "API management, rate limiting")
        Container(lambda, "API Functions", "AWS Lambda", "Business logic")
        Container(auth, "Authentication", "AWS Cognito", "User authentication")
    }
    
    System_Boundary(data, "Data Tier - Restricted") {
        ContainerDb(db, "Database", "RDS PostgreSQL", "Encrypted data storage")
        ContainerDb(cache, "Cache", "ElastiCache Redis", "Session and data cache")
    }
    
    Rel(publicUser, cdn, "HTTPS", "Public access")
    Rel(cdn, waf, "Filtered traffic", "HTTPS")
    Rel(waf, web, "Protected traffic", "HTTPS")
    
    Rel(authUser, api, "HTTPS + JWT", "Authenticated access")
    Rel(api, auth, "Validates token", "AWS IAM")
    Rel(api, lambda, "Invokes", "AWS IAM")
    
    Rel(admin, api, "HTTPS + JWT + MFA", "Admin access")
    
    Rel(lambda, db, "JDBC over SSL", "VPC private subnet")
    Rel(lambda, cache, "Redis over TLS", "VPC private subnet")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

例 6：将来の状態のアーキテクチャ

C4Container
    title Future Container Diagram for Hack23 CIA Platform (2026)

    Person(user, "Analyst", "Political data analyst")
    
    System_Boundary(cia, "CIA Platform - Microservices Architecture") {
        Container(web, "Web Application", "Next.js/React", "Modern responsive UI")
        Container(mobile, "Mobile App", "React Native", "iOS/Android app")
        
        Container(gateway, "API Gateway", "Kong", "API management, auth")
        
        Container(politicianSvc, "Politician Service", "Go", "Politician data microservice")
        Container(voteSvc, "Vote Service", "Go", "Voting records microservice")
        Container(analyticsSvc, "Analytics Service", "Python", "ML-powered analytics")
        Container(notificationSvc, "Notification Service", "Node.js", "Real-time notifications")
        
        ContainerDb(politicianDb, "Politician DB", "PostgreSQL", "Politician data")
        ContainerDb(voteDb, "Vote DB", "PostgreSQL", "Voting records")
        ContainerDb(analyticsDb, "Analytics DB", "TimescaleDB", "Time-series analytics")
        
        Container(eventBus, "Event Bus", "Apache Kafka", "Event streaming")
        Container(cache, "Cache", "Redis Cluster", "Distributed cache")
        Container(search, "Search", "Elasticsearch", "Full-text search")
    }
    
    System_Ext(riksdagen, "Riksdagen API", "Parliament data")
    System_Ext(ml, "ML Platform", "TensorFlow Serving", "ML predictions")
    
    Rel(user, web, "Uses", "HTTPS")
    Rel(user, mobile, "Uses", "HTTPS")
    
    Rel(web, gateway, "API calls", "HTTPS/REST")
    Rel(mobile, gateway, "API calls", "HTTPS/REST")
    
    Rel(gateway, politicianSvc, "Routes", "gRPC")
    Rel(gateway, voteSvc, "Routes", "gRPC")
    Rel(gateway, analyticsSvc, "Routes", "gRPC")
    Rel(gateway, notificationSvc, "Routes", "WebSocket")
    
    Rel(politicianSvc, politicianDb, "Reads/Writes", "SQL")
    Rel(voteSvc, voteDb, "Reads/Writes", "SQL")
    Rel(analyticsSvc, analyticsDb, "Reads/Writes", "SQL")
    
    Rel(politicianSvc, eventBus, "Publishes events", "Kafka")
    Rel(voteSvc, eventBus, "Publishes events", "Kafka")
    Rel(analyticsSvc, eventBus, "Subscribes to events", "Kafka")
    Rel(notificationSvc, eventBus, "Subscribes to events", "Kafka")
    
    Rel(politicianSvc, cache, "Uses", "Redis")
    Rel(voteSvc, cache, "Uses", "Redis")
    Rel(analyticsSvc, ml, "Inference", "HTTPS/REST")
    
    UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")

ベストプラクティス

命名規則

必須：

要素には明確で説明的な名前を付けます
図全体で一貫した用語を使用します
コンテナー図ではテクノロジー／フレームワークを明記します
関係ラベルにプロトコルを含めます

視覚的な明瞭さ

推奨：

図ごとの要素数を制限します（最大 15～20 個）
関連する要素をグループ化します
要素の種類ごとに一貫した色を使用します
要素を論理的に配置します（データの流れは左から右へ）

ドキュメントの構成

必須：

図のタイトルを含めます
目的を説明する説明文を追加します
独自の表記法を使用する場合は凡例を示します
前提条件と制約をドキュメント化します
関連する図へのリンクを記載します

推奨されるファイル構成：

docs/
  architecture/
    ARCHITECTURE.md              # Current state C4 diagrams
    FUTURE_ARCHITECTURE.md       # Future state C4 diagrams
    decisions/                   # Architecture Decision Records
      ADR-001-microservices.md
      ADR-002-database-choice.md

ツールのサポート

Mermaid Live Editor

URL：https://mermaid.live/
図の作成とテストに使用します

VS Code 拡張機能

Mermaid Preview
Markdown Preview Mermaid Support

GitHub でのレンダリング

GitHub はMarkdown内のMermaid図を標準でレンダリングします

C4モデルの参考資料

C4モデル公式サイト：https://c4model.com/
Mermaid C4構文：https://mermaid.js.org/syntax/c4.html
Simon Brownのアーキテクチャ関連資料：https://www.architectis.je/

Markdown 対応

ログインしてコメント

基本情報

作者: hack23
リポジトリ: hack23/homepage
カテゴリ: 開発
インストール数: 44
GitHub スター: 13

問題を報告

c4-modeling

c4-modeling について

主な機能

活用シーン

インストール

詳細

C4 モデルスキル

目的

ルール

C4 モデルのレベル

各レベルを使用するタイミング

ドキュメントの要件

C4 図の Mermaid 構文

例

例 1：システムコンテキスト図

例 2：コンテナー図

例 3：コンポーネント図

例 4：シンプルなホームページのコンテナー図

例 5：信頼境界を含むセキュリティアーキテクチャ

例 6：将来の状態のアーキテクチャ

ベストプラクティス

命名規則

視覚的な明瞭さ

ドキュメントの構成

関連する ISMS ポリシー

関連ドキュメント

ツールのサポート

Mermaid Live Editor

VS Code 拡張機能

GitHub でのレンダリング

C4モデルの参考資料

コメント