Mermaid Viewer 文档

简体中文

English
日本語
한국어

简体中文

English
日本語
한국어

Appearance

C4 架构图 ​

C4 架构图提供了一种在不同抽象层次上可视化软件架构的方法。C4 模型包括上下文(Context)、容器(Container)、组件(Component)和代码(Code)四个层次的图。

语法 ​

基本元素 ​

  • 人员: Person(别名, 标签)
  • 系统: System(别名, 标签)
  • 容器: Container(别名, 标签, 技术)
  • 组件: Component(别名, 标签, 技术)
  • 关系: Rel(从, 到, 标签)

基础示例 ​

代码:
mermaid
C4Context
    title 互联网银行系统的系统上下文图
    
    Person(customer, "银行客户", "银行的客户")
    System(banking_system, "互联网银行系统", "允许客户查看其银行账户信息")
    
    Rel(customer, banking_system, "使用")
Ctrl + Enter|

高级示例 ​

这是一个更详细的 Web 应用程序容器图：

代码:
mermaid
C4Container
    title 互联网银行系统的容器图

    Person(customer, "银行客户", "银行的客户")
    
    System_Boundary(banking_system, "互联网银行系统") {
        Container(web_app, "Web应用", "Java, Spring MVC", "提供静态内容和互联网银行单页应用")
        Container(spa, "单页应用", "JavaScript, Angular", "为客户提供所有互联网银行功能")
        Container(mobile_app, "移动应用", "Kotlin, Android", "为客户提供有限的互联网银行功能")
        Container(api, "API应用", "Java, Spring Boot", "通过API提供互联网银行功能")
        ContainerDb(database, "数据库", "Oracle Database", "存储用户注册信息、加密的认证凭据、访问日志等")
    }

    Rel(customer, web_app, "使用", "HTTPS")
    Rel(customer, spa, "使用", "HTTPS")
    Rel(customer, mobile_app, "使用")
    Rel(web_app, spa, "提供")
    Rel(spa, api, "使用", "JSON/HTTPS")
    Rel(mobile_app, api, "使用", "JSON/HTTPS")
    Rel(api, database, "读写", "JDBC")
Ctrl + Enter|

组件级别 ​

代码:
mermaid
C4Component
    title 互联网银行系统API应用的组件图

    Container_Boundary(api, "API应用") {
        Component(sign_in_controller, "登录控制器", "Spring MVC Rest Controller", "允许用户登录互联网银行系统")
        Component(security_component, "安全组件", "Spring Security", "提供登录、修改密码等功能")
        Component(user_repository, "用户仓库", "Spring Data", "提供用户信息访问")
    }

    Rel(sign_in_controller, security_component, "使用")
    Rel(security_component, user_repository, "使用")
Ctrl + Enter|

部署图 ​

代码:
mermaid
C4Deployment
    title 互联网银行系统的部署图

    Deployment_Node(customer_computer, "客户电脑", "Microsoft Windows 或 Apple macOS") {
        Deployment_Node(web_browser, "Web浏览器", "Chrome, Firefox, Safari, 或 Edge") {
            Container(spa, "单页应用", "JavaScript, Angular", "为客户提供所有互联网银行功能")
        }
    }

    Deployment_Node(data_center, "数据中心") {
        Deployment_Node(server, "应用服务器", "Ubuntu 20.04 LTS") {
            Container(api, "API应用", "Java, Spring Boot")
        }
        Deployment_Node(database_server, "数据库服务器", "Oracle") {
            ContainerDb(database, "数据库", "Oracle 19c")
        }
    }

    Rel(spa, api, "调用API", "JSON/HTTPS")
    Rel(api, database, "读写", "JDBC")
Ctrl + Enter|

附加功能 ​

边界和企业 ​

代码:
mermaid
C4Context
    Enterprise_Boundary(enterprise, "银行") {
        System(banking_system, "互联网银行系统")
        System(atm_system, "ATM系统")
    }
    
    Person(customer, "客户")
    System_Ext(mail_system, "邮件系统")
    
    Rel(customer, banking_system, "使用")
    Rel(customer, atm_system, "使用ATM取款")
    Rel(banking_system, mail_system, "发送邮件")
Ctrl + Enter|

样式设置 ​

C4 图表会自动：

  • 格式化不同类型的元素
  • 显示关系和依赖
  • 显示技术栈
  • 组织层次结构
  • 使用一致的视觉语言

实用技巧 ​

  • 从上下文图开始
  • 通过容器和组件视图逐步添加细节
  • 保持图表重点明确
  • 包含相关技术细节
  • 显示关键关系
  • 使用有意义的描述
  • 在相关处包含技术选择
  • 考虑受众的技术水平

常见问题解决 ​

  1. 复杂性问题

    • 适当选择抽象级别
    • 分解复杂系统
    • 使用边界组织元素

  2. 可读性问题

    • 保持清晰的层次结构
    • 避免过多的关系线
    • 使用有意义的标签

  3. 一致性问题

    • 遵循C4模型约定
    • 保持命名一致
    • 使用统一的表示方式

最佳实践 ​

  • 选择合适的抽象级别
  • 保持图表简洁明了
  • 使用清晰的命名
  • 包含必要的技术细节
  • 突出重要关系
  • 考虑图表的目标受众
  • 保持视图之间的一致性

下一步 ​