trackmcp
Back to directory
simonutd

AI-Diagram-Prototype-Generator-MCP-Server-

View on GitHub

AI Diagram & Prototype File Generator (MCP Server)

58 stars PythonAI & Machine Learning Updated Oct 19, 2025

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

    对话过程

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

    生成的架构图

    生成的架构图

    生成的业务流程图

    生成的架构图

    生成的APP原型

    生成的APP原型

    生成的用户画像

    生成的用户画像

    生成的用户故事地图

    生成的用户故事地图

    生成的用户旅程图

    生成的用户旅程图

    生成的同理心图

    生成的同理心图

    ⚙️ 安装与配置

    1\. 环境要求

      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开放平台

      2. OpenAI: OpenAI Platform

      3. Google Gemini: Google AI for Developers

      配置 `.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"
            }
          }
        }
      }

      说明:

        📖 使用方法

        在AI助手中,通过清晰的指令调用工具。请确保你的指令包含了做什么 (`prompt_id`)生成什么格式 (`file_type`)保存到哪里 (`output_file`) 的关键信息。

        示例1:生成架构图

        code
        帮我生成一个技术架构图,意图是 `architecture`,格式是 `draw.io`,保存到 `./output/my_system.drawio`。
        描述如下:一个电商系统,有Web和App前端,后端采用微服务架构,包括用户、商品和订单三个服务,使用MySQL作为主数据库,Redis做缓存。

        示例2:生成苹果风格原型

        code
        请帮我设计一个苹果风格的App原型。
        - prompt_id 是 'APPLE_MOBILE_APP'
        - file_type 是 'html'
        - output_file 是 './output/ios_music_player.html'
        - 描述:这是一个音乐播放器应用,主界面是一个可滚动的歌单列表,底部有一个正在播放的迷你控制条。点击列表项可以进入播放详情页,详情页有专辑封面、播放进度条和控制按钮。

        API 参考

        你的AI助手将会调用以下工具:

        `generate_diagram`

        根据指定的意图和格式,生成图表或原型。

        参数:

          示例调用 (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` 组合。

          项目结构

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

          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

          Run your own MCP server? See who uses it and what to fix.

          Measure it with TrackMCP