在聊天里画架构图：OpenClaw + CodePic MCP 实战指南

引言

跟 AI 聊完系统设计，还要手动打开白板把内容重新画一遍——这个切换动作不大，但它每次都打断思路。OpenClaw 挂上 CodePic MCP 之后，这步消失了：你在 Telegram 或 Discord 里描述需求，AI 直接调用 CodePic 画好图，返回链接给你。

OpenClaw 是什么

OpenClaw 是一个自托管的 AI 助手网关。它把 Telegram、Discord、WhatsApp、iMessage 这些消息渠道统一接入到一个 AI，Gateway 跑在你自己的机器上，数据不经过第三方。

关键能力：多渠道同时在线、MCP 协议支持（AI 可以调用外部工具）、多 Agent 路由、开源 MIT 协议。

安装：

npm install -g openclaw@latest
openclaw onboard --install-daemon

详细文档：docs.openclaw.ai/start/getting-started

配置 CodePic MCP

第一步：获取 API 密钥

登录 CodePic，进入「设置 → API 密钥」页面（codepic.cc/zh/settings/api-keys），创建一个密钥，密钥以 cpk_ 开头。

第二步：挂载到 OpenClaw

打开 ~/.openclaw/openclaw.json，添加 CodePic 的 MCP 配置：

{
  "mcpServers": {
    "codepic": {
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

把 cpk_your_api_key_here 换成你刚创建的密钥。保存文件，重启 Gateway：

openclaw gateway restart

完成。你的 AI 现在可以直接操作 CodePic 画图了。

实际操作：在消息里画图

场景 1：从零画一张微服务架构图

你在做技术评审，需要一张系统架构图，不想手动画。

在 Telegram 里发给 AI：

帮我用 CodePic 画一个电商微服务架构图。

组件：
- 客户端：Web、iOS App、Android App
- API 网关：统一入口，负责鉴权和路由
- 微服务层：用户服务、商品服务、订单服务、支付服务
- 消息队列：Kafka，连接订单服务和支付服务
- 数据层：PostgreSQL（用户/订单）、Redis（缓存）、Elasticsearch（商品搜索）

用箭头表示调用方向，Kafka 用虚线箭头表示异步。支付服务和订单服务之间的连接加粗标注。

AI 调用 CodePic 的 create_diagram，直接生成图表，回复你一个 CodePic 链接。打开链接就是画好的图。

不满意，接着说：

把 Elasticsearch 换成 Meilisearch，商品服务旁边加一个图片存储（S3），两者之间用虚线连接。

AI 调用 update_diagram 改好，再发新链接。整个过程没有打开 CodePic，没有拖拽任何元素。

场景 2：在已有图上迭代修改

你已经有一张订单处理流程图，团队讨论后决定加一层缓存，同时补一个失败重试机制。

在 Discord 里：

在当前的订单处理图上做两处修改：

1. 加缓存层：Redis 缓存放在"查询订单"步骤前，先查缓存，命中直接返回，未命中再查数据库，查完写入缓存。用虚线框标出缓存组件。

2. 加重试机制：支付失败时，加一个"重试队列"节点，最多重试 3 次，超过后走"人工处理"分支。

主流程保持不变，只补这两部分。

AI 拿到图表 ID，调用 update_diagram，在原图上加入这两个部分，保留原有结构。改完发你更新后的链接。

关键点： 用 update_diagram 时，描述里要明确说"保持原有流程不变，只改 X 部分"。AI 默认会在原图基础上操作，但加这句话能减少误改的概率。

适合谁，怎么开始

适合：

• 个人开发者，机器长期开着，需要在电脑端随时调用 AI + 画图
• 技术团队，用 Discord/Telegram 协作，需要在对话里直接产出可视化图表

不适合：

• 需要多人实时协作编辑图表的场景（CodePic 当前不支持协作）
• 需要像素级精确排版的设计稿（用专业设计工具）

开始的三步：

1. 安装 OpenClaw，接入 Telegram（配置最快，5 分钟内跑通）
2. 获取 CodePic API 密钥，写入 ~/.openclaw/openclaw.json
3. 重启 Gateway，在 Telegram 里发"帮我用 CodePic 画个流程图"测试

相关文档：

• OpenClaw 安装：docs.openclaw.ai
• CodePic MCP 配置：codepic.cc/zh/blog/codepic-mcp-launch