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)

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

🚀 效果

以下范例通过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：生成架构图

帮我生成一个技术架构图，意图是 

... [View full README on GitHub](https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-#readme)