元素与样式
每个 C4 层次支持不同的元素类型。了解这些有助于您创建准确且有意义的架构图。
各层次的元素
第 1 层：系统上下文
最高层次展示您的系统在其环境中的位置：
| 元素 | 描述 |
|---|---|
| 软件系统 | 您的主系统或产品 |
| 人员 | 与系统交互的用户或角色 |
| 外部系统 | 您的系统集成的第三方系统 |
第 2 层：容器
展示系统内的技术构建模块：
| 元素 | 描述 |
|---|---|
| 服务 | 后端服务或微服务 |
| API | REST、GraphQL 或 gRPC API |
| Web 应用 | 前端 Web 应用程序 |
| 移动应用 | iOS 或 Android 应用程序 |
| 数据库 | SQL 或 NoSQL 数据库 |
| 缓存 | Redis、Memcached 等 |
| 消息队列 | Kafka、RabbitMQ、SQS 等 |
| 文件存储 | S3、Blob 存储、文件系统 |
第 3 层：组件
展示容器的内部结构：
| 元素 | 描述 |
|---|---|
| 控制器 | HTTP 请求处理器 |
| 处理器 | 事件或消息处理器 |
| 仓库 | 数据访问层 |
| 适配器 | 外部系统适配器 |
| 中间件 | 请求/响应处理器 |
| 工具类 | 辅助函数和工具 |
| 模型 | 领域模型和实体 |
第 4 层：代码
展示实现细节：
| 元素 | 描述 |
|---|---|
| 类 | 面向对象的类 |
| 接口 | 接口定义 |
| 结构体 | 数据结构 |
| 函数 | 独立函数 |
| 方法 | 类方法 |
| 枚举 | 枚举类型 |
| 常量 | 常量值 |
| 类型 | 类型定义 |
添加元素
使用添加按钮
- 点击工具栏中的 添加
- 选择元素类型
- 输入名称和描述
- 点击 创建
使用右键菜单
- 在空白画布上右键点击
- 选择 添加 [元素类型]
- 填写详细信息
- 点击 创建
拖放
对于容器和组件，您可以直接从侧边栏将元素拖放到画布上。
元素样式
访问样式选项
右键点击任意元素可访问样式设置：
- 背景色：元素的填充颜色
- 边框色：轮廓颜色
- 文字色：标签颜色
- 图标：代表元素的视觉图标
调色板
Archyl 提供精心策划的调色板：
- 蓝色系：服务、API
- 绿色系：数据库、存储
- 紫色系：外部系统
- 橙色系：消息队列、异步
- 灰色系：工具类、基础设施
一致性样式建议
- 对相似的元素类型使用相同的颜色
- 匹配您组织的约定颜色
- 考虑对色盲友好的配色方案
- 在项目笔记中记录您的配色方案
叠加层
叠加层是彩色的视觉分组，帮助您在图表中组织元素。
创建叠加层
- 点击 添加 并选择 叠加层
- 为其命名（例如"后端服务"、"前端应用"）
- 从调色板中选择颜色
- 点击 创建
使用叠加层
- 将元素拖入叠加层区域
- 叠加层提供视觉分组
- 叠加层是层次特定的
- 每个 C4 层次可以有不同的分组
叠加层使用场景
- 按团队职责分组
- 按部署单元分组
- 按领域分组（DDD 限界上下文）
- 突出显示关键路径组件
- 显示安全边界
叠加层最佳实践
- 保持简洁：每个层次最多 3-5 个叠加层
- 使用有意义的名称："支付领域" 而非 "分组 1"
- 颜色一致：相关分组在不同层次使用相同的叠加层颜色
- 避免重叠：避免令人困惑的叠加层重叠
关系样式
关系也可以设置样式：
| 属性 | 选项 |
|---|---|
| 颜色 | 匹配元素颜色或使用中性色 |
| 线条样式 | 实线、虚线、点线 |
| 线条宽度 | 细、中、粗 |
| 箭头样式 | 标准、空心、无 |
关系样式建议
- 异步通信使用虚线
- 主要数据流使用粗线
- 按协议使用颜色编码（HTTP、gRPC、事件）