Ai Diagram Prototype Generator MCP Server

🚀 AI圖表與原型生成器（MCP服務器）

這是一款專業的、由AI驅動的圖表與原型繪製MCP服務器。它深度整合了智譜AI、OpenAI、Gemini等多種大語言模型，能依據自然語言描述，智能生成多種風格的 draw.io 格式圖表和 HTML 交互式產品原型。

🚀 快速開始

本工具通過 prompt_id (意圖) 和 file_type (輸出格式) 的組合來驅動。以下是目前支持的組合：

在AI助手中，通過清晰的指令調用工具。請確保你的指令包含了做什麼 (prompt_id)、生成什麼格式 (file_type) 和 保存到哪裡 (output_file) 的關鍵信息。

示例1：生成架構圖

幫我生成一個技術架構圖，意圖是 `architecture`，格式是 `draw.io`，保存到 `./output/my_system.drawio`。
描述如下：一個電商系統，有Web和App前端，後端採用微服務架構，包括用戶、商品和訂單三個服務，使用MySQL作為主數據庫，Redis做緩存。

示例2：生成蘋果風格原型

請幫我設計一個蘋果風格的App原型。
- prompt_id 是 'APPLE_MOBILE_APP'
- file_type 是 'html'
- output_file 是 './output/ios_music_player.html'
- 描述：這是一個音樂播放器應用，主界面是一個可滾動的歌單列表，底部有一個正在播放的迷你控制條。點擊列表項可以進入播放詳情頁，詳情頁有專輯封面、播放進度條和控制按鈕。

✨ 主要特性

• 🤖 AI驅動生成：內置多種強大的AI模型，智能理解複雜需求。
• 🎨 多圖表類型：不僅能畫架構圖、流程圖，還能生成多種風格的UI/UX原型。
• 📱 風格化原型 (Styled Prototypes)：內置蘋果HIG、微信小程序等專業設計規範，一句話生成“蘋果味”或“微信味”的精準原型。
• 🧊 動態提示詞系統：獨創的(意圖+格式)組合式提示詞系統，精確、穩定地指導AI進行創作。
• 🔧 Draw.io & HTML兼容：可生成 .drawio 文件用於二次編輯，或生成可直接運行的 .html 文件進行交互演示。
• 🤯 智能回退機制：在AI生成Draw.io圖表失敗或內容過簡時，自動切換到內置的規則引擎，保證總有產出。
• 🤝 MCP協議：基於Model Context Protocol，可無縫與支持MCP的AI助手（如OpenAI的Assistants、Coze、Dify、各種IDE插件等）集成。

🚀 效果

以下範例通過chatwise 配合本mcp，使用glm-4.5模型生成。

對話過程

生成的架構圖

生成的業務流程圖

生成的APP原型

📦 安裝指南

1. 環境要求

• Python 3.10+
• pip 或 uv 等Python包管理工具
• 支持MCP的AI客戶端（如Coze, Dify, 或其他兼容的Agent）

2. 安裝依賴

# 1. 克隆項目
git clone https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-.git
cd AI-Diagram-Prototype-Generator-MCP-Server-

# 2. (推薦) 創建並激活虛擬環境
python -m venv .venv
source .venv/bin/activate  # on Windows, use `.venv\Scripts\activate`

# 3. 安裝依賴
pip install -r requirements.txt

3. 配置API Key

獲取API Key

你需要獲取以下至少一個服務商的API Key：

1. 智譜AI (ZhipuAI): 智譜AI開放平臺
2. OpenAI: OpenAI Platform
3. Google Gemini: Google AI for Developers

配置 .env 文件

這是最重要也是最推薦的配置方式。

# 1. 複製環境變量模板
cp .env.example .env

# 2. 編輯 .env 文件，填入你的配置信息
# 將PROVIDER設置為你希望默認使用的服務商 (zhipuai, openai, gemini)
PROVIDER="zhipuai"

# 填入你獲取的API Key
ZHIPUAI_API_KEY="your_zhipuai_api_key_here"
OPENAI_API_KEY="your_openai_api_key_here"
GEMINI_API_KEY="your_gemini_api_key_here"

# (可選) 你還可以為每個服務商指定默認的模型和最大Token數
ZHIPUAI_MODEL="glm-4-flash"
ZHIPUAI_MODEL_MAX_TOKENS="131072"

4. 配置MCP客戶端

在你的AI助手的設置中，添加一個MCP服務器。以下是一個更簡潔、更安全的配置示例：

{
  "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"
      }
    }
  }
}

說明：

• command: 直接使用 python 命令。
• args: 提供 mcp_server.py 文件的絕對路徑。
• env: 非必需。.env 文件是首選。只有當你需要為這個特定的客戶端覆蓋 .env 中的設置時（例如，強制它使用openai），才在這裡添加配置。不推薦在此處直接粘貼API Key。

📚 詳細文檔

API參考

你的AI助手將會調用以下工具：

generate_diagram

根據指定的意圖和格式，生成圖表或原型。

參數：

• prompt_id (string, 必需): 意圖ID。通過 list_support_diagram_types 工具獲取。
• file_type (string, 必需): 輸出文件格式。
• description (string, 必需): 對圖表或原型的詳細描述。
• output_file (string, 必需): 輸出文件的完整路徑。
• diagram_name (string, 可選): 圖表或HTML頁面的標題。

示例調用 (AI後臺的實際調用格式)：

{
  "tool": "generate_diagram",
  "arguments": {
    "prompt_id": "architecture",
    "file_type": "draw.io",
    "description": "微服務架構，包含用戶服務、訂單服務...",
    "output_file": "./ecommerce.drawio",
    "diagram_name": "電商系統架構"
  }
}

list_support_diagram_types

列出當前支持的所有 prompt_id 及其對應的 file_type 組合。

項目結構

draw-generator-mcp/
├── mcp_server.py                # MCP 服務器主文件
├── prompts/                     # 提示詞模板目錄
│   ├── 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                 # 環境變量示例
├── pyproject.toml               # (可選) 項目配置
├── requirements.txt             # (推薦) 依賴列表
└── README.md                    # 項目文檔

[+] 常見問題 (FAQ)

Q: 如何擴展更多圖表類型或Prompt模板？

A: 非常簡單！只需兩步：

1. 添加Prompt文件：在 prompts/ 目錄下，創建一個新的 .md 文件，寫入你的指令。例如 my_custom_diagram.md。
2. 更新配置字典：打開 mcp_server.py，修改 TOOLS_PROMPT_DICT 字典：

TOOLS_PROMPT_DICT = {
    # ... 已有條目
    "my_custom_type": {  # <== 新增一個條目
        "id": "my_custom_type",
        "description": "生成我自定義的圖表",
        "prompts": {
            "draw.io": "prompts/my_custom_diagram.md" # 指向你的新文件
        }
    },
}

重啟MCP服務器即可生效！