c4-level3-component

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

C4 Level 3: Component Diagram & Folder Mapping

C4 Level 3：组件图与文件夹映射

Level 3 focuses on the internal architecture of a single container, bridging the gap between high-level containers and low-level code. This is where architecture patterns (Clean, Hexagonal, Onion, Vertical Slice) become visible.

"A component is a grouping of related functionality behind a well-defined interface." — Simon Brown

Level 3 专注于单个容器的内部架构，衔接高层容器与底层代码之间的间隙。在这里，架构模式（Clean、Hexagonal、Onion、Vertical Slice）会清晰呈现。

“组件是在定义清晰的接口背后，对相关功能的一组归类。”——Simon Brown

🎯 Stakeholder Focus

🎯 干系人关注点

Stakeholder	What they need from L3	Questions they ask
Developers	Module boundaries, where to add new code	"Where does the payment logic go?"
Tech Leads	Layering, Separation of Concerns	"Is our dependency direction correct?"
Architects	Design consistency, pattern adherence	"Are we following Clean Architecture?"
New Hires	Onboarding, codebase navigation	"How is this container organized?"

干系人	他们从Level 3中需要什么	常问问题
开发人员	模块边界、新增代码的位置	“支付逻辑应该放在哪里？”
技术主管	分层设计、关注点分离情况	“我们的依赖方向是否正确？”
架构师	设计一致性、模式遵循情况	“我们是否遵循Clean Architecture？”
新员工	入职指引、代码库导航方法	“这个容器是如何组织的？”

🏗️ Architecture Patterns & Component Mapping

🏗️ 架构模式与组件映射

Pattern 1: Layered Architecture (Traditional)

模式1：分层架构（传统型）

┌─────────────────────────────────────────┐
│  Presentation Layer                     │
│  ├─ Controller/Handler                  │
│  └─ DTO/ViewModel                       │
├─────────────────────────────────────────┤
│  Business Logic Layer                   │
│  ├─ Service                             │
│  └─ Domain Model (Entity, VO)           │
├─────────────────────────────────────────┤
│  Data Access Layer                      │
│  ├─ Repository                          │
│  └─ ORM/Data Mapper                     │
└─────────────────────────────────────────┘

Folder Mapping:

src/
├── api/              → Presentation (controllers, handlers)
├── services/         → Business Logic (application services)
├── domain/           → Domain Model (entities, value objects)
├── repositories/     → Data Access (repository interfaces + implementations)
└── dto/              → Data Transfer Objects

┌─────────────────────────────────────────┐
│  Presentation Layer                     │
│  ├─ Controller/Handler                  │
│  └─ DTO/ViewModel                       │
├─────────────────────────────────────────┤
│  Business Logic Layer                   │
│  ├─ Service                             │
│  └─ Domain Model (Entity, VO)           │
├─────────────────────────────────────────┤
│  Data Access Layer                      │
│  ├─ Repository                          │
│  └─ ORM/Data Mapper                     │
└─────────────────────────────────────────┘

文件夹映射：

src/
├── api/              → Presentation层（控制器、处理器）
├── services/         → 业务逻辑层（应用服务）
├── domain/           → 领域模型（实体、值对象）
├── repositories/     → 数据访问层（仓储接口+实现）
└── dto/              → 数据传输对象

Pattern 2: Clean Architecture (Robert C. Martin)

模式2：Clean Architecture（Robert C. Martin）

         ┌─────────────┐
         │  Frameworks │  ← Outer: UI, DB, External APIs
         │  & Drivers  │
         └──────┬──────┘
                │ depends on
         ┌──────┴──────┐
         │  Interface  │  ← Adapters: Controllers, Presenters, Gateways
         │   Adapters  │
         └──────┬──────┘
                │ depends on
         ┌──────┴──────┐
         │  Use Cases  │  ← Application Business Rules
         │  (Services) │
         └──────┬──────┘
                │ depends on
         ┌──────┴──────┐
         │   Entities  │  ← Enterprise Business Rules (innermost)
         └─────────────┘

Dependency Rule: Dependencies point INWARD only. Inner circles know nothing about outer circles.

Folder Mapping (Go example):

internal/
├── domain/           → Entities (pure business logic, no dependencies)
│   ├── order.go
│   └── value_objects.go
├── usecase/          → Use Cases (application services)
│   ├── place_order.go
│   └── cancel_order.go
├── interface/        → Adapters (driven + driving)
│   ├── controller/   → HTTP handlers
│   ├── presenter/    → Response formatters
│   └── gateway/      → External API clients
└── infrastructure/   → Frameworks (DB, cache, message queue)
    ├── repository/   → DB implementations
    └── messaging/    → Event publishers

         ┌─────────────┐
         │  Frameworks │  ← 外层：UI、数据库、外部API
         │  & Drivers  │
         └──────┬──────┘
                │ 依赖于
         ┌──────┴──────┐
         │  Interface  │  ← 适配器层：控制器、呈现器、网关
         │   Adapters  │
         └──────┬──────┘
                │ 依赖于
         ┌──────┴──────┐
         │  Use Cases  │  ← 应用业务规则
         │  (Services) │
         └──────┬──────┘
                │ 依赖于
         ┌──────┴──────┐
         │   Entities  │  ← 企业业务规则（最内层）
         └─────────────┘

依赖规则： 依赖仅指向内部。内圈对外圈一无所知。

文件夹映射（Go示例）：

internal/
├── domain/           → Entities（纯业务逻辑，无依赖）
│   ├── order.go
│   └── value_objects.go
├── usecase/          → Use Cases（应用服务）
│   ├── place_order.go
│   └── cancel_order.go
├── interface/        → Adapters（驱动型+被驱动型）
│   ├── controller/   → HTTP处理器
│   ├── presenter/    → 响应格式化器
│   └── gateway/      → 外部API客户端
└── infrastructure/   → Frameworks（数据库、缓存、消息队列）
    ├── repository/   → 数据库实现
    └── messaging/    → 事件发布器

Pattern 3: Hexagonal Architecture (Ports & Adapters)

模式3：Hexagonal Architecture（端口与适配器）

              ┌──────────────┐
    ┌─────────│   Driving    │─────────┐
    │         │   Adapters   │         │
    │  HTTP   │  (Primary)   │  CLI    │
    │ Handler │              │ Tool    │
    └────┬────┴──────────────┴────┬────┘
         │                        │
         │    ┌──────────────┐    │
         └───▶│   Application │◀───┘
              │   Core (Domain)│
              │               │
         ┌───▶│   Ports       │◀───┐
         │    └──────────────┘    │
    ┌────┴────┬──────────────┬────┴────┐
    │  DB     │   External   │ Message │
    │ Adapter │   API Client │ Queue   │
    │(Driven) │   (Driven)   │Adapter  │
    └─────────┴──────────────┴─────────┘
         Driven Adapters (Secondary)

Key Concepts:

Port: Interface defining what the application needs (driven) or provides (driving)
Adapter: Implementation of a port for a specific technology
Domain: Pure business logic, zero external dependencies

Folder Mapping:

src/
├── application/          → Use cases, domain services
│   ├── port/
│   │   ├── in/          → Driving ports (interfaces app exposes)
│   │   └── out/         → Driven ports (interfaces app needs)
│   └── service/
├── domain/              → Entities, value objects, domain events
└── adapter/
    ├── in/              → Driving adapters (HTTP, CLI, messaging)
    │   ├── web/
    │   └── cli/
    └── out/             → Driven adapters (DB, external APIs)
        ├── persistence/
        └── external/

              ┌──────────────┐
    ┌─────────│   Driving    │─────────┐
    │         │   Adapters   │         │
    │  HTTP   │  (Primary)   │  CLI    │
    │ Handler │              │ Tool    │
    └────┬────┴──────────────┴────┬────┘
         │                        │
         │    ┌──────────────┐    │
         └───▶│   Application │◀───┘
              │   Core (Domain)│
              │               │
         ┌───▶│   Ports       │◀───┐
         │    └──────────────┘    │
    ┌────┴────┬──────────────┬────┴────┐
    │  DB     │   External   │ Message │
    │ Adapter │   API Client │ Queue   │
    │(Driven) │   (Driven)   │Adapter  │
    └─────────┴──────────────┴─────────┘
         Driven Adapters (Secondary)

核心概念：

Port（端口）： 定义应用所需（被驱动型）或提供（驱动型）功能的接口
Adapter（适配器）： 针对特定技术实现的端口
Domain（领域）： 纯业务逻辑，无任何外部依赖

文件夹映射：

src/
├── application/          → 用例、领域服务
│   ├── port/
│   │   ├── in/          → 驱动型端口（应用对外暴露的接口）
│   │   └── out/         → 被驱动型端口（应用所需的接口）
│   └── service/
├── domain/              → 实体、值对象、领域事件
└── adapter/
    ├── in/              → 驱动型适配器（HTTP、CLI、消息服务）
    │   ├── web/
    │   └── cli/
    └── out/             → 被驱动型适配器（数据库、外部API）
        ├── persistence/
        └── external/

Pattern 4: Vertical Slice Architecture

模式4：Vertical Slice Architecture

src/
├── features/
│   ├── place_order/          → One folder per feature
│   │   ├── handler.go        → HTTP handler
│   │   ├── command.go        → CQRS command
│   │   ├── validator.go      → Input validation
│   │   ├── service.go        → Business logic
│   │   ├── repository.go     → Data access
│   │   └── dto.go            → Request/response types
│   │
│   ├── cancel_order/
│   │   ├── handler.go
│   │   ├── command.go
│   │   └── ...
│   │
│   └── list_orders/
│       ├── handler.go
│       ├── query.go          → CQRS query
│       └── ...
│
└── shared/                   → Cross-cutting concerns
    ├── middleware/
    ├── auth/
    └── logging/

Principle: Each feature is self-contained. No horizontal layers. Changes to "Place Order" only touch

features/place_order/

src/
├── features/
│   ├── place_order/          → 每个功能对应一个文件夹
│   │   ├── handler.go        → HTTP处理器
│   │   ├── command.go        → CQRS命令
│   │   ├── validator.go      → 输入验证
│   │   ├── service.go        → 业务逻辑
│   │   ├── repository.go     → 数据访问
│   │   └── dto.go            → 请求/响应类型
│   │
│   ├── cancel_order/
│   │   ├── handler.go
│   │   ├── command.go
│   │   └── ...
│   │
│   └── list_orders/
│       ├── handler.go
│       ├── query.go          → CQRS查询
│       └── ...
│
└── shared/                   → 横切关注点
    ├── middleware/
    ├── auth/
    └── logging/

原则： 每个功能都是独立自洽的。没有横向分层。对“下单”功能的修改仅涉及

features/place_order/

目录。

📝 Mermaid Templates

📝 Mermaid模板

Template A: Layered Architecture (API Service)

模板A：分层架构（API服务）

mermaid

C4Component
    title Component Diagram for API Service

    Container(spa, "Web App", "React/TS", "Customer SPA")

    Container_Boundary(api, "API Service") {
        Component(auth_ctrl, "Auth Controller", "Go Handler", "Handles login, registration, token refresh.")
        Component(order_ctrl, "Order Controller", "Go Handler", "Handles order CRUD operations.")

        Component(auth_svc, "Auth Service", "Go", "Validates credentials, generates JWTs.")
        Component(order_svc, "Order Service", "Go", "Business logic for order lifecycle.")
        Component(payment_svc, "Payment Service", "Go", "Orchestrates payment processing.")

        Component(auth_repo, "Auth Repository", "SQL Client", "User persistence.")
        Component(order_repo, "Order Repository", "SQL Client", "Order persistence.")
        Component(payment_client, "Payment Client", "HTTP Client", "Stripe API integration.")

        Component(jwt_util, "JWT Utility", "Go", "Token generation and validation.")
        Component(event_pub, "Event Publisher", "Go", "Publishes domain events.")
    }

    ContainerDb(db, "Database", "PostgreSQL", "Primary data store.")
    System_Ext(stripe, "Stripe", "Payment processing.")

    Rel(spa, auth_ctrl, "POST /login", "JSON/HTTPS")
    Rel(spa, order_ctrl, "POST /orders", "JSON/HTTPS")

    Rel(auth_ctrl, auth_svc, "Calls", "Method call")
    Rel(order_ctrl, order_svc, "Calls", "Method call")

    Rel(auth_svc, auth_repo, "Uses", "Method call")
    Rel(auth_svc, jwt_util, "Uses", "Method call")
    Rel(order_svc, order_repo, "Uses", "Method call")
    Rel(order_svc, payment_svc, "Uses", "Method call")
    Rel(payment_svc, payment_client, "Uses", "Method call")
    Rel(order_svc, event_pub, "Uses", "Method call")

    Rel(auth_repo, db, "Reads/Writes", "SQL/TCP")
    Rel(order_repo, db, "Reads/Writes", "SQL/TCP")
    Rel(payment_client, stripe, "API calls", "REST/HTTPS")

mermaid

C4Component
    title Component Diagram for API Service

    Container(spa, "Web App", "React/TS", "Customer SPA")

    Container_Boundary(api, "API Service") {
        Component(auth_ctrl, "Auth Controller", "Go Handler", "Handles login, registration, token refresh.")
        Component(order_ctrl, "Order Controller", "Go Handler", "Handles order CRUD operations.")

        Component(auth_svc, "Auth Service", "Go", "Validates credentials, generates JWTs.")
        Component(order_svc, "Order Service", "Go", "Business logic for order lifecycle.")
        Component(payment_svc, "Payment Service", "Go", "Orchestrates payment processing.")

        Component(auth_repo, "Auth Repository", "SQL Client", "User persistence.")
        Component(order_repo, "Order Repository", "SQL Client", "Order persistence.")
        Component(payment_client, "Payment Client", "HTTP Client", "Stripe API integration.")

        Component(jwt_util, "JWT Utility", "Go", "Token generation and validation.")
        Component(event_pub, "Event Publisher", "Go", "Publishes domain events.")
    }

    ContainerDb(db, "Database", "PostgreSQL", "Primary data store.")
    System_Ext(stripe, "Stripe", "Payment processing.")

    Rel(spa, auth_ctrl, "POST /login", "JSON/HTTPS")
    Rel(spa, order_ctrl, "POST /orders", "JSON/HTTPS")

    Rel(auth_ctrl, auth_svc, "Calls", "Method call")
    Rel(order_ctrl, order_svc, "Calls", "Method call")

    Rel(auth_svc, auth_repo, "Uses", "Method call")
    Rel(auth_svc, jwt_util, "Uses", "Method call")
    Rel(order_svc, order_repo, "Uses", "Method call")
    Rel(order_svc, payment_svc, "Uses", "Method call")
    Rel(payment_svc, payment_client, "Uses", "Method call")
    Rel(order_svc, event_pub, "Uses", "Method call")

    Rel(auth_repo, db, "Reads/Writes", "SQL/TCP")
    Rel(order_repo, db, "Reads/Writes", "SQL/TCP")
    Rel(payment_client, stripe, "API calls", "REST/HTTPS")

Template B: Clean Architecture (Go)

模板B：Clean Architecture（Go）

mermaid

C4Component
    title Component Diagram — Clean Architecture (Order Service)

    Container(spa, "Web App", "React", "Customer UI")

    Container_Boundary(order_service, "Order Service (Clean Arch)") {
        Component(handler, "HTTP Handler", "Go", "Adapter: converts HTTP to use case input.")
        Component(presenter, "JSON Presenter", "Go", "Adapter: formats use case output.")

        Component(place_order_uc, "Place Order Use Case", "Go", "Application: orchestrates order creation.")
        Component(cancel_order_uc, "Cancel Order Use Case", "Go", "Application: handles cancellation.")

        Component(order_entity, "Order Entity", "Go", "Domain: order business rules.")
        Component(order_repo_intf, "Order Repository (Interface)", "Go", "Domain: port for persistence.")
        Component(payment_intf, "Payment Gateway (Interface)", "Go", "Domain: port for payments.")

        Component(order_repo_impl, "Order Repository (Impl)", "Go + SQL", "Infrastructure: PostgreSQL adapter.")
        Component(stripe_adapter, "Stripe Adapter", "Go + HTTP", "Infrastructure: Stripe API adapter.")
    }

    ContainerDb(db, "Order DB", "PostgreSQL")
    System_Ext(stripe, "Stripe API")

    Rel(spa, handler, "POST /orders", "JSON/HTTPS")
    Rel(handler, place_order_uc, "Invokes", "Method call")
    Rel(place_order_uc, order_entity, "Creates", "Method call")
    Rel(place_order_uc, order_repo_intf, "Saves via", "Interface")
    Rel(place_order_uc, payment_intf, "Charges via", "Interface")

    Rel(order_repo_intf, order_repo_impl, "Implemented by", "Dependency Injection")
    Rel(payment_intf, stripe_adapter, "Implemented by", "Dependency Injection")

    Rel(order_repo_impl, db, "SQL queries", "TCP")
    Rel(stripe_adapter, stripe, "API calls", "HTTPS")

mermaid

C4Component
    title Component Diagram — Clean Architecture (Order Service)

    Container(spa, "Web App", "React", "Customer UI")

    Container_Boundary(order_service, "Order Service (Clean Arch)") {
        Component(handler, "HTTP Handler", "Go", "Adapter: converts HTTP to use case input.")
        Component(presenter, "JSON Presenter", "Go", "Adapter: formats use case output.")

        Component(place_order_uc, "Place Order Use Case", "Go", "Application: orchestrates order creation.")
        Component(cancel_order_uc, "Cancel Order Use Case", "Go", "Application: handles cancellation.")

        Component(order_entity, "Order Entity", "Go", "Domain: order business rules.")
        Component(order_repo_intf, "Order Repository (Interface)", "Go", "Domain: port for persistence.")
        Component(payment_intf, "Payment Gateway (Interface)", "Go", "Domain: port for payments.")

        Component(order_repo_impl, "Order Repository (Impl)", "Go + SQL", "Infrastructure: PostgreSQL adapter.")
        Component(stripe_adapter, "Stripe Adapter", "Go + HTTP", "Infrastructure: Stripe API adapter.")
    }

    ContainerDb(db, "Order DB", "PostgreSQL")
    System_Ext(stripe, "Stripe API")

    Rel(spa, handler, "POST /orders", "JSON/HTTPS")
    Rel(handler, place_order_uc, "Invokes", "Method call")
    Rel(place_order_uc, order_entity, "Creates", "Method call")
    Rel(place_order_uc, order_repo_intf, "Saves via", "Interface")
    Rel(place_order_uc, payment_intf, "Charges via", "Interface")

    Rel(order_repo_intf, order_repo_impl, "Implemented by", "Dependency Injection")
    Rel(payment_intf, stripe_adapter, "Implemented by", "Dependency Injection")

    Rel(order_repo_impl, db, "SQL queries", "TCP")
    Rel(stripe_adapter, stripe, "API calls", "HTTPS")

🛠 Folder Structure Mapping by Language

🛠 按语言划分的文件夹结构映射

Go (Clean Architecture)

Go（Clean Architecture）

internal/
├── domain/
│   ├── entity/
│   │   └── order.go
│   ├── valueobject/
│   │   └── money.go
│   └── event/
│       └── order_placed.go
├── usecase/
│   ├── place_order.go
│   └── cancel_order.go
├── adapter/
│   ├── in/
│   │   └── http/
│   │       └── order_handler.go
│   └── out/
│       ├── persistence/
│       │   └── order_repository.go
│       └── payment/
│           └── stripe_adapter.go
└── config/
    └── app.go

internal/
├── domain/
│   ├── entity/
│   │   └── order.go
│   ├── valueobject/
│   │   └── money.go
│   └── event/
│       └── order_placed.go
├── usecase/
│   ├── place_order.go
│   └── cancel_order.go
├── adapter/
│   ├── in/
│   │   └── http/
│   │       └── order_handler.go
│   └── out/
│       ├── persistence/
│       │   └── order_repository.go
│       └── payment/
│           └── stripe_adapter.go
└── config/
    └── app.go

Python (Hexagonal / FastAPI)

Python（Hexagonal / FastAPI）

src/
├── domain/
│   ├── models/
│   │   └── order.py
│   ├── value_objects/
│   │   └── money.py
│   └── events/
│       └── order_placed.py
├── application/
│   ├── ports/
│   │   ├── in/
│   │   │   └── order_use_case.py
│   │   └── out/
│   │       ├── order_repository.py
│   │       └── payment_gateway.py
│   └── services/
│       └── order_service.py
├── adapters/
│   ├── in/
│   │   └── web/
│   │       └── order_router.py
│   └── out/
│       ├── persistence/
│       │   └── sqlalchemy_order_repo.py
│       └── payment/
│           └── stripe_client.py
└── main.py

src/
├── domain/
│   ├── models/
│   │   └── order.py
│   ├── value_objects/
│   │   └── money.py
│   └── events/
│       └── order_placed.py
├── application/
│   ├── ports/
│   │   ├── in/
│   │   │   └── order_use_case.py
│   │   └── out/
│       ├── order_repository.py
│       └── payment_gateway.py
│   └── services/
│       └── order_service.py
├── adapters/
│   ├── in/
│   │   └── web/
│   │       └── order_router.py
│   └── out/
│       ├── persistence/
│       │   └── sqlalchemy_order_repo.py
│       └── payment/
│           └── stripe_client.py
└── main.py

TypeScript (Vertical Slice / NestJS-style)

TypeScript（Vertical Slice / NestJS风格）

src/
├── features/
│   ├── orders/
│   │   ├── orders.module.ts
│   │   ├── place-order/
│   │   │   ├── place-order.handler.ts
│   │   │   ├── place-order.command.ts
│   │   │   └── place-order.dto.ts
│   │   ├── cancel-order/
│   │   │   └── ...
│   │   └── list-orders/
│   │       └── ...
│   └── payments/
│       └── ...
├── shared/
│   ├── decorators/
│   ├── filters/
│   └── guards/
└── main.ts

src/
├── features/
│   ├── orders/
│   │   ├── orders.module.ts
│   │   ├── place-order/
│   │   │   ├── place-order.handler.ts
│   │   │   ├── place-order.command.ts
│   │   │   └── place-order.dto.ts
│   │   ├── cancel-order/
│   │   │   └── ...
│   │   └── list-orders/
│   │       └── ...
│   └── payments/
│       └── ...
├── shared/
│   ├── decorators/
│   ├── filters/
│   └── guards/
└── main.ts

🚫 Anti-Patterns to Guard (Level 3)

🚫 Level 3需要规避的反模式

Anti-Pattern	Symptom	Fix
Over-Detailing	Every class drawn	Only major logical groupings (5-15 components)
Mixing Containers	Components from multiple containers	Focus on ONE container per diagram
Circular Dependencies	A→B→C→A cycle	Refactor: extract shared interface, merge, or restructure
Anemic Components	Component with no clear responsibility	Rename to reflect single responsibility
Layer Violation	Domain imports infrastructure	In Clean/Hexagonal: domain must have zero external deps
God Component	One component handles everything	Split by responsibility or feature

反模式	症状表现	修复方案
过度细节化	绘制了每个类	仅展示主要逻辑分组（5-15个组件）
混合容器	包含多个容器的组件	每张图仅聚焦一个容器
循环依赖	出现A→B→C→A的循环	重构：提取共享接口、合并或重组结构
贫血组件	组件没有明确的职责	重命名以体现单一职责
层级违规	领域层导入基础设施层	在Clean/Hexagonal架构中：领域层必须无外部依赖
上帝组件	单个组件处理所有事务	按职责或功能拆分

🔍 Codebase Scanning (L3 Synthesis)

🔍 代码库扫描（Level 3综合分析）

bash

undefined

bash

undefined

Identify component boundaries by folder structure

通过文件夹结构识别组件边界

find src -type d -maxdepth 2 | sort

Look for architecture patterns

查找架构模式痕迹

grep -r "interface|abstract class|port|adapter" src/ --include=".go" --include=".ts" --include="*.py"

Check dependency direction (domain should not import infrastructure)

检查依赖方向（领域层不应导入基础设施层）

In Go: check go.mod or import paths

Go语言：检查go.mod或导入路径

grep -r "infrastructure|adapter|external" internal/domain/ || echo "✅ Clean: domain has no infra imports"

grep -r "infrastructure|adapter|external" internal/domain/ || echo "✅ 架构清晰：领域层无基础设施导入"

Find circular dependencies

查找循环依赖

Go: use golang.org/x/tools/cmd/depgraph or go mod graph

Go：使用golang.org/x/tools/cmd/depgraph或go mod graph

Python: use pipdeptree or import-linter

Python：使用pipdeptree或import-linter

TypeScript: use madge

TypeScript：使用madge

---

---

✅ Level 3 Success Criteria

✅ Level 3成功标准

🔄 From L3 to L4

🔄 从Level 3到Level 4

L3 Signal	L4 Action
"This component has complex internal logic"	UML class diagram
"The data model is hard to understand"	ERD (Entity Relationship Diagram)
"New developers struggle with this module"	Document key classes and their relationships
"We need to refactor this component"	L4 reveals exact coupling points

Next: Use

c4-level4-code

for implementation details.

Level 3信号	Level 4行动
“该组件内部逻辑复杂”	绘制UML类图
“数据模型难以理解”	绘制ERD（实体关系图）
“新开发人员难以掌握该模块”	记录关键类及其关系
“我们需要重构该组件”	Level 4揭示精确的耦合点

下一步： 使用

c4-level4-code

获取实现细节。

📚 References

📚 参考资料

C4 Model — Component Diagram — Simon Brown
Clean Architecture — Robert C. Martin
Hexagonal Architecture — Alistair Cockburn
Vertical Slice Architecture — Jimmy Bogard

C4 Model — Component Diagram — Simon Brown
Clean Architecture — Robert C. Martin
Hexagonal Architecture — Alistair Cockburn
Vertical Slice Architecture — Jimmy Bogard