Gemini Diagram MCP

双子图mcp

](https://www.npmjs.com/package/gemini-diagram-mcp) 

MCP服务器，用于在Vertex AI上使用Gemini图像生成来生成图表、图表和可视化。

特性

• 智能检测：自动从提示中检测图表类型，不确定时询问澄清问题
• 通用：适用于Claude Code、Claude Desktop、Cursor、Windsurf、Cline和任何MCP客户端
• 专业造型：具有适当排版和调色板的一致SaaS美学
• 可配置的：宽高比（16:9、1:1、4:3等）和分辨率（1K、2K、4K）
• 健壮：使用指数回退重试逻辑，生成图像验证
• 迭代的：优化上次生成的图像，而不重复完整提示

工具

参数

generate_image

refine_image

安装

1.获取API密钥

获取Vertex AI快速模式流的Vertex AI API键。服务器强制执行 vertexai: true 默认为 gemini-3-pro-image-preview （Nano Banana Pro级）。

2.选择运行方式

您可以通过两种方式运行此MCP：

1. 本地stdio服务器（经典MCP）：每个客户端生成 npx gemini-diagram-mcp 并将Vertex AI API密钥提供给客户端。
2. 集中式HTTP服务器（建议团队使用）：使用API密钥+auth（静态令牌或OIDC）运行一个Docker容器，并让客户端通过本地代理连接（客户端上没有API密钥）。

集中式部署（Docker）

这将运行一个所有代理共享的MCP服务器。

需求

• VERTEX_AI_API_KEY （首选）
• GOOGLE_API_KEY 或 GOOGLE_CLOUD_API_KEY （向后兼容的别名）
• GOOGLE_GENAI_USE_VERTEXAI=true 由服务器强制执行
• VERTEX_AI_IMAGE_MODEL=gemini-3-pro-image-preview 默认情况下
• 身份验证（选择一个）：

- 静态令牌 （默认）： MCP_AUTH_MODE=token + MCP_AUTH_TOKEN （或 MCP_AUTH_TOKENS) - OIDC JWT （建议多用户使用）： MCP_AUTH_MODE=oidc + OIDC_ISSUER (+ OIDC_AUDIENCE 推荐） - 无需认证 （不推荐）： MCP_AUTH_MODE=none （仅在受信任的身份验证代理/专用网络后安全）

建议 .env

VERTEX_AI_API_KEY=your-vertex-ai-api-key
# GOOGLE_GENAI_USE_VERTEXAI=true
# VERTEX_AI_IMAGE_MODEL=gemini-3-pro-image-preview
# PUBLIC_BASE_URL=http://:3000

# Auth (choose one)
MCP_AUTH_MODE=token
MCP_AUTH_TOKEN=your-strong-token

# Or: OIDC JWT auth (per-user tokens)
# MCP_AUTH_MODE=oidc
# OIDC_ISSUER=https://issuer.example.com/realms/your-realm
# OIDC_AUDIENCE=your-audience
# OIDC_JWKS_URI=https://issuer.example.com/.../jwks.json

跑

export VERTEX_AI_API_KEY="your-vertex-ai-api-key"
export MCP_AUTH_MODE="token"
export MCP_AUTH_TOKEN="your-strong-token"
docker compose up --build

输出被写入 ./data/out 在主机上（通过绑定挂载）。

MCP终点为：

• 流式HTTP： http://localhost:3000/mcp
• 传统苏格兰和南方能源公司： http://localhost:3000/sse

所有端点都需要身份验证。根据您的身份验证模式：

静态令牌模式 (MCP_AUTH_MODE=token):

• Authorization: Bearer $MCP_AUTH_TOKEN （推荐），或
• ?token=$MCP_AUTH_TOKEN （对于无法设置标头的客户端很有用）

OIDC JWT模式 (MCP_AUTH_MODE=oidc):

• Authorization: Bearer
• ?token=... 在oidc模式下默认禁用；集 MCP_ALLOW_QUERY_TOKEN=1 允许（不推荐）

客户端设置（本地代理）

对于期望 command/args （Claude Code、Claude Desktop、VS Code集成等），运行包含的stdio代理，这样客户端就可以与stdio对话，但执行发生在中央服务器上。

设置环境：

• MCP_REMOTE_URL （默认值： http://localhost:3000/mcp)
• MCP_BEARER_TOKEN （必填；OIDC访问令牌或静态令牌）

示例（克劳德代码）：

claude mcp add-json gemini-image '{
  "command":"npx",
  "args":["gemini-diagram-mcp","proxy"],
  "env":{
    "MCP_REMOTE_URL":"http://localhost:3000/mcp",
    "MCP_BEARER_TOKEN":"your-bearer-token"
  }
}'

示例（克劳德桌面）：

添加 claude_desktop_config.json:

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• 窗户： %APPDATA%\\Claude\\claude_desktop_config.json

{
  "mcpServers": {
    "gemini-image": {
      "command": "npx",
      "args": ["gemini-diagram-mcp", "proxy"],
      "env": {
        "MCP_REMOTE_URL": "http://localhost:3000/mcp",
        "MCP_BEARER_TOKEN": "your-bearer-token"
      }
    }
  }
}

示例（VS代码/临床）：

{
  "gemini-image": {
    "command": "npx",
    "args": ["gemini-diagram-mcp", "proxy"],
    "env": {
      "MCP_REMOTE_URL": "http://localhost:3000/mcp",
      "MCP_BEARER_TOKEN": "your-bearer-token"
    }
  }
}

其他MCP客户端（Codex CLI、opencode等）：

如果您的客户端支持配置MCP服务器 command + args + env，使用相同的代理配置：

• command: npx
• args: ["gemini-diagram-mcp","proxy"]
• env: MCP_REMOTE_URL, MCP_BEARER_TOKEN

本地（经典）安装

无需构建-只需使用 npx:

克劳德代码

claude mcp add-json gemini-image '{"command":"npx","args":["gemini-diagram-mcp"],"env":{"VERTEX_AI_API_KEY":"your-vertex-ai-api-key"}}'

或手动编辑 ~/.claude.json:

{
  "mcpServers": {
    "gemini-image": {
      "command": "npx",
      "args": ["gemini-diagram-mcp"],
      "env": {
        "VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
      }
    }
  }
}

光标

添加到光标设置(Preferences > MCP Servers):

{
  "gemini-image": {
    "command": "npx",
    "args": ["gemini-diagram-mcp"],
    "env": {
      "VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
    }
  }
}

帆板运动

添加 ~/.windsurf/mcp.json:

{
  "mcpServers": {
    "gemini-image": {
      "command": "npx",
      "args": ["gemini-diagram-mcp"],
      "env": {
        "VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
      }
    }
  }
}

克劳德桌面版

添加 claude_desktop_config.json:

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• 窗户： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "gemini-image": {
      "command": "npx",
      "args": ["gemini-diagram-mcp"],
      "env": {
        "VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
      }
    }
  }
}

Cline（VS代码）

添加到VS代码中的临床MCP设置：

{
  "gemini-image": {
    "command": "npx",
    "args": ["gemini-diagram-mcp"],
    "env": {
      "VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
    }
  }
}

3.重新启动客户端

重新启动应用程序以加载MCP服务器。

使用示例

User: "Create an architecture diagram showing React → API Gateway → Lambda → DynamoDB"
AI: → Generated architecture (4:3, 2K): ./react_api_gateway.png

User: "Make the arrows thicker"
AI: → Refined image: ./react_api_gateway_refined.png

User: "Compare latency: 450ms before vs 120ms after optimization"
AI: → Generated comparison (16:9, 2K): ./latency_comparison.png

User: "Create a nice visual for my presentation"
AI: "I'm not certain about the best visualization type. What type would you prefer?
     - chart: Data visualization with clear labels
     - comparison: Side-by-side panels
     - flow: Sequential stages with arrows
     - architecture: System components with connections
     ..."

智能检测

服务器会自动从您的提示中检测最佳设置：

建筑

src/
├── index.ts              # CLI entry point (stdio/http/proxy)
├── http.ts               # Centralized HTTP MCP server
├── proxy.ts              # Stdio proxy that forwards to HTTP server
├── stdio.ts              # Classic stdio MCP server
├── mcp.ts                # Tool registration shared across modes
├── gemini/
│   ├── index.ts          # Module exports
│   └── client.ts         # Gemini API client with smart detection

运作原理

1. 智能分析: analyzePrompt() 对类型关键字进行分数提示，返回置信度
2. 澄清性问题：信心低→ 返回问题而不是生成
3. 提示增强：用专业的造型说明迅速包装
4. 图像生成：使用顶点AI模式 gemini-3-pro-image-preview 通过 @google/genai
5. 重试逻辑：3次指数回退尝试（1秒→ 2s → 4s)
6. 图像验证：验证生成的图像字节数，并使用正确的文件扩展名保存
7. 会话跟踪：每个MCP连接/会话的内存中（适用于集中式服务器）

贡献

欢迎投稿！请在上打开问题或PR .

许可证

麻省理工学院