图片使用Blueprint MCP、Nano Banana Pro和Arcade MCP服务器生成。

使用 Nano Banana Pro 进行理解代码库和系统架构的图生成。

支持 Arcade 生态系统： 结合 HubSpot、Google Drive、GitHub 及其他 Arcade 工具，从系统中提取数据并以图表形式可视化。

布置

1.注册街机

https://arcade.dev

2.安装依赖

3.登录街机

4.获取 Google AI Studio API 密钥

https://aistudio.google.com/ → 创建API密钥

5.街机中的隐藏商店

6.部署服务器

那么，克隆这个仓库：

7.创建门户

1. 前往https://api.arcade.dev/dashboard
2. 点击“网关”→“创建网关”
3. 将你部署的architect_mcp服务器添加到网关

8.配置光标

1. 在光标中：MCP →设置
2. 添加你的街机网关网址
3. 重启光标

用途

工具

• start_diagram_job - 开始生成，返回作业ID
• check_job_status - 检查是否完成
• download_diagram - 下载PNG为base64

示例提示

可视化代码架构：

文档API流程：

解释流程：

理解数据管道：

Blueprint MCP

Image generated using Blueprint MCP, Nano Banana Pro, and Arcade MCP server.

Diagram generation for understanding codebases and system architecture using Nano Banana Pro.

Works with Arcade’s ecosystem: Combine with HubSpot, Google Drive, GitHub, and other Arcade tools to extract data from your systems and visualize it as diagrams.

Setup

1. Sign up for Arcade

https://arcade.dev

2. Install Dependencies

# Create virtual environment
python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install Arcade CLI
pip install arcade-mcp

3. Login to Arcade

arcade-mcp login

4. Get Google AI Studio API Key

https://aistudio.google.com/ → Create API key

5. Store Secret in Arcade

arcade-mcp secret set GOOGLE_API_KEY="your_api_key_here"

6. Deploy Server

Clone this repo, then:

cd blueprint-mcp
arcade-mcp deploy

7. Create Gateway

1. Go to https://api.arcade.dev/dashboard
2. Click “Gateways” → “Create Gateway”
3. Add your deployed architect_mcp server to the gateway

8. Configure Cursor

1. In Cursor: Settings → MCP
2. Add your Arcade gateway URL
3. Restart Cursor

Usage

Tools

• start_diagram_job - Start generation, returns job ID
• check_job_status - Check if complete
• download_diagram - Download PNG as base64

Example Prompts

Visualize code architecture:

Analyze the authentication module in src/auth/ and create an 
architecture diagram showing the components and their relationships.

Document API flows:

Create a sequence diagram showing the OAuth login flow based on 
the code in src/auth/oauth.py

Explain processes:

Generate a flowchart explaining how our payment processing works,
showing the steps from checkout to confirmation.

Understand data pipelines:

Create a data flow diagram for our ETL pipeline showing sources,
transformations, and destinations based on the data/ directory.

Combine with other Arcade tools:

Pull the latest deal from HubSpot for "Acme Corp" and create an
architecture diagram of the proposed solution.

Read the system design doc from Google Drive and generate a 
visual architecture diagram from it.

How It Works

1. start_diagram_job → Returns job ID instantly
2. Wait 30 seconds (Nano Banana Pro generates)
3. check_job_status → Check if “Complete”
4. download_diagram → Get base64 PNG
5. Agent decodes and saves to workspace

---

Example Diagrams

Enterprise Architecture - Banking Use Case

Cursor Prompt:

Can you understand Arcade deeply and create an architecture diagram for someone 
who's new and wants to understand Arcade in the broader AI, LLM, and agent landscape? 
I want this architecture to fit into a realistic enterprise scenario like a bank, 
showcasing how Arcade MCP Runtime fits into their broader architecture.