c4-architecture

# C4 架构文档 使用 Mermaid 语法通过 C4 模型生成软件架构文档。 ## 工作流 1. **理解范围** - 根据受众确定所需的 C4 级别 2. **分析代码库** - 探索系统以识别组件、容器和关系 3. **生成图表** - 在适当的抽象级别创建 Mermaid C4 图表 4. **记录** - 将图表写入带有解释性上下文的 Markdown 文件中 ## C4 图表级别 根据文档需求选择合适的级别： | 级别 | 图表类型 | 受众 | 展示内容 | 创建时机 | |-------|-------------|----------|-------|----------------| | 1 | **C4Context** | 所有人 | 系统 + 外部参与者 | 始终（必需） | | 2 | **C4Container** | 技术人员 | 应用、数据库、服务 | 始终（必需） | | 3 | **C4Component** | 开发人员 | 内部组件 | 仅在有价值时 | | 4 | **C4Deployment** | DevOps | 基础设施节点 | 针对生产系统 | | - | **C4Dynamic** | 技术人员 | 请求流程（编号） | 针对复杂工作流 | **关键洞察：** “上下文 + 容器图对于大多数软件开发团队来说已经足够。”仅在确实能增加价值时才创建组件/代码图。 ## 快速入门示例 ### 系统上下文 (级别 1) mermaid C4Context title 系统上下文 - 健身追踪器 Person(user, "用户", "追踪锻炼和练习") System(app, "健身追踪器", "用于追踪力量和 CrossFit 锻炼的 Vue PWA") System_Ext(browser, "Web 浏览器", "在 IndexedDB 中存储数据") Rel(user, app, "使用") Rel(app, browser, "持久化数据到", "IndexedDB") ### 容器图 (级别 2) mermaid C4Container title 容器图 - 健身追踪器 Person(user, "用户", "追踪锻炼") Container_Boundary(app, "健身追踪器 PWA") { Container(spa, "SPA", "Vue 3, TypeScript", "单页应用") Container(pinia, "状态管理", "Pinia", "管理应用状态") ContainerDb(indexeddb, "IndexedDB", "Dexie", "本地锻炼存储") } Rel(user, spa, "使用") Rel(spa, pinia, "读/写状态") Rel(pinia, indexeddb, "持久化", "Dexie ORM") ### 组件图 (级别 3) mermaid C4Component title 组件图 - 锻炼功能 Container(views, "视图", "Vue Router 页面") Container_Boundary(workout, "锻炼功能") { Component(useWorkout, "useWorkout", "组合式函数", "锻炼执行状态")