LelonDelonMelon/diagramMCP

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:

pip install -r requirements.txt

2. 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 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:

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:

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

# 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:

1. Mermaid CLI (for SVG/PNG/PDF):

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:

<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.