Ai Diagram Prototype Generator MCP Server

🚀 AI Diagram & Prototype Generator (MCP Server)

This is a professional, AI-driven MCP server for diagram and prototype creation. It integrates multiple large language models such as Zhipu AI, OpenAI, and Gemini. Based on natural language descriptions, it can intelligently generate various styles of draw.io format diagrams and HTML interactive product prototypes.

✨ Features

• 🤖 AI-driven Generation: It has multiple powerful AI models built-in to intelligently understand complex requirements.
• 🎨 Multiple Diagram Types: It can draw not only architecture diagrams and flowcharts but also generate various styles of UI/UX prototypes.
• 📱 Styled Prototypes: It incorporates professional design specifications such as Apple HIG and WeChat Mini Programs, enabling the generation of accurate prototypes with an "Apple" or "WeChat" feel with just one sentence.
• 🧊 Dynamic Prompt System: It features an original (intention + format) combined prompt system to precisely and stably guide AI creation.
• 🔧 Draw.io & HTML Compatibility: It can generate .drawio files for secondary editing or directly runnable .html files for interactive demonstrations.
• 🤯 Intelligent Fallback Mechanism: When AI fails to generate a Draw.io diagram or the content is too simple, it automatically switches to the built-in rule engine to ensure output.
• 🤝 MCP Protocol: Based on the Model Context Protocol, it can seamlessly integrate with AI assistants supporting MCP (such as OpenAI's Assistants, Coze, Dify, and various IDE plugins).

🚀 Supported Diagrams and Prototypes

This tool is driven by the combination of prompt_id (intention) and file_type (output format). The currently supported combinations are as follows:

🚀 Results

The following examples are generated by Chatwise in conjunction with this MCP using the glm-4.5 model.

Conversation Process

Generated Architecture Diagram

Generated Business Flowchart

Generated App Prototype

📦 Installation

1. Environment Requirements

• Python 3.10+
• Python package management tools such as pip or uv
• AI clients supporting MCP (e.g., Coze, Dify, or other compatible Agents)

2. Install Dependencies

# 1. Clone the project
git clone https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-.git
cd AI-Diagram-Prototype-Generator-MCP-Server-

# 2. (Recommended) Create and activate a virtual environment
python -m venv .venv
source .venv/bin/activate  # on Windows, use `.venv\Scripts\activate`

# 3. Install dependencies
pip install -r requirements.txt

3. Configure API Keys

Obtain API Keys

You need to obtain API keys from at least one of the following service providers:

1. ZhipuAI: ZhipuAI Open Platform
2. OpenAI: OpenAI Platform
3. Google Gemini: Google AI for Developers

Configure the .env File

This is the most important and recommended configuration method.

# 1. Copy the environment variable template
cp .env.example .env

# 2. Edit the .env file and fill in your configuration information
# Set PROVIDER to the service provider you want to use by default (zhipuai, openai, gemini)
PROVIDER="zhipuai"

# Fill in the API keys you obtained
ZHIPUAI_API_KEY="your_zhipuai_api_key_here"
OPENAI_API_KEY="your_openai_api_key_here"
GEMINI_API_KEY="your_gemini_api_key_here"

# (Optional) You can also specify the default model and maximum number of tokens for each service provider
ZHIPUAI_MODEL="glm-4-flash"
ZHIPUAI_MODEL_MAX_TOKENS="131072"

4. Configure the MCP Client

In the settings of your AI assistant, add an MCP server. Here is a more concise and secure configuration example:

{
  "mcpServers": {
    "draw-architecture": {
      "command": "uv --directory full-path-to-draw_architecture_mcp run mcp_server.py",
      "args": ["/path/to/draw_architecture_mcp/mcp_server.py"],
      "env": {
        "PROVIDER": "zhipuai",
        "ZHIPUAI_API_KEY": "your_api_key_here",
        "ZHIPUAI_MODEL": "gglm-4.5",
        "ZHIPUAI_MODEL_MAX_TOKENS": "98304",
        "OPENAI_API_KEY": "your_api_key_here",
        "OPENAI_BASE_URL": "https://api.openai.com/v1",
        "GEMINI_API_KEY": "your_api_key_here",
        "GEMINI_BASE_URL": "https://api.gemini.com/v1"
      }
    }
  }
}

Notes:

• command: Use the python command directly.
• args: Provide the absolute path of the mcp_server.py file.
• env: Not required. The .env file is the preferred option. Only add configurations here when you need to override the settings in the .env file for this specific client (e.g., force it to use openai). It is not recommended to paste API keys directly here.

📚 Documentation

In the AI assistant, call the tool with clear instructions. Make sure your instructions include the key information of what to do (prompt_id), what format to generate (file_type), and where to save (output_file).

💻 Usage Examples

Example 1: Generate an Architecture Diagram

Please generate a technical architecture diagram with the intention of `architecture`, in the `draw.io` format, and save it to `./output/my_system.drawio`.
Description: An e-commerce system with Web and App front-ends. The back-end uses a microservices architecture, including user, product, and order services. It uses MySQL as the main database and Redis for caching.

Example 2: Generate an Apple-style Prototype

Please design an Apple-style App prototype.
- prompt_id is 'APPLE_MOBILE_APP'
- file_type is 'html'
- output_file is './output/ios_music_player.html'
- Description: This is a music player app. The main interface is a scrollable playlist. There is a mini control bar at the bottom for the currently playing song. Clicking on a list item leads to the playback details page, which has an album cover, a playback progress bar, and control buttons.

📄 API Reference

Your AI assistant will call the following tools:

generate_diagram

Generate a diagram or prototype based on the specified intention and format.

Parameters:

• prompt_id (string, required): Intention ID. Obtained through the list_support_diagram_types tool.
• file_type (string, required): Output file format.
• description (string, required): Detailed description of the diagram or prototype.
• output_file (string, required): Full path of the output file.
• diagram_name (string, optional): Title of the diagram or HTML page.

Example Call (Actual call format in the AI background):

{
  "tool": "generate_diagram",
  "arguments": {
    "prompt_id": "architecture",
    "file_type": "draw.io",
    "description": "Microservices architecture, including user service, order service...",
    "output_file": "./ecommerce.drawio",
    "diagram_name": "E-commerce System Architecture"
  }
}

list_support_diagram_types

List all currently supported combinations of prompt_id and their corresponding file_type.

🔧 Technical Details

draw-generator-mcp/
├── mcp_server.py                # Main file of the MCP server
├── prompts/                     # Directory for prompt templates
│   ├── architecture_as_drawio.md
│   ├── flowchart_as_drawio.md
│   ├── ui_ux_as_drawio.md
│   ├── ui_ux_as_html.md
│   ├── apple_mobile_prototype_prompt.md
│   └── weixin_miniapp_prompt.md
├── .env.example                 # Example of environment variables
├── pyproject.toml               # (Optional) Project configuration
├── requirements.txt             # (Recommended) List of dependencies
└── README.md                    # Project documentation

❓ Frequently Asked Questions (FAQ)

Q: How to expand more diagram types or prompt templates?

A: It's very simple! Just follow these two steps:

1. Add a Prompt File: Create a new .md file in the prompts/ directory and write your instructions. For example, my_custom_diagram.md.
2. Update the Configuration Dictionary: Open mcp_server.py and modify the TOOLS_PROMPT_DICT dictionary:

   TOOLS_PROMPT_DICT = {
       # ... Existing entries
       "my_custom_type": {  # <== Add a new entry
           "id": "my_custom_type",
           "description": "Generate my custom diagram",
           "prompts": {
               "draw.io": "prompts/my_custom_diagram.md" # Point to your new file
           }
       },
   }
   

   Restart the MCP server for the changes to take effect!