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
- Install dependencies:
pip install -r requirements.txt
- Run the MCP server:
python app.py
Available Tools
1. create_flowchart
Generate flowchart diagrams for process flows and decision trees.
Parameters:
title(str): Diagram titlenodes(List[Dict]): Nodes withid,label,shapeconnections(List[Dict]): Connections withfrom,to,labeldirection(str): Flow direction (TD, LR, BT, RL)theme(str): Visual theme
Example:
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 titleparticipants(List[str]): List of participants/actorsinteractions(List[Dict]): Interactions withfrom,to,message,type
Example:
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 titleclasses(List[Dict]): Classes withname,attributes,methodsrelationships(List[Dict]): Relationships withfrom,to,type
4. create_er_diagram
Generate Entity-Relationship diagrams for database design.
Parameters:
title(str): Diagram titleentities(List[Dict]): Entities withname,attributesrelationships(List[Dict]): Relationships withfrom,to,cardinality
5. create_gantt_chart
Generate Gantt charts for project planning and scheduling.
Parameters:
title(str): Chart titlesections(List[Dict]): Sections withnameandtasks
6. create_architecture_diagram
Generate system architecture diagrams showing components and their interactions.
Parameters:
title(str): Diagram titlecomponents(List[Dict]): Components withid,name,type,layerconnections(List[Dict]): Connections withfrom,to,protocollayers(List[str]): Optional layer organization
7. validate_diagram
Validate diagram syntax and provide error feedback.
Parameters:
diagram_code(str): Mermaid diagram code to validatediagram_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 codeformat(str): Export format (svg, png, pdf, html)theme(str): Theme to apply
Usage Examples
Creating a Simple Flowchart
# 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
# 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:
- Mermaid CLI (for SVG/PNG/PDF):
npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg
-
Online Mermaid Editor: https://mermaid.live/
-
VS Code Extension: Mermaid Preview
-
HTML Integration:
<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:
{
"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.