搜索文章

输入关键词开始搜索
返回代表作品
Case 082026

把图表库和 AI 图表生成并到一个平台里

Viz Platform

之前 AI 出图用的是一个单独的渲染库,业务里用的是 Standard Chart,两个库分开维护。现在我在把它们并到一个仓库里,就是这个平台,业务开发可以直接用图表组件,业务系统和上游 Agent 则通过同一个协议来调用。

AI 画的示意图,开发者、业务系统和上游 Agent 都走到同一个平台,最后出来的是各种金融图表
AI 画的示意图,开发者、业务系统和上游 Agent 都走到同一个平台,最后出来的是各种金融图表2026
同一套图表,业务开发直接用,AI 也能调,不用两边各搞一套。
3 paths
使用路径
2 → 1
两个旧库并进一个仓库
NPM + CDN
组件单独使用

PROJECT EXAMPLES

项目截图与示例

Viz Platform 的三条使用路径和执行链:VizSpec、Runtime、Provider、Viewer

使用路径和执行链

照着项目文档重新画的结构图,开发者直接用组件,业务系统和上游 Agent 走 VizSpec 这条链路。

01 / Context

要解决的问题

旧渲染库里协议、组合逻辑和具体图层是混在一起的,校验失败了还会接着往下渲染,数据缓存也只拿抽样值做指纹,数据中间改了可能都发现不了。图表库又被业务直接引用着,不能推倒重写,原来的图表、主题、交互和生命周期都得保住。

做成了什么

目前代码基本搭起来了(图表和 Blocks 组件包、旧接口的兼容入口、几个 Provider、Runtime、Viewer,还有文档站和演示页),图表和 Blocks 可以单独通过 NPM 或 CDN 装来用,不需要 AI 和服务端。但是组件文档和组合版本的完整验收还没做完,整体还算不上交付。

02 / System

系统怎样工作

  1. 01

    三种用法

    业务开发直接用图表和 Blocks 组件就行。业务系统是写一份 VizSpec,让 Runtime 去执行。上游 Agent 多一步,先经过 Planner 生成 VizSpec,后面和业务系统走同一条链路。

  2. 02

    VizSpec 和数据快照

    VizSpec 就是一份 JSON,描述要画什么、用哪些数据,不管底层是哪个图表引擎。数据先转成不可变的快照,字段、单位、重复键、数据全不全,都在这一步检查,后面各层就不用各自再解析一遍了。

  3. 03

    Runtime、Viewer 和旧接口

    Runtime 按能力目录挑一个 Provider 来执行,本身不碰浏览器,浏览器里的容器、布局、交互和生命周期归 Viewer 管。旧的运行链单独放在兼容包里,宿主想用旧能力得自己显式注册,新的 Runtime 不会去引用这个包。

03 / Decisions

设计中的取舍

01

校验不过就不画

新入口校验不通过就直接停下,返回诊断信息,不会像旧接口那样带着错接着画。适配的时候也不能偷偷改数据,完整性、单位和版本都不能动。

02

图表库能不能单独用?

可以。图表和 Blocks 不允许依赖 Planner、Runtime 或者模型 SDK,业务方只想画一张图的话,装一个组件包就够了。

03

新能力怎么接进来?

先在独立项目里做 POC 或 MVP,验证可行了再接进平台。每个能力只标 unsupported、candidate、verified 三种状态,没在真实环境跑通的,最多算 candidate。

04 / Our work

我的职责

角色:平台是我负责的,方向、架构和协议都是我定,任务合同和验收标准要改也得我拍板。开发任务是 AI Workflow 里的几个编码 Agent 在做,Agent 自己认领、实现、互相评审,碰到流程处理不了的例外,再来找我。

  • 01定平台的定位和架构分层,以及包和包之间谁能依赖谁
  • 02任务合同、协议和验收标准要改的时候,由我来批
  • 03看探索出来的新能力能不能接进平台,先接哪个
MonorepoJSON SchemaProvider SDKEChartsNPM / CDN