AI-Diagram-Prototype-Generator-MCP-Server-
AI Diagram & Prototype File Generator (MCP Server)
Documentation
AI Diagram & Prototype Generator (MCP Server)
一个专业的、AI驱动的图表与原型绘制MCP服务器。它深度集成了智谱AI、OpenAI、Gemini等多种大语言模型,能够根据自然语言描述,智能生成多种风格的 `draw.io` 格式图表和 `HTML` 交互式产品原型。
✨ 功能特性 (Features)
基础生成工具 (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模型生成
对话过程



生成的架构图

生成的业务流程图

生成的APP原型

生成的用户画像

生成的用户故事地图

生成的用户旅程图

生成的同理心图

⚙️ 安装与配置
1\. 环境要求
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.txt3\. 配置 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"
}
}
}
}说明:
📖 使用方法
在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`
根据指定的意图和格式,生成图表或原型。
参数:
示例调用 (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代码。这使得所有生成的幻灯片都能轻松符合您的品牌或特定主题的规范。
Frequently asked questions
What is AI-Diagram-Prototype-Generator-MCP-Server-?
AI-Diagram-Prototype-Generator-MCP-Server- is AI Diagram & Prototype File Generator (MCP Server)
How do I install AI-Diagram-Prototype-Generator-MCP-Server-?
Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.
Is AI-Diagram-Prototype-Generator-MCP-Server- open source?
Yes, it is hosted on GitHub at https://github.com/simonutd/ai-diagram-prototype-generator-mcp-server- and has 58 stars.
Related MCP tools
🙌 OpenHands: Code Less, Make More for the Model Context Protocol. Enhance AI assistants with powerful integrations. Python-based implementation.
Universal memory layer for AI Agents; Announcing OpenMemory MCP - local and secure memory management. Python-based implementation.
基于大模型搭建的聊天机器人,同时支持 微信公众号、企业微信应用、飞书、钉钉 等接入,可选择ChatGPT/Claude/DeepSeek/文心一言/讯飞星火/通义千问/ Gemini/GLM-4/Kimi/LinkAI,能处理文本、语音和图片,访问操作系统和互联网,支持基于自有知识库进行定制企业智能客服。
An LLM agent that conducts deep research (local and web) on any given topic and generates a long report with citations. Built for the Model Context Protocol to
🚀 The fast, Pythonic way to build MCP servers and clients Trusted by 19900+ developers. Trusted by 19900+ developers. Trusted by 19900+ developers.
🔥 MaxKB is an open-source platform for building enterprise-grade agents. MaxKB 是强大易用的开源企业级智能体平台。 for the Model Context Protocol. Enhance AI assistants with po
Run your own MCP server? See who uses it and what to fix.
Measure it with TrackMCP