AI-Diagram-Prototype-Generator -

AI Diagram & Prototype Generator provides an MCP-based workflow to produce diagram and UI/UX prototypes from natural language descriptions. It can output both draw.io (XML-like) diagrams and standalone HTML prototypes. The system supports multiple prompt templates and basic generation tools, including architecture diagrams, business processes, UI/UX mockups, Apple-style apps, and WeChat mini-apps. Use the generate_diagram tool to specify a prompt_id (e.g., architecture, flowchart, UI_UX, APPLE_MOBILE_APP, WEIXIN_MICROAPP) and a file_type (e.g., draw.io, html). Provide a description of the system you want, and an output_file path where the result should be saved. You can list supported prompt_id/file_type combinations with list_support_diagram_types to tailor the input to your desired diagram type and format.

Prerequisites:

• Python 3.10+
• git
• pip (or uv)

Install steps:

1. Clone the MCP server repository

git clone https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-.git
cd AI-Diagram-Prototype-Generator-MCP-Server-

2. Create and activate a virtual environment

On macOS/Linux:

python -m venv .venv
source .venv/bin/activate

On Windows:

python -m venv .venv
.\.venv\Scripts\activate

3. Install dependencies

pip install -r requirements.txt

4. Configure API keys

• Copy the environment example and fill in your keys.

cp .env.example .env

Edit .env to include PROVIDER, and API keys (ZHIPUAI_API_KEY, OPENAI_API_KEY, GEMINI_API_KEY) and any default model settings you prefer. 5) Run the MCP server

python mcp_server.py

Note: The exact invocation may vary depending on how you host the server. The README examples suggest Python-based execution, but you may wrap this in a uvx command or other orchestrator as shown in the MCP client configuration.

Tips and notes:

• Provide at least one API provider (ZhipuAI, OpenAI, or Gemini) via the .env file or the client configuration to enable diagram generation.
• The system can emit both .drawio files for editing in Draw.io and standalone .html files for direct demonstration.
• Use clear prompt_id and file_type to ensure the generated diagram matches your desired format andStyling guidelines (for example, APPLE_MOBILE_APP for Apple-styled HTML prototypes).
• The mcp_server.py file and prompts/ directory contain templates and prompts that control how AI models synthesize diagrams and prototypes; extending prompts is covered in the FAQ section of the README.
• When configuring MCP clients, prefer using the .env approach for per-server settings; avoid embedding API keys directly in the mcp client config.