🚀 C4Diagrammer 项目文档

C4Diagrammer 是一款用于自动生成软件系统架构图的工具。它能通过分析项目的代码结构与文件组织方式，生成对应的 C4 模型（Context、Container 和 Component）图表，助力开发人员更好地理解系统结构以及组件间的关系。

✨ 主要特性

• 自动生成 C4 Context、Container 和 Component 图表。
• 为每个子目录生成文档 README 文件，概述该目录的功能和组件。
• 支持多语言项目，目前主要支持 TypeScript 和 Python。

📦 安装指南

1. 克隆项目仓库：

   git clone https://github.com/yourusername/C4Diagrammer.git
   

2. 安装依赖项： 克隆并安装相关的 'PromptRepository' 仓库。

   npm run install
   

3. 构建项目：

   npm run build
   

💻 使用示例

基础用法

要在主机上使用 MCP 服务器，需要更新您的 AI 开发环境。常见的配置如下所示。第二个参数限制了文件系统的访问权限范围。

{
  "mcpServers": {
    "mcp-documenter": {
      "command": "node",
      "args": ["YourCodeRoot/C4Diagrammer/dist/src/index.js", "YourCodeRoot"]
    }
  }
}

高级用法

对于特定 IDE 的设置说明，请参考：

• Cursor：https://docs.cursor.com/context/model-context-protocol
• Claude：https://modelcontextprotocol.io/quickstart/user

📚 详细文档

文档由“dogfooding”生成 - C4Diagrammer 在每个子目录中生成 README.C4Diagrammer.md 和 C4Component.C4Diagrammer.md，以及根目录中的 C4Context 和 C4Container。

• ./C4Context.C4Diagrammer.md - 总览 C4Context 图表
• ./C4Container.C4Diagrammer.md - 总览 C4Container 图表
• src/README.C4Diagrammer.md - 源代码文档
• src/C4Component.C4Diagrammer.md - 源代码组件图表
• test/README.C4Diagrammer.md - 测试套件文档
• test/C4Component.C4Diagrammer.md - 测试套件组件图表

🔧 技术细节

C4Diagrammer 包含以下几个关键组件：

1. MCP 服务器：负责处理与 AI 开发环境的交互，接收请求并返回生成的图表。
2. PromptRepository：包含用于生成图表所需提示语句的仓库。
3. FS Access：提供对文件系统的访问权限管理功能。

项目包含使用 Mocha 编写的单元测试：

npm run test

📄 许可证

本项目遵循 MIT License。

👥 贡献指南

欢迎贡献！请随意提交 Pull Request。

1. 叉克隆仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交拉取请求

⚠️ 注意事项

主要需要改进的领域是解析和验证图表，以提供对模型的反馈，特别是在发生语法错误时。目前 Mermaid.js 在程序化地获取错误消息方面有些棘手。我们当前使用 Selenium 启动一个实时浏览器，并且这可以正确检测到语法错误的存在，但无法提供任何诊断信息。模型只能在没有目标的情况下尝试修正生成代码。

到目前为止，仅运行了针对 TypeScript 和 Python 的提示语句。

正如提示部分所述，这种方法只在使用 Claude Sonnet 3.5（Cursor）和 Claude Opus 3.7（Claude Desktop）的较大规模仓库中得到验证。所有模型都能可靠地生成有用的代码摘要。