Claude Code C4 架构技能：为团队绘制 Mermaid 系统上下文和容器图
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/creative-design/c4-architecture` 目录。
- 将目录放入目标项目的 `.claude/skills/`，确认 `.claude/skills/c4-architecture/SKILL.md` 存在，再从项目根目录启动 Claude Code 并输入 `/c4-architecture`。
中文摘要
将人员、系统、应用和数据存储的关系整理成不同层级的 C4 图。适合先向新成员讲清系统边界，再展开部署单元之间的调用。
SKILL.md 中文导读
可复现示例
为虚构的社区活动报名系统画两张图。上下文图包含访客、报名系统和邮件服务；容器图拆为网页、API 和报名数据库。工作步骤
- 先列出使用者、系统及外部依赖，为每条关系加上动词。
- 画好上下文图后，单独展开系统内应用和存储，核对边界与箭头方向。
验收方法
两张图应能分别预览。第一张解释谁使用系统以及它依赖谁，第二张说明应用与数据库的职责和调用关系。
GitHub 原文 · 更新日期
适用环境
Claude Code，固定版本技能目录及支持 Mermaid C4 的预览工具。准备系统边界和已确认的依赖。
常见问题
系统上下文图需要展示数据库吗？
上下文图面向系统外部视角。内部数据库和应用可放在容器图中，并标明它们各自职责。