AI Diagram & Prototype Generator (MCP Server)

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

✨ 功能特性 (Features)

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

基础生成工具 (Basic Generation Tools)

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

功能/意图 (Intent)	`prompt_id`	支持格式 (`file_type`)
生成技术架构图	`architecture`	`draw.io`
生成业务流程图	`flowchart`	`draw.io`
生成通用UI/UX原型	`UI_UX`	`draw.io` (线框图), `html`
生成苹果风格App原型	`APPLE_MOBILE_APP`	`html`
生成微信小程序原型	`WEIXIN_MICROAPP`	`html`
生成用户故事地图	`USER_STORY_MAP`	`draw.io`, `html`
生成服务蓝图	`SERVICE_BLUEPRINT`	`draw.io`
生成用户画像	`USER_PERSONA`	`draw.io`
生成用户旅程图	`USER_JOURNEY_MAP`	`draw.io`
生成同理心图	`EMPATHY_MAP`	`draw.io`
生成金字塔图	`PYRAMID_DIAGRAM`	`draw.io`, `svg`
生成费曼学习法信息图	`FEYNMAN_INFO_GRAPHICS`	`svg`

🚀 效果

以下范例通过chatwise 配合本mcp，使用glm-4.5模型生成

对话过程

对话流程1 对话流程2 对话流程3

生成的架构图

生成的业务流程图

生成的架构图

生成的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：

智谱AI (ZhipuAI): 智谱AI开放平台
OpenAI: OpenAI Platform
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: 非常简单！只需两步：

添加Prompt文件: 在 prompts/ 目录下，创建一个新的 .md 文件，写入你的指令。例如 my_custom_diagram.md。

更新配置字典: 打开 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代码。这使得所有生成的幻灯片都能轻松符合您的品牌或特定主题的规范。

AI Diagram Prototype Generator

AI Diagram & Prototype Generator (MCP Server)

✨ 功能特性 (Features)

基础生成工具 (Basic Generation Tools)

🚀 效果

对话过程

生成的架构图

生成的业务流程图

生成的APP原型

生成的用户画像

生成的用户故事地图

生成的用户旅程图

生成的同理心图

⚙️ 安装与配置

1. 环境要求

2. 安装依赖

3. 配置 API Key

获取API Key

配置 `.env` 文件

4. 配置 MCP 客户端

📖 使用方法

示例1：生成架构图

示例2：生成苹果风格原型

API 参考

`generate_diagram`

`list_support_diagram_types`

项目结构

`[+]` 常见问题 (FAQ)

Q: 如何扩展更多图表类型或Prompt模板？

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

Be the First to Experience MCP Now

AI Diagram Prototype Generator

AI Diagram & Prototype Generator (MCP Server)

✨ 功能特性 (Features)

基础生成工具 (Basic Generation Tools)

🚀 效果

对话过程

生成的架构图

生成的业务流程图

生成的APP原型

生成的用户画像

生成的用户故事地图

生成的用户旅程图

生成的同理心图

⚙️ 安装与配置

1. 环境要求

2. 安装依赖

3. 配置 API Key

获取API Key

配置 .env 文件

4. 配置 MCP 客户端

📖 使用方法

示例1：生成架构图

示例2：生成苹果风格原型

API 参考

generate_diagram

list_support_diagram_types

项目结构

[+] 常见问题 (FAQ)

Q: 如何扩展更多图表类型或Prompt模板？

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

Be the First to Experience MCP Now

配置 `.env` 文件

`generate_diagram`

`list_support_diagram_types`

`[+]` 常见问题 (FAQ)