导读：还在手动做PPT？还在用Excel画图？让OpenClaw Canvas帮你——告诉AI你想展示什么，它直接生成交互式可视化页面。本教程从基础到高级，解锁Canvas的全部玩法。
📋 功能介绍
OpenClaw Canvas是一个AI驱动的可视化系统：
- 数据可视化 - 折线图、柱状图、饼图、散点图、热力图
- 流程图 - Mermaid语法自动生成架构图、时序图
- 交互式演示 - HTML5 Canvas，支持点击、悬停、缩放
- 实时数据看板 - 自动刷新的仪表盘
- 幻灯片 - AI生成演示文稿
- 截图导出 - 自动截图保存为PNG/JPG
🔧 使用方法
方式一：直接对话生成
# 在对话中告诉AI你想可视化什么
"帮我画一个本周网站流量的折线图"
"用Mermaid画一个OpenClaw的系统架构图"
"生成一个销售数据的交互式仪表盘"
# AI会自动调用Canvas工具
canvas.action = "present"
canvas.url = "generated-chart.html"方式二：代码级控制
# 生成HTML可视化页面
canvas.action = "present"
canvas.url = "/tmp/dashboard.html"
# 或直接注入JavaScript
canvas.action = "eval"
canvas.javaScript = "
const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri'],
datasets: [{
label: '访问量',
data: [120, 190, 300, 250, 420],
borderColor: '#f093fb'
}]
}
});
"
# 截图保存
canvas.action = "snapshot"
canvas.outputFormat = "png"
canvas.outputPath = "/tmp/dashboard.png"方式三：Mermaid图表
# Mermaid语法 - 系统架构图
```mermaid
graph TD
A[用户] -->|消息| B[OpenClaw Gateway]
B --> C{路由分发}
C -->|飞书| D[飞书通道]
C -->|Discord| E[Discord通道]
C -->|钉钉| F[钉钉通道]
B --> G[Agent引擎]
G --> H[Skills]
G --> I[Memory]
G --> J[Cron]
```
# Mermaid - 时序图
```mermaid
sequenceDiagram
User->>OpenClaw: 发送消息
OpenClaw->>LLM: 推理请求
LLM->>OpenClaw: 工具调用
OpenClaw->>Tool: 执行工具
Tool->>OpenClaw: 返回结果
OpenClaw->>User: 回复消息
```💡 最佳实践
🎯 图表选择指南：趋势用折线图、对比用柱状图、占比用饼图、分布用散点图、关联用热力图。选对图表类型，数据表达效率翻倍。
📊 实时看板：Canvas支持定时刷新（eval + setInterval），可以做实时数据监控。配合Cron定时更新数据源，实现无人值守的自动看板。
# 实时看板刷新示例
setInterval(async () => {
const res = await fetch('/api/metrics');
const data = await res.json();
updateChart(data);
}, 60000); // 每分钟刷新🎨 常用图表模板
| 图表类型 | 适用场景 | 推荐库 |
|---|---|---|
| 折线图 | 趋势分析、时间序列 | Chart.js, ECharts |
| 柱状图 | 数据对比、分类统计 | Chart.js, D3.js |
| 饼图 | 占比分布 | Chart.js |
| 流程图 | 架构设计、流程说明 | Mermaid |
| 思维导图 | 知识结构、方案梳理 | Mermaid mindmap |
| 甘特图 | 项目计划、任务排期 | Mermaid gantt |
| 热力图 | 密度分布、相关性 | D3.js, ECharts |
| 仪表盘 | KPI监控、实时数据 | Gauge.js |