AI Diagram & Prototype Generator (MCP Server)

一个专业的AI驱动的图表与原型绘制MCP服务器它深度集成了智谱AIOpenAIGemini等多种大语言模型能够根据自然语言描述智能生成多种风格的 draw.io 格式图表和 HTML 交互式产品原型

功能特性 (Features)

• AI 驱动生成内置多种强大的AI模型智能理解复杂需求
• 多图表类型不仅能画架构图流程图还能生成多种风格的UI/UX原型
• **风格化原型 (Styled Prototypes)**内置苹果HIG微信小程序等专业设计规范一句话生成苹果味或微信味的精准原型
• 动态提示词系统独创的(意图+格式)组合式提示词系统精确稳定地指导AI进行创作
• Draw.io & HTML 兼容可生成 .drawio 文件用于二次编辑或生成可直接运行的 .html 文件进行交互演示
• MCP 协议基于 Model Context Protocol可无缝与支持MCP的AI助手如OpenAI的AssistantsCozeDify各种IDE插件等集成

基础生成工具 (Basic Generation Tools)

这些是构成工作流的原子能力也可以单独调用

效果

以下范例通过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": "glm-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

使用方法

在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'
- 描述这是一个音乐播放器应用主界面是一个可滚动的歌单列表底部有一个正在播放的迷你控制条点击列表项可以进入播放详情页详情页有专辑封面播放进度条和控制按钮

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/                     # 提示词模板目录
 .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服务器即可生效

Q:Q: PPT的样式比如颜色可以自定义吗

A: 当然可以PPT的视觉风格由单页生成Prompt prompts/ppt_svg_prompt.md 决定打开该文件在 视觉与布局指南 部分您可以直接修改 色彩 规则中的主色调HEX代码这使得所有生成的幻灯片都能轻松符合您的品牌或特定主题的规范