C4

index.md

You can use the prompt to generate C4 documentation using GH Copilot. The sample response is for the Strapi ipen source project.

sample-prompt.md

You are a Software Architect AI Agent. Your mission is to generate C4 diagrams that clearly communicate the architecture of a software system across four levels of abstraction:

System Context Container Component Code

Each diagram should be written in Mermaid syntax, and each section should include:

A brief explanation of the goal of the diagram. The scope it covers. The format and key elements to include.

I don't want you to cover one service like UserService only I want you to cover the entire application (all services and all layers).

1. System Context Diagram 🎯 Goal: To show how the system fits into the larger environment—its users (people) and external systems it interacts with. 📦 Scope: Entire system as a black box. 🧱 Format & Elements:

System under consideration External users (people) External systems Relationships between them

graph TB
    user1([User])
    system([Your Software System])
    ext1([External System 1])
    ext2([External System 2])

    user1 -->|Uses| system
    system -->|Fetches data from| ext1
    system -->|Sends notifications to| ext2

Loading

2. Container Diagram 🎯 Goal: To show the high-level technology architecture—how the system is made up of containers (applications, databases, services). 📦 Scope: Internal structure of the system. 🧱 Format & Elements:

Containers (e.g., web app, mobile app, database) Technologies used Interactions between containers and external actors

graph TB
    user1([User])
    webApp([Web Application])
    mobileApp([Mobile App])
    api([API Server])
    db([Database])

    user1 --> webApp
    user1 --> mobileApp
    webApp --> api
    mobileApp --> api
    api --> db

Loading

3. Component Diagram 🎯 Goal: To break down a container into its components and show how they interact. 📦 Scope: One container (e.g., the API server). 🧱 Format & Elements:

Components (e.g., controllers, services, repositories) Interfaces and interactions Technologies or frameworks used

graph TB
    controller([UserController])
    service([UserService])
    repo([UserRepository])
    db([Database])

    controller --> service
    service --> repo
    repo --> db

Loading

4. Code (Class) Diagram 🎯 Goal: To show the internal structure of a component, typically at the class or module level. 📦 Scope: One component (e.g., UserService). 🧱 Format & Elements:

Classes or modules Methods and properties Relationships (e.g., inheritance, composition)

classDiagram
    class UserService {
        +createUser()
        +getUser()
        -validateUserData()
    }

    class UserRepository {
        +save()
        +findById()
    }

    UserService --> UserRepository

Loading

sample-response.md

With context https://github.com/strapi/strapi

Strapi: Comprehensive C4 Diagrams

This document presents Mermaid C4 diagrams for Strapi, covering the whole application at four levels:

---

1. System Context Diagram

Goal:
Show Strapi as a black box in its environment: all user roles and external systems.

Scope:

• Strapi CMS platform
• All user types (Admin, Editor, Developer, API Consumer)
• External systems (DB, Email, Auth, Storage, Third-party APIs)

Key Elements:

• Strapi as the system
• All external people & systems
• High-level relationships

graph TB
    admin([Admin User])
    editor([Content Editor])
    developer([Developer])
    apiConsumer([API Consumer])
    strapi([Strapi CMS])
    db([Database])
    email([Email Service])
    auth([External Auth Provider])
    storage([Cloud Storage])
    thirdapi([Third-party API])
    web([Website])
    mobile([Mobile App])

    admin -->|Configure & Manage| strapi
    editor -->|Create/Edit Content| strapi
    developer -->|Extend & Integrate| strapi
    apiConsumer -->|Consume API| strapi
    web -->|Fetches content| strapi
    mobile -->|Fetches content| strapi

    strapi -->|Stores & Retrieves Data| db
    strapi -->|Sends Emails| email
    strapi -->|Authenticates Users| auth
    strapi -->|Manages Media| storage
    strapi -->|Integrates| thirdapi

Loading

---

2. Container Diagram

Goal:
Show all major containers and their technologies, with connections.

Scope:

• All Strapi containers (Admin Panel, API Server, Database, File Storage, Plugin Host, Job Queue, etc.)
• Technologies used
• Interactions between containers & external actors

Key Elements:

• All main containers inside Strapi
• Technologies
• Data flows

graph TB
    %% API Server Components
    router(["Router"])
    authMiddleware(["Auth Middleware"])
    errorHandler(["Error Handler"])
    userController(["UserController"])
    contentController(["ContentController"])
    userService(["UserService"])
    contentService(["ContentService"])
    userModel(["UserModel"])
    contentModel(["ContentModel"])
    fileService(["FileService"])
    jobQueue(["JobQueue"])
    pluginLoader(["Plugin Loader"])
    pluginAPI(["Plugin API"])
    db(["Database"])
    storage(["File Storage"])

    %% Admin Panel Components
    adminUI(["Admin UI"])
    loginView(["Login View"])
    contentEditor(["Content Editor"])
    mediaManager(["Media Manager"])
    settingsPanel(["Settings Panel"])
    apiClient(["API Client"])

    %% Plugin Host Components
    pluginRegistry(["Plugin Registry"])
    hookManager(["Hook Manager"])
    
    %% API Server Relations
    router -->|Routes| userController
    router --> contentController
    userController -->|Business logic| userService
    contentController --> contentService
    userController --> authMiddleware
    userController --> errorHandler
    userService --> userModel
    contentService --> contentModel
    userModel --> db
    contentModel --> db
    fileService --> storage
    contentService --> fileService
    jobQueue -->|Background jobs| contentService
    pluginLoader --> pluginAPI
    pluginAPI --> userService
    pluginAPI --> contentService

    %% Admin Panel Relations
    adminUI --> loginView
    adminUI --> contentEditor
    adminUI --> mediaManager
    adminUI --> settingsPanel
    adminUI --> apiClient
    apiClient --> router

    %% Plugin Host Relations
    pluginRegistry --> hookManager
    hookManager --> pluginAPI

    %% Cross-container Relations
    pluginLoader --> pluginRegistry
    pluginLoader --> hookManager

Loading

---

3. Component Diagram

Goal:
Break down the API Server, Admin Panel, and Plugin Host into their main components and show relationships.

Scope:

• All major components within the core containers (API Server, Admin Panel, Plugin Host)
• Controllers, Services, Models, Middlewares, UI Components, Plugin APIs

Key Elements:

• Components (controllers, services, models, middlewares, UI views, plugin hooks, etc.)
• Interactions

graph TB
    %% API Server Components
    router([Router])
    authMiddleware([Auth Middleware])
    errorHandler([Error Handler])
    userController([UserController])
    contentController([ContentController])
    userService([UserService])
    contentService([ContentService])
    userModel([UserModel])
    contentModel([ContentModel])
    fileService([FileService])
    jobQueue([JobQueue])
    pluginLoader([Plugin Loader])
    pluginAPI([Plugin API])
    db([Database])
    storage([File Storage])

    %% Admin Panel Components
    adminUI([Admin UI])
    loginView([Login View])
    contentEditor([Content Editor])
    mediaManager([Media Manager])
    settingsPanel([Settings Panel])
    apiClient([API Client])

    %% Plugin Host Components
    pluginRegistry([Plugin Registry])
    hookManager([Hook Manager])
    
    %% API Server Relations
    router -->|Routes| userController
    router --> contentController
    userController -->|Business logic| userService
    contentController --> contentService
    userController --> authMiddleware
    userController --> errorHandler
    userService --> userModel
    contentService --> contentModel
    userModel --> db
    contentModel --> db
    fileService --> storage
    contentService --> fileService
    jobQueue -->|Background jobs| contentService
    pluginLoader --> pluginAPI
    pluginAPI --> userService
    pluginAPI --> contentService

    %% Admin Panel Relations
    adminUI --> loginView
    adminUI --> contentEditor
    adminUI --> mediaManager
    adminUI --> settingsPanel
    adminUI --> apiClient
    apiClient --> router

    %% Plugin Host Relations
    pluginRegistry --> hookManager
    hookManager --> pluginAPI

    %% Cross-container Relations
    pluginLoader --> pluginRegistry
    pluginLoader --> hookManager

Loading

---

4. Code (Class/Module) Diagram

Goal:
Show the internal organization of several key classes/modules across the main application, including relationships.

Scope:

• Multiple service classes (UserService, ContentService, FileService, PluginManager, AuthService, JobQueue)
• Models and external service integrations

Key Elements:

• Classes/modules, methods, properties, dependencies, relationships

classDiagram
    class UserService {
        +registerUser(data)
        +loginUser(credentials)
        +getProfile(id)
        +updateUser(id, data)
        -validateUserData(data)
        -hashPassword(password)
        -sendWelcomeEmail(user)
    }

    class ContentService {
        +createContent(data)
        +updateContent(id, data)
        +deleteContent(id)
        +getContent(id)
        -validateContent(data)
        -triggerPublishHooks(content)
    }

    class FileService {
        +uploadFile(file)
        +deleteFile(id)
        +getFile(id)
        -generateFileUrl(file)
    }

    class AuthService {
        +verifyToken(token)
        +generateToken(user)
        +hashPassword(password)
        +comparePassword(raw, hash)
    }

    class JobQueue {
        +addJob(job)
        +processJob(job)
        +getStatus(jobId)
    }

    class PluginManager {
        +registerPlugin(plugin)
        +loadPlugins()
        +invokeHook(hookName, args)
    }

    class UserModel {
        +save(data)
        +findById(id)
        +findByEmail(email)
        +update(id, data)
        +delete(id)
    }

    class ContentModel {
        +save(data)
        +findById(id)
        +findAll(filters)
        +update(id, data)
        +delete(id)
    }

    UserService --> UserModel
    UserService --> AuthService
    UserService --> FileService
    UserService --> JobQueue
    UserService --> PluginManager

    ContentService --> ContentModel
    ContentService --> FileService
    ContentService --> JobQueue
    ContentService --> PluginManager

    FileService --> JobQueue
    PluginManager --> JobQueue
    JobQueue --> UserModel
    JobQueue --> ContentModel

Loading

---

How to use:

• Paste each Mermaid block into Markdown, your docs, or Mermaid Live Editor for visualization.
• Adapt the diagrams as needed for your Strapi implementation or extensions.
• Use these diagrams for onboarding, documentation, code reviews, or architectural discussions.

https://docs.mermaidchart.com/mermaid-oss/syntax/c4.html#c4-diagrams