Generates diagrams, charts, and visualizations using Google Vertex AI's Gemini image generation.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@gemini-diagram-mcp generate a flowchart explaining how HTTPS works"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for generating diagrams, charts, and visualizations using Gemini image generation on Vertex AI.
Smart Detection: Auto-detects diagram type from prompt, asks clarifying questions when uncertain
Universal: Works with Claude Code, Claude Desktop, Cursor, Windsurf, Cline, and any MCP client
Two Style Modes: professional (clean SaaS aesthetic) and creative (vintage, comic, dark theme, etc.)
Configurable: Aspect ratios (16:9, 1:1, 4:3, 9:16, 21:9, and more) and resolutions (1K, 2K, 4K)
Custom Watermark: Configurable watermark text rendered on every image
Iterative Refinement: Refine the last generated image without repeating the full prompt
Pre-generation Guidance: prepare_image tool returns prompt recommendations before you generate
Comic/Story Pattern: Built-in stock character (Alex) and comic art style for multi-panel storytelling
Robust: Retry logic with exponential backoff, generated image validation, dimension mismatch warnings
Three Deployment Modes: Local stdio, centralized HTTP server, or stdio proxy to remote server
Auth: Static bearer token, OIDC JWT, or no-auth (behind trusted proxy)
Related MCP server: fcp-drawio
Tool | Description |
| Generate a diagram/chart/visualization from natural language |
| Iteratively refine the last generated image |
| Get guidance, supported parameters, and a polished prompt before generating |
generate_image
Parameter | Type | Default | Description |
| string | required | Natural language description of the image |
| string | auto | Output filename (auto-generated from prompt if omitted) |
| enum |
|
|
| enum | auto |
|
| enum |
|
|
| enum |
|
|
| string |
| Watermark text in the bottom-right corner |
| boolean |
| Set |
refine_image
Parameter | Type | Description |
| string | Description of changes to apply to the last generated image |
prepare_image
Parameter | Type | Description |
| string | Optional draft prompt to analyze and polish |
| string | Optional type hint to get specific guidance |
Get a Vertex AI API key for the Vertex AI Express Mode flow. The server enforces vertexai: true and defaults to gemini-3-pro-image-preview (Nano Banana Pro).
You can run this MCP in three ways:
Local stdio server (classic MCP): each client spawns npx gemini-diagram-mcp and you provide the Vertex AI API key to the client.
Centralized HTTP server (recommended for teams): run one Docker container with the API key + auth (static token or OIDC), and have clients connect via a local proxy (no API key on clients).
CLI one-shot: npx gemini-diagram-mcp generate "your prompt" to generate directly from the command line.
This runs one MCP server that all agents share.
VERTEX_AI_API_KEY (preferred) or GOOGLE_API_KEY / GOOGLE_CLOUD_API_KEY
GOOGLE_GENAI_USE_VERTEXAI=true is enforced by the server
VERTEX_AI_IMAGE_MODEL=gemini-3-pro-image-preview by default (see Supported Models)
Auth (choose one):
Static token (default): MCP_AUTH_MODE=token + MCP_AUTH_TOKEN (or MCP_AUTH_TOKENS)
OIDC JWT (recommended for multi-user): MCP_AUTH_MODE=oidc + OIDC_ISSUER (+ OIDC_AUDIENCE recommended)
No auth (not recommended): MCP_AUTH_MODE=none (only safe behind a trusted auth proxy / private network)
.envVERTEX_AI_API_KEY=your-vertex-ai-api-key
# 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.jsonexport VERTEX_AI_API_KEY="your-vertex-ai-api-key"
export MCP_AUTH_MODE="token"
export MCP_AUTH_TOKEN="your-strong-token"
docker compose up --buildOutputs are written to ./data/out on the host (via bind mount).
The MCP endpoint will be:
Streamable HTTP: http://localhost:3000/mcp
Legacy SSE: http://localhost:3000/sse
All endpoints require auth. Depending on your auth mode:
Static token mode (MCP_AUTH_MODE=token):
Authorization: Bearer $MCP_AUTH_TOKEN (recommended), or
?token=$MCP_AUTH_TOKEN (useful for clients that can't set headers)
OIDC JWT mode (MCP_AUTH_MODE=oidc):
Authorization: Bearer <OIDC access token>
?token=... is disabled by default in oidc mode; set MCP_ALLOW_QUERY_TOKEN=1 to allow it (not recommended)
For MCP clients that expect command/args (Claude Code, Claude Desktop, VS Code integrations, etc.), run the included stdio proxy so the client talks stdio but execution happens on the central server.
Set environment:
MCP_REMOTE_URL (default: http://localhost:3000/mcp)
MCP_BEARER_TOKEN (required; OIDC access token or static token)
Example (Claude Code):
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"
}
}'Example (Claude Desktop):
Add to claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %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"
}
}
}
}Example (VS Code / Cline):
{
"gemini-image": {
"command": "npx",
"args": ["gemini-diagram-mcp", "proxy"],
"env": {
"MCP_REMOTE_URL": "http://localhost:3000/mcp",
"MCP_BEARER_TOKEN": "your-bearer-token"
}
}
}Other MCP clients (Codex CLI, opencode, etc.):
If your client supports configuring an MCP server with command + args + env, use the same proxy config:
command: npx
args: ["gemini-diagram-mcp","proxy"]
env: MCP_REMOTE_URL, MCP_BEARER_TOKEN
No build required — just use npx:
claude mcp add-json gemini-image '{"command":"npx","args":["gemini-diagram-mcp"],"env":{"VERTEX_AI_API_KEY":"your-vertex-ai-api-key"}}'Or manually edit ~/.claude.json:
{
"mcpServers": {
"gemini-image": {
"command": "npx",
"args": ["gemini-diagram-mcp"],
"env": {
"VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
}
}
}
}Add to Cursor settings (Preferences > MCP Servers):
{
"gemini-image": {
"command": "npx",
"args": ["gemini-diagram-mcp"],
"env": {
"VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
}
}
}Add to ~/.windsurf/mcp.json:
{
"mcpServers": {
"gemini-image": {
"command": "npx",
"args": ["gemini-diagram-mcp"],
"env": {
"VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
}
}
}
}Add to claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %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"
}
}
}
}Add to Cline MCP settings in VS Code:
{
"gemini-image": {
"command": "npx",
"args": ["gemini-diagram-mcp"],
"env": {
"VERTEX_AI_API_KEY": "your-vertex-ai-api-key"
}
}
}Restart the application to load the MCP server.
Generate images directly from the command line:
export VERTEX_AI_API_KEY="your-key"
npx gemini-diagram-mcp generate "Architecture: React → API Gateway → Lambda → DynamoDB"
npx gemini-diagram-mcp generate "Sales funnel chart" -t chart --size 4K --style creative
npx gemini-diagram-mcp generate "Vintage poster for a coffee shop" --style creative -o poster.pngUser: "Create an architecture diagram showing React → API Gateway → Lambda → DynamoDB"
AI: → Generated architecture (4:3, 2K, style: professional): ./react_api_gateway.png
User: "Make the arrows thicker and add a Redis cache layer"
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: "A vintage travel poster for Tokyo, art deco style"
AI: → Tip: set style: "creative" to remove professional constraints
AI: → Generated hero (16:9, 2K, style: creative): ./vintage_tokyo.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
..."The server auto-detects optimal settings from your prompt:
Keyword | Detected Type | Aspect Ratio |
"compare", "vs", "before/after" | comparison | 16:9 |
"flow", "process", "pipeline" | flow | 16:9 |
"architecture", "system", "layers" | architecture | 4:3 |
"timeline", "roadmap", "phases" | timeline | 16:9 |
"hierarchy", "org chart", "tree" | hierarchy | 4:3 |
"matrix", "grid", "quadrant" | matrix | 1:1 |
"presentation", "slide", "4k" | (any) | 4K resolution |
"square" | (any) | 1:1 |
"wide", "banner", "header" | (any) | 16:9 |
"portrait", "mobile", "story" | (any) | 9:16 |
Mode | Description |
| White background, SaaS color palette, sans-serif fonts, clean enterprise look |
| No aesthetic constraints — your prompt controls colors, fonts, backgrounds, and artistic effects |
Keywords like "vintage", "comic", "dark theme", "watercolor", "retro", "sketch" automatically trigger a tip to switch to creative mode.
Model ID | Codename | Tier | Best For |
| Nano Banana Pro | Pro (default) | Complex diagrams, high-fidelity text rendering, professional assets. Uses reasoning ("Thinking"). |
| Nano Banana 2 | Flash | Speed, high-volume, low-latency use cases. Supports 0.5K–4K resolution. |
| Nano Banana | Flash (legacy) | Cheapest, basic image generation. |
Set via VERTEX_AI_IMAGE_MODEL environment variable.
src/
├── index.ts # CLI entry point (stdio / http / proxy / generate)
├── http.ts # Centralized HTTP MCP server (Streamable HTTP + legacy SSE)
├── proxy.ts # Stdio proxy that forwards to a remote HTTP MCP server
├── stdio.ts # Classic stdio MCP server
├── mcp.ts # MCP tool registration (shared across all modes)
├── auth.ts # Authentication middleware (token / OIDC JWT / none)
├── runtime.ts # Environment config, version, model defaults
├── gemini/
│ ├── index.ts # Module exports
│ └── client.ts # Gemini API client with smart detection & prompt engineeringSmart Analysis: analyzePrompt() scores prompt against type keywords, returns confidence level
Clarifying Questions: Low confidence → returns question instead of generating
Prompt Enhancement: Wraps prompt with style instructions (professional or creative) + watermark
Technical Diagrams: Architecture/flow types get visual vocabulary injection (cylinders for DBs, pipes for queues, etc.)
Image Generation: Uses Vertex AI mode with @google/genai SDK
Retry Logic: 3 attempts with exponential backoff (1s → 2s → 4s)
Image Validation: Verifies generated bytes (PNG/JPEG/WebP/GIF), correct extension, dimensions
Session Tracking: In-memory per MCP connection/session (suitable for centralized servers)
┌──────────────┐ stdio ┌──────────────────┐
│ MCP Client │◄──────────────►│ stdio server │ (local, classic)
│ (Claude/etc) │ │ (npx ... ) │
└──────────────┘ └──────────────────┘
┌──────────────┐ stdio ┌──────────────┐ HTTP ┌──────────────────┐
│ MCP Client │◄──────────────►│ stdio proxy │◄──────────►│ HTTP server │
│ (Claude/etc) │ │ (npx proxy) │ │ (Docker/forge) │
└──────────────┘ └──────────────┘ └──────────────────┘
┌──────────────┐ ┌──────────────────┐
│ CLI │───────────────────────────────────────────►│ Gemini API │
│ (generate) │ │ (Vertex AI) │
└──────────────┘ └──────────────────┘Variable | Default | Description |
| — | Vertex AI API key (preferred) |
| — | Backward-compatible alias |
| — | Backward-compatible alias |
|
| Model for image generation |
|
| Auth mode: |
| — | Static bearer token(s) |
| — | Comma-separated multiple tokens |
| — | OIDC issuer URL (required for oidc mode) |
| — | Expected token audience(s) |
| — | Override JWKS URI (skips discovery) |
|
| Allow |
|
| Proxy remote URL |
| — | Proxy auth token |
|
| HTTP server bind host |
|
| HTTP server bind port |
|
| Output directory for generated images |
|
| Base URL for download links |
|
| Include base64 image data in tool responses |
|
| Session timeout in minutes |
|
| Maximum concurrent sessions |
| — | Comma-separated allowed host headers |
Contributions welcome! Please open an issue or PR on GitHub.
MIT
Generate a diagram, chart, or visualization using Gemini. Intelligently detects type from prompt and asks clarifying questions when uncertain. Supports: chart, comparison, flow, architecture, timeline, hierarchy, matrix, hero, visualization.
| Name | Required | Description | Default |
|---|---|---|---|
| size | No | Image resolution (1K, 2K, or 4K) | 2K |
| type | No | Type of image to generate (auto-detected if not specified) | auto |
| style | No | Style mode. 'professional' enforces clean SaaS aesthetic (white bg, standard palette). 'creative' removes aesthetic constraints so the prompt drives the look (vintage, retro, dark, artistic, etc.) | professional |
| output | No | Output filename (auto-generated if not provided). In server mode, this is treated as a filename only. | |
| prompt | Yes | Natural language description of the image to generate | |
| watermark | No | Watermark text rendered in the bottom-right corner of the image. Defaults to "arunsanna.com". | |
| aspect_ratio | No | Image aspect ratio (auto-selected based on type if not specified) | |
| user_approval | No | Set true when the requester explicitly approves using the supplied architecture information for diagram generation. This does not permit secrets or bypass provider safety filters. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden for behavioral disclosure. It adds useful context about auto-detecting type and asking clarifying questions when uncertain. However, it does not disclose other important behaviors such as output handling, potential side effects, or that 'user_approval' is required for certain inputs, leaving significant gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise at three sentences, front-loading the main purpose in the first sentence. The list of types is somewhat redundant with the schema but serves as a quick reference. No unnecessary fluff, though it could be tighter by dropping the redundant list.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 8 parameters and no output schema, the description covers the core purpose and a behavioral trait but lacks information about return values, when not to use it, and how it compares to sibling tools. The presence of siblings makes this incompleteness more impactful, so a score of 3 is appropriate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so the schema already documents all parameter meanings. The description adds a list of supported types that mirrors the 'type' enum but does not provide extra semantics beyond the schema. This is a standard baseline when the schema is complete.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'Generate' and the resource 'a diagram, chart, or visualization using Gemini', and lists the supported types. This distinguishes it from sibling tools like 'refine_image' and 'prepare_image', which imply modification or preparation rather than creation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use for generating diagrams/charts and mentions intelligent type detection plus clarifying questions, but it does not provide explicit guidance on when to choose this tool over siblings, nor does it mention any exclusions or prerequisites. Sibling tools exist, making this gap notable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get guidance before generating an image. Call this FIRST to understand supported parameters, get prompt recommendations, and receive a polished prompt. This avoids rejected generations and wasted API calls.
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | Optional type hint to get specific guidance for that type | |
| prompt | No | Optional draft prompt to analyze. If provided, returns recommendations and a polished version. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses the behavior: returns guidance, recommendations, and a polished prompt. It sets expectations about the purpose (avoid wasted calls). It does not mention side effects, but for a guidance tool this is less critical.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the primary action ('Get guidance before generating an image'). Every sentence earns its place, including the explicit 'Call this FIRST' instruction and the benefit statement.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with two optional params and no output schema, the description covers the essential context: purpose, timing, outputs, and rationale. It is complete for an agent to decide when and how to invoke it.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the two optional parameters, so the baseline is 3. The description adds minor context by mentioning 'prompt recommendations' and 'polished version', but does not provide syntax or format details beyond what the schema already includes.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb and resource: 'Get guidance before generating an image.' It distinguishes itself from siblings by positioning as a pre-generation step ('Call this FIRST') and describing specific outputs (supported parameters, prompt recommendations, polished prompt).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly instructs to 'Call this FIRST' and explains the context (before generating an image) and benefit (avoids rejected generations). However, it does not explicitly name alternatives or state when not to use, though the sibling names imply generation vs. preparation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Refine the last generated image with modifications
| Name | Required | Description | Default |
|---|---|---|---|
| refinement | Yes | Description of changes to make to the last image |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It only states that it refines with modifications, but omits critical side effects such as whether the original is replaced, whether a new image is returned, or what happens if no last image exists. This is a meaningful gap for a tool that mutates prior state.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that is front-loaded with the verb and resource. Every word earns its place, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter tool, the description is functionally adequate but lacks key contextual details like the effect on the previous image and prerequisites. It doesn't explain the behavior fully, but the schema and simplicity make it minimally viable.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage for the sole parameter 'refinement' with a clear description. The tool description adds no extra semantic value beyond what the schema already provides, so a baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Refine' with the clear resource 'the last generated image', distinguishing it from sibling tools like generate_image (creates new) and prepare_image (likely prepares). The phrase 'with modifications' further clarifies scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'the last generated image' clearly implies this tool should be used after an image has been generated, providing contextual guidance. It doesn't explicitly name alternatives or state when not to use it, but the context is sufficiently clear for a tool with this simple role.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.1.0generate_imageprepare_imagerefine_imageScored across 3 tools
Each tool has a clearly distinct purpose: prepare for guidance, generate for creation, and refine for modification. There is no overlap in functionality, making it easy for an agent to select the right tool.
All tool names follow the same verb_noun pattern with underscores: prepare_image, generate_image, refine_image. This consistent naming convention makes the tool set predictable and easy to navigate.
With only three tools, the server is well-scoped for its purpose of diagram generation. Each tool covers an essential step in the workflow without unnecessary bloat, and the count is appropriate for a focused utility.
The tool set covers the full generation lifecycle: prepare, generate, and refine. This provides a complete workflow for users, and there are no obvious missing operations that would cause agent failures.
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
MCP server for Google Veo AI video generation
MCP server for Qwen Image 3 AI image generation
MCP server for generating rough-draft project plans from natural-language prompts.
