Skip to main content
Glama

AI Diagram & Prototype Generator

by SimonUTD
GitHub
Python
MIT License
44
  • Linux
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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原型

生成的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助手中，通过清晰的指令调用工具。请确保你的指令包含了做什么 (、生成什么格式 ( 和 保存到哪里 ( 的关键信息。

示例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: 非常简单！只需两步：

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

Deploy Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

Enables generation of professional diagrams and interactive prototypes from natural language descriptions using multiple AI models. Supports creating draw.io diagrams, HTML prototypes, and styled mobile app interfaces with Apple HIG and WeChat Mini Program design standards.

  1. ✨ 功能特性 (Features)
    1. 基础生成工具 (Basic Generation Tools)
  2. 🚀 效果
    1. 对话过程
    2. 生成的架构图
    3. 生成的业务流程图
    4. 生成的APP原型
    5. 生成的用户画像
    6. 生成的用户故事地图
    7. 生成的用户旅程图
    8. 生成的同理心图
  3. ⚙️ 安装与配置
    1. 1. 环境要求
    2. 2. 安装依赖
    3. 3. 配置 API Key
    4. 4. 配置 MCP 客户端
  4. 📖 使用方法
    1. 示例1：生成架构图
    2. 示例2：生成苹果风格原型
  5. API 参考
    1. generate_diagram
    2. list_support_diagram_types
  6. 项目结构
    1. [+] 常见问题 (FAQ)
      1. Q: 如何扩展更多图表类型或Prompt模板？
      2. Q:Q: PPT的样式（比如颜色）可以自定义吗？

    Related MCP Servers

    • Magic Component Platform (MCP)

      21st-dev
      A
      security
      F
      license
      A
      quality
      An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
      Last updated -
      4
      3,918
      3,681
      • Linux
      • Apple

    • Magic Component Platform

      oyasimi1209
      A
      security
      F
      license
      A
      quality
      AI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.
      Last updated -
      3
      2

    • 21st.dev Magic AI Agent

      zackbissell
      A
      security
      F
      license
      A
      quality
      A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
      Last updated -
      4
      3,918

    • Hi-AI

      su-record
      A
      security
      F
      license
      A
      quality
      A simple AI development tool that helps users interact with AI through natural language commands, offering 29 tools across thinking, memory, browser, code quality, planning, and time management capabilities.
      Last updated -
      33
      6
      1

    View all related MCP servers

    Appeared in Searches

    New MCP Servers

    MCP directory API

    We provide all the information about MCP servers via our MCP API.

    curl -X GET 'https://glama.ai/api/mcp/v1/servers/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-'

    If you have feedback or need assistance with the MCP directory API, please join our Discord server