# AI Diagram Prototype Generator MCP Server

> AI Diagram & Prototype File Generator (MCP Server)

- **Type:** MCP server
- **Install:** `agentstack add mcp-simonutd-ai-diagram-prototype-generator-mcp-server`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [SimonUTD](https://agentstack.voostack.com/s/simonutd)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [SimonUTD](https://github.com/SimonUTD)
- **Source:** https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-

## Install

```sh
agentstack add mcp-simonutd-ai-diagram-prototype-generator-mcp-server
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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模型生成

### 对话过程

### 生成的架构图

### 生成的业务流程图

### 生成的APP原型

### 生成的用户画像

### 生成的用户故事地图

### 生成的用户旅程图

### 生成的同理心图

## ⚙️ 安装与配置

### 1\. 环境要求

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

### 2\. 安装依赖

```bash
# 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开放平台](https://open.bigmodel.cn/)
2.  **OpenAI**: [OpenAI Platform](https://platform.openai.com/)
3.  **Google Gemini**: [Google AI for Developers](https://ai.google.dev/)

#### 配置 `.env` 文件

这是**最重要也是最推荐**的配置方式。

```bash
# 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服务器。以下是一个更简洁、更安全的配置示例：

```json
{
  "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后台的实际调用格式)**:

```json
{
  "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` 字典：
    ```python
    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代码。这使得所有生成的幻灯片都能轻松符合您的品牌或特定主题的规范。

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [SimonUTD](https://github.com/SimonUTD)
- **Source:** [SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-](https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-simonutd-ai-diagram-prototype-generator-mcp-server
- Seller: https://agentstack.voostack.com/s/simonutd
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.