Draw Architecture Diagrams in Chat: OpenClaw + CodePic MCP in Practice
Introduction
You finish discussing a system design with your AI, and then you open a separate tool to manually redraw everything you just talked about. It's a small interruption, but it breaks your flow every single time. With OpenClaw and CodePic MCP connected, that step goes away — describe what you need in Telegram or Discord, and the AI calls CodePic directly, draws the diagram, and sends you a link.
What Is OpenClaw
OpenClaw is a self-hosted AI assistant gateway. It connects Telegram, Discord, WhatsApp, iMessage, and other messaging channels to a single AI — running on your own machine, with your data staying local.
Key capabilities: multi-channel support, MCP protocol (so the AI can call external tools), multi-agent routing, open source under MIT.
Install:
npm install -g openclaw@latest
openclaw onboard --install-daemon
Full docs: docs.openclaw.ai/start/getting-started
Setting Up CodePic MCP
Step 1: Get your API key
Log in to CodePic, go to Settings → API Keys (codepic.cc/zh/settings/api-keys), and create a key. Keys start with cpk_.
Step 2: Add it to OpenClaw
Open ~/.openclaw/openclaw.json and add the CodePic MCP config:
{
"mcpServers": {
"codepic": {
"url": "https://codepic.cc/api/mcp/mcp",
"headers": {
"Authorization": "Bearer cpk_your_api_key_here"
}
}
}
}
Replace cpk_your_api_key_here with your actual key. Save the file and restart the Gateway:
openclaw gateway restart
Done. Your AI can now draw and edit diagrams directly in CodePic.
In Practice: Drawing Diagrams from Chat
Scenario 1: Creating a Microservices Architecture Diagram from Scratch
You're doing a technical design review and need an architecture diagram — without drawing it by hand.
Send this to your AI in Telegram:
Draw an e-commerce microservices architecture diagram in CodePic.
Components:
- Client: Web, iOS App, Android App
- API Gateway: single entry point, handles auth and routing
- Microservices: User Service, Product Service, Order Service, Payment Service
- Message queue: Kafka, connecting Order Service and Payment Service
- Data layer: PostgreSQL (users/orders), Redis (cache), Elasticsearch (product search)
Use arrows for call direction, dashed arrows for async Kafka messages. Bold the connection between Payment Service and Order Service.
The AI calls CodePic's create_diagram, generates the diagram, and replies with a CodePic link. Open it and the diagram is there.
Not happy with it? Keep going:
Replace Elasticsearch with Meilisearch, add an image storage component (S3) next to Product Service, connect them with a dashed line.
The AI calls update_diagram, makes the change, and sends a new link. You never opened CodePic manually. Nothing was dragged or dropped.
Scenario 2: Iterating on an Existing Diagram
You already have an order processing flowchart. After a team discussion, you decide to add a caching layer and a retry mechanism for payment failures.
In Discord:
Make two changes to the current order processing diagram:
1. Add a caching layer: put Redis cache before the "query order" step. Check cache first — on hit, return immediately; on miss, query the database and write the result back to cache. Mark the cache component with a dashed border.
2. Add a retry mechanism: on payment failure, add a "retry queue" node with a max of 3 retries. After 3 failures, route to a "manual review" branch.
Keep the main flow unchanged — these are additions only.
The AI retrieves the diagram ID, calls update_diagram, adds both pieces to the existing structure, and sends you the updated link.
One tip: when using update_diagram, explicitly say "keep the main flow unchanged, only add X." The AI works from the existing diagram by default, but that phrase reduces the chance of accidental changes.
Who This Is For, and How to Start
Good fit:
- Individual developers with a machine that runs continuously, who want to call AI and generate diagrams from a desktop environment
- Technical teams using Discord or Telegram to collaborate, who want to produce visual diagrams directly in the conversation
Not a good fit:
- Situations that require real-time collaborative diagram editing (CodePic doesn't support that yet)
- Pixel-perfect design work (use a dedicated design tool)
Three steps to get started:
- Install OpenClaw and connect Telegram (fastest to set up, under 5 minutes)
- Get your CodePic API key, add it to
~/.openclaw/openclaw.json - Restart the Gateway, send "draw me a flowchart in CodePic" to test
Docs:
- OpenClaw setup: docs.openclaw.ai
- CodePic MCP configuration: codepic.cc/zh/blog/codepic-mcp-launch