Mcpdoc

🚀 C4Diagrammer Project Documentation

C4Diagrammer is a tool for automatically generating software system architecture diagrams. By analyzing the project's code structure and file organization, it generates corresponding C4 model (Context, Container, and Component) diagrams, helping developers better understand the system's structure and the relationships between components.

🚀 Quick Start

C4Diagrammer simplifies the process of generating software architecture diagrams. It analyzes your project's code and file organization to create C4 model diagrams, enhancing your understanding of the system's structure.

✨ Features

• Automatically generate C4 Context, Container, and Component diagrams.
• Generate README documents for each sub - directory, summarizing the directory's functions and components.
• Support multi - language projects, mainly TypeScript and Python at present.

📦 Installation

1. Clone the project repository:

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

2. Install dependencies: Clone and install the relevant 'PromptRepository' repository.

   npm run install
   

3. Build the project:

   npm run build
   

💻 Usage Examples

Basic Usage

To use the MCP server on your host, you need to update your AI development environment. A common configuration is as follows. The second parameter limits the scope of file system access.

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

For specific IDE setup instructions, please refer to:

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

Advanced Usage

The project includes unit tests written with Mocha:

npm run test

📚 Documentation

The documentation is generated by "dogfooding" - C4Diagrammer generates README.C4Diagrammer.md and C4Component.C4Diagrammer.md in each sub - directory, as well as C4Context and C4Container in the root directory.

• ./C4Context.C4Diagrammer.md - Overview of the C4Context diagram
• ./C4Container.C4Diagrammer.md - Overview of the C4Container diagram
• src/README.C4Diagrammer.md - Source code documentation
• src/C4Component.C4Diagrammer.md - Source code component diagram
• test/README.C4Diagrammer.md - Test suite documentation
• test/C4Component.C4Diagrammer.md - Test suite component diagram

🔧 Technical Details

C4Diagrammer consists of the following key components:

1. MCP Server: Responsible for handling interactions with the AI development environment, receiving requests and returning generated diagrams.
2. PromptRepository: A repository containing the prompt statements required for generating diagrams.
3. FS Access: Provides access management functions for the file system.

The main area that needs improvement is parsing and validating diagrams to provide feedback on the model, especially when syntax errors occur. Currently, it's a bit tricky to programmatically obtain error messages from Mermaid.js. We currently use Selenium to launch a live browser, which can correctly detect the presence of syntax errors but cannot provide any diagnostic information. The model can only attempt to correct the generated code without a clear target. So far, only prompts for TypeScript and Python have been run. As mentioned in the prompt section, this approach has only been verified in larger repositories using Claude Sonnet 3.5 (Cursor) and Claude Opus 3.7 (Claude Desktop). All models can reliably generate useful code summaries.

🤝 Contribution Guidelines

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Submit a pull request.

📄 License

This project is licensed under the MIT License.