数据只有被看见才能真正发挥作用。WorkBuddy 的数据可视化能力让你无需打开 Excel 或 BI 工具，直接在对话中生成图表、交互面板、流程图和架构图。输出格式为 SVG 和 HTML，可以直接嵌入文档、网页或 Markdown，零依赖即开即用。

📊SVG 图表生成

WorkBuddy 可以直接生成 SVG 格式的图表，无需任何图表库。SVG 是纯文本矢量格式，文件小、可缩放、可嵌入，是数据可视化的轻量级首选。

支持的图表类型

使用示例

# 读取数据后生成折线图
> 读取 sales_2026.csv，按月份汇总收入，生成折线图

# 生成对比柱状图
> 读取这份报告，把三个产品的用户满意度数据生成分组柱状图

# 生成占比饼图
> 分析 server-access.log，统计各 HTTP 状态码占比，生成饼图

# 生成雷达图
> 根据这五个维度的评分数据，生成能力雷达图

SVG 图表优势

• 零依赖：纯 SVG 文本，浏览器原生渲染，不需要 ECharts/D3 等库
• 可缩放：矢量格式，放大缩小不失真
• 可嵌入：直接嵌入 Markdown（img 标签）或 HTML
• 可编辑：SVG 是文本格式，可以用 Edit 工具微调样式和数值
• 文件小：通常 2-20KB，比同等 PNG 小得多

🖱️HTML 交互组件

当静态图表不够用时，WorkBuddy 可以生成带交互功能的 HTML 组件：

交互能力

• 筛选过滤：按时间范围、类别、指标筛选数据
• 排序切换：点击列头排序，升序/降序切换
• 数据钻取：点击汇总数据下钻到明细
• 悬停提示：鼠标悬停显示详细数值
• 动态切换：切换图表类型（折线/柱状）、切换数据维度

使用示例

# 生成交互式数据面板
> 读取 sales_data.json，生成一个交互式仪表盘，
  包含：顶部 KPI 卡片、中间折线图（可切换月/季度）、底部数据表格（可排序筛选）

# 生成可筛选的表格
> 把这份员工绩效数据生成一个可筛选排序的 HTML 表格，
  支持按部门筛选、按评分排序

# 生成交互式对比图
> 生成一个产品特性对比面板，点击不同产品可以高亮对应数据

技术实现

WorkBuddy 生成的 HTML 交互组件使用纯原生技术：

• HTML + CSS + Vanilla JS：不依赖 React/Vue 等框架
• CSS 变量主题：支持深色/浅色主题切换
• 响应式布局：自适应桌面和移动端
• 单文件输出：CSS 和 JS 内联，一个 HTML 文件即可运行

🔀流程图与架构图

除了数据图表，WorkBuddy 还擅长生成流程图和架构图，用 SVG 或 Mermaid 语法表达系统结构和业务逻辑。

流程图

# 业务流程图
> 根据以下步骤生成流程图：
  用户下单 → 库存检查 → (有库存?) → 是: 创建订单 → 扣减库存 → 发起支付
                                    → 否: 通知缺货 → 推荐替代品

# 审批流程图
> 生成请假审批流程图：员工提交 → 主管审批 → (3天以上?) → 是: HR审批 → 完成
                                                          → 否: 完成

架构图

# 系统架构图
> 生成微服务架构图：前端(React) → API网关 → [用户服务/订单服务/支付服务] → 数据库集群

# 数据流图
> 生成数据流图：数据采集(Kafka) → 实时处理(Flink) → 存储(ClickHouse) → 可视化(Grafana)

# 部署架构图
> 生成 Kubernetes 部署架构图，包含 Ingress、Service、Deployment、Pod 层级

输出格式

• SVG：直接渲染的矢量图，适合嵌入文档
• Mermaid：文本描述格式，Markdown 原生支持渲染，适合版本控制
• HTML：带交互的架构图（点击节点查看详情、展开/折叠子模块）

🔢数据驱动可视化

WorkBuddy 的可视化是数据驱动的——你提供数据，它自动选择合适的图表类型和视觉编码：

自动图表选择

WorkBuddy 会根据数据特征自动推荐图表类型：

• 时间序列数据 → 折线图（趋势变化）
• 分类对比数据 → 柱状图（组间比较）
• 占比分布数据 → 饼图/环形图（构成分析）
• 多维评估数据 → 雷达图（综合画像）
• 相关性数据 → 散点图（关联分析）
• 层级结构数据 → 树图/旭日图（层级关系）

数据来源

🔄与文件操作组合

数据可视化最经典的工作流是数据读取 → 处理 → 可视化 → 输出：

# 完整工作流示例
Step 1: 读取数据
  > 读取 /data/monthly_report.xlsx

Step 2: 数据处理
  > 用 Python 按"部门"分组，计算每月平均绩效分

Step 3: 生成图表
  > 把结果生成折线图，每个部门一条线，X轴月份，Y轴绩效分

Step 4: 写入文件
  > 把图表保存到 /output/performance_trend.svg

Step 5: 生成交互面板
  > 再生成一个 HTML 交互面板，支持按部门筛选、按季度切换

📋实际案例

案例 1：销售数据周报

> 读取本周销售数据 sales_week27.csv，
  生成一份周报 HTML 页面，包含：
  - 顶部 4 个 KPI 卡片（总销售额/订单数/客单价/环比增长）
  - 中间折线图：每日销售额趋势
  - 中间柱状图：Top 10 产品销售排名
  - 底部饼图：各渠道占比
  保存到 /reports/week27.html

案例 2：服务器监控仪表盘

> 从 Prometheus API 拉取最近 24 小时的服务器指标，
  生成监控仪表盘，包含：
  - CPU/内存/磁盘使用率折线图
  - 各服务请求量柱状图
  - 错误率热力图（按小时x服务）
  - 告警事件时间线
  保存到 /monitoring/dashboard.html

案例 3：项目架构文档

> 扫描项目 src/ 目录结构，
  生成系统架构文档，包含：
  - 模块依赖关系图（SVG）
  - 分层架构图（前端/网关/服务/数据层）
  - API 调用链路图
  保存到 /docs/architecture.md（内嵌 SVG）

案例 4：竞品分析对比

> 读取竞品对比数据 competitors.csv，
  生成对比分析面板，包含：
  - 雷达图：五维能力对比
  - 分组柱状图：功能覆盖率
  - 交互表格：支持筛选和排序
  保存到 /analysis/competitor_compare.html

⚖️SVG vs HTML 交互组件对比