AntV 信息图渲染 HellowVirgil/dsh-antv-infographic

🌐 简体中文 | English

dsh-antv-infographic

在 DeepSeek Harness（DSH）的模型回复中直接渲染可编辑、可导出的 AntV Infographic SVG。

效果预览

DSH 真实运行效果：支持流式生成、本地编辑、SVG/PNG 导出和 DSL 复制。

模型输出 infographic fenced block，插件将其中的 AntV Infographic DSL 流式渲染为 SVG：

infographic
infographic sequence-timeline-rounded-rect-node
data
title 产品路线图 sequences
- label 调研 desc 明确用户问题
- label 发布 desc 上线并验证

能力

- 支持 AntV Infographic 的约 200 种模板
- AI 流式输出过程中逐步渲染
- 默认查看模式，可切换为本地编辑模式
- 支持 SVG、PNG 导出和 DSL 复制
- 新版 DSH 走 fence-registry，旧版自动使用 DOM fallback
- AntV 引擎按需加载，不阻塞 DSH 首屏
- 对模型生成内容限制大小，并拦截可执行标记、危险 URL 和私网资源
- 附带可选的 antv-infographic Skill，提供更完整的模板选择和 DSL 生成指导

安装

直接将已发布的包安装到 DSH profile：

dsh plugin --profile web add dsh-antv-infographic

该命令已经包含 DSH 生成和渲染 infographic block 所需的全部能力，不需要额外安装 Skill。

安装完成后重启 dsh web，并在浏览器中执行硬刷新。

从源码安装

git clone https://github.com/HellowVirgil/dsh-antv-infographic.git
cd dsh-antv-infographic
pnpm install
pnpm run check
dsh plugin --profile web add "link:$PWD"

如果该 profile 已安装旧版本，先移除再添加：

dsh plugin --profile web remove dsh-antv-infographic
dsh plugin --profile web add "link:$PWD"

可选：安装 Skill

插件已经会向 DSH system prompt 注入必要的 DSL 约定。只有当 Agent 环境会读取 ~/.agents/skills，并且希望复杂信息图获得更完整的模板指导和示例时，才需要安装 Skill。

从源码目录安装：

mkdir -p ~/.agents/skills/antv-infographic
cp SKILL.md ~/.agents/skills/antv-infographic/SKILL.md

也可以直接从 GitHub 下载随包维护的 Skill：

mkdir -p ~/.agents/skills/antv-infographic
curl -fsSL https://raw.githubusercontent.com/HellowVirgil/dsh-antv-infographic/main/SKILL.md \
-o ~/.agents/skills/antv-infographic/SKILL.md

在新会话中输入：

用 infographic 画一张 AI 产品从调研到规模化上线的路线图

浏览器控制台出现下面的日志表示客户端已激活：

[dsh-antv-infographic] client active; fence-channel=registry

旧版宿主会显示 fence-channel=dom。

工作原理

插件由三部分组成：

1. Node 端插件向 DSH system prompt 注入 infographic DSL 使用约定。
2. 浏览器适配器识别 fenced block，并调用 AntV Infographic 渲染。
3. AntV 主引擎作为独立资源按需从插件自己的 HTTP 路由加载。

DSH 有 fence 注册表时直接注册渲染器；没有时，插件观察对话 DOM，将语言标签为 infographic 的代码块替换为同一套渲染组件。

适用边界

适合：路线图、时间线、流程、能力地图、层级关系、方案对比、数据叙事、汇报摘要。

不适合：表单、操作按钮、测验、复杂业务面板，以及需要将用户交互结果回传模型的场景。

开发

pnpm test
pnpm build
pnpm run verify:pack

入口：

- src/plugin/index.ts：prompt 与资源路由
- src/client/index.tsx：DSH 客户端注册
- src/client/InfographicBlock.tsx：AntV UI、编辑和导出
- src/client/dom-fence.tsx：旧版宿主 fallback
- src/client/asset-infographic.ts：按需加载的 AntV 引擎包

License

MIT。AntV Infographic 也采用 MIT License。