数据可视化HTML转PNG渲染器

解决什么问题

在实际的分析工作流中，画好了一张图表，往往意味着工作只完成了一半。让大模型直接输出带有复杂数据的 Markdown 表格或代码块，存在两个明显的痛点：一是大模型容易在数据计算、数字转录上出错；二是纯文本或基础表格在呈现复杂层级关系时，可读性远不如图表。另一方面，如果依赖系统级的截图工具，当图表需要包含敏感的业务数据时，手动截图不仅操作繁琐，还存在数据外泄的风险。我们需要一种能在沙箱内直接将高质量的 <div> 图表转成静态 .png 文件的自动化方案。

工作原理与关键步骤

该技能充当了静态 HTML 和最终视觉产物之间的渲染器，核心工作流分为两步：

• 生成与注入 HTML 数据源：大模型按规范编写前端绘图逻辑（如基于 <div> 构建），并填充真实业务数据。随后，通过 <img src="data:..."> 将生成的图表 HTML 以 Base64 编码直接注入到技能接口中。
• 无头浏览器渲染与落盘：技能内置的无头浏览器引擎在隔离环境内加载 Base64 数据，完整渲染 CSS 样式、坐标轴、颜色块等视觉元素，最后将其固化为单张 PNG 图像并输出。

适用边界与注意点

• 纯静态与结构限制：渲染引擎依赖固定的 <div> 结构布局。如果画布尺寸超出最大值，多张图像会被自动切片并分别输出。
• 不支持动态交互：由于最终产物是 PNG 位图，依赖 CSS 动画、JS 交互（如悬浮提示框、下钻分析）的元素在截图时不会被保留或捕获，需避免此类设计。