Ai Diagram Prototype Generator MCP Server

🚀 AI Diagram & Prototype Generator (MCP Server)

このツールは、AIによって駆動される、高度な専用MCPサーバーです。智譜AI、OpenAI、Geminiなどの複数の大規模言語モデルを深く統合し、自然言語の記述に基づいて、draw.io 形式の様々なスタイルのダイアグラムと HTML 形式のインタラクティブなプロダクトプロトタイプを自動生成することができます。

✨ 主な機能

• 🤖 AI駆動生成：複数の強力なAIモデルを搭載し、複雑な要求を理解します。
• 🎨 多様なダイアグラムタイプ：アーキテクチャ図やフローチャートだけでなく、様々なスタイルのUI/UXプロトタイプも生成できます。
• 📱 スタイル化されたプロトタイプ：Apple HIGや微信小程序などの専門的なデザイン規格を内蔵し、自然言語で「Apple風」または「微信風」の正確なプロトタイプを生成します。
• 🧊 動的プロンプトシステム：独自の (意図 + 形式) の組み合わせ型プロンプトシステムで、AIに正確かつ安定した創作を促します。
• 🔧 Draw.ioとHTML互換性：二次編集用の .drawio ファイルを生成するか、直接実行可能な .html ファイルを生成してインタラクティブなデモを行えます。
• 🤯 スマートフォールバックメカニズム：AIがDraw.ioダイアグラムを生成できない場合や内容が簡素すぎる場合、自動的に内蔵のルールエンジンに切り替え、常に出力を保証します。
• 🤝 MCPプロトコル：Model Context Protocolに基づき、MCPをサポートするAIアシスタント（OpenAIのAssistants、Coze、Dify、各種IDEプラグインなど）とシームレスに統合できます。

🚀 サポートされるダイアグラムとプロトタイプ

このツールは prompt_id (意図) と file_type (出力形式) の組み合わせによって駆動されます。現在サポートされている組み合わせは以下の通りです。

🚀 実行例

以下の例は、chatwiseを使用し、本MCPと組み合わせてglm-4.5モデルで生成されたものです。

会話の流れ

生成されたアーキテクチャ図

生成されたビジネスフローチャート

生成された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キーの取得

以下の少なくとも1つのサービスプロバイダーからAPIキーを取得する必要があります。

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キーを入力する
ZHIPUAI_API_KEY="your_zhipuai_api_key_here"
OPENAI_API_KEY="your_openai_api_key_here"
GEMINI_API_KEY="your_gemini_api_key_here"

# (オプション) 各サービスプロバイダーにデフォルトのモデルと最大トークン数を指定することもできます
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": "gglm-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'
- 描述：这是一个音乐播放器应用，主界面是一个可滚动的歌单列表，底部有一个正在播放的迷你控制条。点击列表项可以进入播放详情页，详情页有专辑封面、播放进度条和控制按钮。

📚 ドキュメント

generate_diagram

指定された意図と形式に基づいて、ダイアグラムまたはプロトタイプを生成します。

パラメータ:

• prompt_id (文字列, 必須): 意図ID。list_support_diagram_types ツールで取得できます。
• file_type (文字列, 必須): 出力ファイルの形式。
• description (文字列, 必須): ダイアグラムまたはプロトタイプの詳細な説明。
• output_file (文字列, 必須): 出力ファイルの完全なパス。
• diagram_name (文字列, オプション): ダイアグラムまたは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/                     # プロンプトテンプレートのディレクトリ
│   ├── architecture_as_drawio.md
│   ├── flowchart_as_drawio.md
│   ├── ui_ux_as_drawio.md
│   ├── ui_ux_as_html.md
│   ├── apple_mobile_prototype_prompt.md
│   └── weixin_miniapp_prompt.md
├── .env.example                 # 環境変数のサンプル
├── pyproject.toml               # (オプション) プロジェクトの設定
├── requirements.txt             # (推奨) 依存関係のリスト
└── README.md                    # プロジェクトのドキュメント

[+] よくある質問 (FAQ)

Q: より多くのダイアグラムタイプやプロンプトテンプレートを拡張するにはどうすればいいですか？

A: 非常に簡単です！2つの手順で行えます。

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サーバーを再起動すると、設定が反映されます！