STARWARCLOUD STARWAR.AI
返回市场
人工智能图表原型生成器MCP服务器

人工智能图表原型生成器MCP服务器

作者：SimonUTD60 星标更新：2025-09-13
安装使用来源：spider==github.com

项目介绍

AI 图表与原型生成器 (MCP 服务器)

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

✨ 特性

  • 🤖 AI 驱动生成 内置多个强大的 AI 模型，能够智能理解复杂需求。
  • 🎨 多种图表类型 不仅可以绘制架构图和流程图，还能生成各种风格的 UI/UX 原型。
  • 📱 样式化原型 内置专业设计标准，如 Apple HIG 和微信小程序，一句话即可生成“苹果风味”或“微信风味”的精准原型。
  • 🧊 动态提示词系统 独特的 (意图+格式) 组合提示词系统，准确稳定地引导 AI 创作。
  • 🔧 Draw.io & HTML 兼容 可生成 .drawio 文件用于二次编辑，或生成可执行的 .html 文件进行交互演示。
  • 🤝 MCP 协议 基于模型上下文协议，可无缝集成支持 MCP 的 AI 助手，如 OpenAI 的助手、Coze、Dify、各种 IDE 插件等。

基础生成工具

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

功能/意图prompt_id支持格式（file_type）
生成技术架构图architecturedraw.io
生成业务流程图flowchartdraw.io
生成通用 UI/UX 原型UI_UXdraw.io (线框图)，html
生成苹果风格应用原型APPLE_MOBILE_APPhtml
生成微信小程序原型WEIXIN_MICROAPPhtml
生成用户故事地图USER_STORY_MAPdraw.io，html
生成服务蓝图SERVICE_BLUEPRINTdraw.io
生成用户画像USER_PERSONAdraw.io
生成用户旅程图USER_JOURNEY_MAPdraw.io
生成同理心图EMPATHY_MAPdraw.io
生成金字塔图PYRAMID_DIAGRAMdraw.io，svg
生成费曼学习法信息图FEYNMAN_INFO_GRAPHICSsvg

🚀 效果

以下示例是通过 GLM-4.5 模型配合此 MCP 与 chatwise 一起生成的

对话过程

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

生成的架构图

生成的架构图

生成的业务流程图

生成的业务流程图

生成的 APP 原型

生成的 APP 原型

生成的用户画像

生成的用户画像

生成的用户故事地图

生成的用户故事地图

生成的用户旅程图

生成的用户旅程图

生成的同理心图

生成的同理心图

⚙️ 安装与配置

1. 环境要求

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

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  # 在 Windows 上使用 `.venv\Scripts\activate`

# 3. 安装依赖
pip install -r requirements.txt

3. 配置 API 密钥

获取 API 密钥

你需要从以下至少一个服务提供商处获取 API 密钥：

  1. 智谱 AI (ZhipuAI): 智谱 AI 开放平台
  2. OpenAI: OpenAI 平台
  3. Google Gemini: Google AI for Developers

配置 .env 文件

这是最重要且推荐的配置方法。

# 1. 复制环境变量模板
cp .env.example .env

# 2. 编辑 .env 文件，填入你的配置信息
# 将 PROVIDER 设置为你希望默认使用的服务商 (zhipuai, openai, gemini)
PROVIDER="zhipuai"

# 填入你获取的 API 密钥
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 密钥。

📖 使用指南

在 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 (字符串，必需）意图 ID。通过 list_support_diagram_types 工具获取。
  • file_type (字符串，必需）输出文件格式。
  • description (字符串，必需）图表或原型的详细描述。
  • output_file (字符串，必需）输出文件的完整路径。
  • diagram_name (字符串，可选)：图表或 HTML 页面的标题。

示例调用（实际后端调用格式）：

{
  "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: 如何扩展更多图表类型或提示模板？

A: 非常简单！只需两个步骤：

  1. 添加提示文件：在 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: 能否定制 PPT 的样式（如颜色）？

A: 当然可以。PPT 的视觉样式由单页生成的 Prompt 提示文件 prompts/ppt_svg.prompt.md 决定。打开该文件，在视觉和布局指南部分，你可以直接修改颜色规则中的主色 HEX 代码。这样，所有生成的幻灯片都能符合你的品牌规格或特定主题。