# DiagramMCP - Dynamic Diagram Generation for Software Development
A comprehensive Model Context Protocol (MCP) server for generating dynamic diagrams commonly used in software development cycles. This MCP provides tools for creating flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and architecture diagrams using Mermaid syntax.
## Example Output
### Supported Diagram Types
- **Flowcharts** - Process flows, decision trees, workflow diagrams
- **Sequence Diagrams** - API interactions, system communications, user flows
- **Class Diagrams** - Object-oriented design, system architecture
- **ER Diagrams** - Database schema, entity relationships
- **Gantt Charts** - Project timelines, task scheduling
- **Architecture Diagrams** - System components, service interactions
### Key Capabilities
- ✅ **Multiple Node Shapes** - Rectangle, circle, diamond, hexagon, parallelogram
- ✅ **Flexible Connections** - Labeled arrows, different line types
- ✅ **Layered Architecture** - Organize components in logical layers
- ✅ **Validation** - Syntax checking and error reporting
- ✅ **Export Support** A Mermaid-Style code is generated and can be exported to SVG, PNG, PDF, HTML formats (using Mermaid CLI or online Mermaid Editor)
> ⚠️ **Experimental Feature**: File Export functionality is highly experimental. Consider using your system's Chrome installation instead of Puppeteer-managed Chrome for better reliability.
- ✅ **Theme Support** - Multiple visual themes
## Installation
1. Install dependencies:
```bash
pip install -r requirements.txt
```
2. Run the MCP server:
```bash
python app.py
```
## Available Tools
### 1. `create_flowchart`
Generate flowchart diagrams for process flows and decision trees.
**Parameters:**
- `title` (str): Diagram title
- `nodes` (List[Dict]): Nodes with `id`, `label`, `shape`
- `connections` (List[Dict]): Connections with `from`, `to`, `label`
- `direction` (str): Flow direction (TD, LR, BT, RL)
- `theme` (str): Visual theme
**Example:**
```python
create_flowchart(
title="User Authentication Flow",
nodes=[
{"id": "start", "label": "Start", "shape": "circle"},
{"id": "login", "label": "Login Form", "shape": "rectangle"},
{"id": "validate", "label": "Valid Credentials?", "shape": "diamond"},
{"id": "dashboard", "label": "Dashboard", "shape": "rectangle"},
{"id": "error", "label": "Error Message", "shape": "rectangle"}
],
connections=[
{"from": "start", "to": "login"},
{"from": "login", "to": "validate"},
{"from": "validate", "to": "dashboard", "label": "Yes"},
{"from": "validate", "to": "error", "label": "No"}
],
direction="TD"
)
```
### 2. `create_sequence_diagram`
Generate sequence diagrams for API interactions and system communications.
**Parameters:**
- `title` (str): Diagram title
- `participants` (List[str]): List of participants/actors
- `interactions` (List[Dict]): Interactions with `from`, `to`, `message`, `type`
**Example:**
```python
create_sequence_diagram(
title="API Authentication Flow",
participants=["Client", "API", "Database"],
interactions=[
{"from": "Client", "to": "API", "message": "POST /login", "type": "arrow"},
{"from": "API", "to": "Database", "message": "Validate user", "type": "arrow"},
{"from": "Database", "to": "API", "message": "User data", "type": "dotted"},
{"from": "API", "to": "Client", "message": "JWT token", "type": "dotted"}
]
)
```
### 3. `create_class_diagram`
Generate UML class diagrams for object-oriented design.
**Parameters:**
- `title` (str): Diagram title
- `classes` (List[Dict]): Classes with `name`, `attributes`, `methods`
- `relationships` (List[Dict]): Relationships with `from`, `to`, `type`
### 4. `create_er_diagram`
Generate Entity-Relationship diagrams for database design.
**Parameters:**
- `title` (str): Diagram title
- `entities` (List[Dict]): Entities with `name`, `attributes`
- `relationships` (List[Dict]): Relationships with `from`, `to`, `cardinality`
### 5. `create_gantt_chart`
Generate Gantt charts for project planning and scheduling.
**Parameters:**
- `title` (str): Chart title
- `sections` (List[Dict]): Sections with `name` and `tasks`
### 6. `create_architecture_diagram`
Generate system architecture diagrams showing components and their interactions.
**Parameters:**
- `title` (str): Diagram title
- `components` (List[Dict]): Components with `id`, `name`, `type`, `layer`
- `connections` (List[Dict]): Connections with `from`, `to`, `protocol`
- `layers` (List[str]): Optional layer organization
### 7. `validate_diagram`
Validate diagram syntax and provide error feedback.
**Parameters:**
- `diagram_code` (str): Mermaid diagram code to validate
- `diagram_type` (DiagramType): Type of diagram for validation
### 8. `export_diagram`
Get export instructions for rendering diagrams in various formats.
**Parameters:**
- `diagram_code` (str): Mermaid diagram code
- `format` (str): Export format (svg, png, pdf, html)
- `theme` (str): Theme to apply
## Usage Examples
### Creating a Simple Flowchart
```python
# Generate a basic decision flowchart
flowchart = create_flowchart(
title="Bug Triage Process",
nodes=[
{"id": "report", "label": "Bug Report", "shape": "rectangle"},
{"id": "severity", "label": "Critical?", "shape": "diamond"},
{"id": "hotfix", "label": "Hotfix", "shape": "rectangle"},
{"id": "backlog", "label": "Add to Backlog", "shape": "rectangle"}
],
connections=[
{"from": "report", "to": "severity"},
{"from": "severity", "to": "hotfix", "label": "Yes"},
{"from": "severity", "to": "backlog", "label": "No"}
]
)
```
### Creating an Architecture Diagram
```python
# Generate a microservices architecture diagram
architecture = create_architecture_diagram(
title="E-commerce Microservices",
components=[
{"id": "web", "name": "Web App", "type": "frontend", "layer": "Presentation"},
{"id": "api", "name": "API Gateway", "type": "api", "layer": "API"},
{"id": "user", "name": "User Service", "type": "service", "layer": "Services"},
{"id": "order", "name": "Order Service", "type": "service", "layer": "Services"},
{"id": "db", "name": "Database", "type": "database", "layer": "Data"}
],
connections=[
{"from": "web", "to": "api", "protocol": "HTTPS"},
{"from": "api", "to": "user", "protocol": "HTTP"},
{"from": "api", "to": "order", "protocol": "HTTP"},
{"from": "user", "to": "db", "protocol": "SQL"},
{"from": "order", "to": "db", "protocol": "SQL"}
],
layers=["Presentation", "API", "Services", "Data"]
)
```
## Rendering Diagrams
The MCP generates Mermaid syntax that can be rendered using:
1. **Mermaid CLI** (for SVG/PNG/PDF):
```bash
npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg
```
2. **Online Mermaid Editor**: https://mermaid.live/
3. **VS Code Extension**: Mermaid Preview
4. **HTML Integration**:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">
<!-- Paste generated Mermaid code here -->
</div>
```
## Integration
This MCP server can be integrated with:
- **Claude Desktop** - Add to MCP configuration
- **IDEs** - VS Code,Windsurf, Cursor, IntelliJ with MCP plugins
- **Documentation Tools** - Notion, Confluence, GitBook
- **CI/CD Pipelines** - Auto-generate diagrams from code
## Configuration
The server runs on stdio transport by default. To use with Claude Desktop, add to your MCP configuration:
```json
{
"mcpServers": {
"diagrammcp": {
"command": "python",
"args": ["/path/to/diagramMCP/app.py"]
}
}
}
```
## Contributing
Feel free to extend this MCP with additional diagram types, themes, or export formats. The modular design makes it easy to add new diagram generation tools.
## License
MIT License - Feel free to use and modify for your projects.
