Skip to content

feat: Add markdown-like visualization syntax parser#325

Merged
hustcc merged 9 commits intoaifrom
copilot/design-markdown-yaml-syntax
Feb 1, 2026
Merged

feat: Add markdown-like visualization syntax parser#325
hustcc merged 9 commits intoaifrom
copilot/design-markdown-yaml-syntax

Conversation

Copy link
Contributor

Copilot AI commented Feb 1, 2026

  • Create parser in src/ai directory to parse syntax string to object
  • Add unit tests for the parser using vitest (with complete test cases for each chart type)
  • Add GitHub Actions workflow configuration to run unit tests on PR
  • Update GPTVis class to support syntax string format input (pass through parser)
  • Add playground examples demonstrating the new syntax
  • Reorganize tests: each chart type now has its own test file for better clarity
  • Fix chart syntax tests based on knowledge bases
  • Add missing chart type tests (boxplot, violin, mind-map, etc.)
  • Simplify render API: render(type, config) where config can be object or syntax string
  • Add nested children support for hierarchical charts (mind-map, treemap, organization-chart, fishbone-diagram)
  • Fix: syntax string passed to render() must include vis prefix
  • Simplify render() - pass config directly without extracting type
  • Move tests to root __tests__ directory (same level as src)

Test Files (26 total, 112 tests)

Located in __tests__/ directory at repository root.

API

// With config object
g.render('pie', { data: [{ category: 'A', value: 30 }] });

// With syntax string
g.render('pie', `
vis pie
data
  - category A
    value 30
`);
Original prompt

This section details on the original issue you should resolve

<issue_title>GPTVis 的可视化语法,类似于 Infographic 的设计</issue_title>
<issue_description>## 背景

当前 GPT-Vis 中所有组件的 render 输入都是一个 json,带来问题是 llm 输出的 token 占用,以及 json 容错问题,所以需要定义一种来 markdown、yaml 的语法,让 llm 流失输出和渲染上能做得更好。他最终呈现出来是一个 string。

语法设计

import { GPTVis } from '@antv/gpt-vis';

const g = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
  withContainer: true,
});

g.render(`
vis pie
data
  - category 分类一
    value  27
  - category 分类二
    value 25
  - category 分类三
    value 18
  - category 分类四
    value 15
  - category 分类五
    value 10
  - category 其他
    value 5
innerRadius: 0.6
style
  - backgroundColor antvis/GPT-Vis#333
    palette #ff5a5f #1fb6ff #13ce66
`);

它是一种利用一个 parse 将上述语法,解析成 object,然后在进行渲染。对语法进行一个简单介绍:

  • vis [chartType],描述的是当前是什么可视化组件,vis 前缀是固定的。
  • datastyle 等键值,都是描述 object 的。

最终转化过程对应于:

{
  "type": "pie",
  "data": [
    { "category": "分类一", "value": 27 },
    { "category": "分类二", "value": 25 },
    { "category": "分类三", "value": 18 },
    { "category": "分类四", "value": 15 },
    { "category": "分类五", "value": 10 },
    { "category": "其他", "value": 5 }
  ],
  "innerRadius": 0.6,
  "style": {
    "backgroundColor": "#333",
    "palette": ["#ff5a5f", "#1fb6ff", "#13ce66"]
  }
}

具体执行步骤

  • 在 src/ai 下增加一个 parser,用于解析 syntax 到 object
  • __tests__ 中为 parser 并增加完备的单元测试,每一个图表的配置都要增加一个单元测试的 case,单测框架只用 vitest,并在 github action 中增加配置,当 pr 的时候,执行单元测试
  • 所有 src/ai/vis 下的组件,render 支持 syntax string 格式,如果是 string,走一下 parser 逻辑在渲染
  • gpt-vis 组件的 render 透传
  • playground 增加语法案例
  • 验证是否正确

要求

  • 语法要有很强的容错性,对于多个空格之类要能支持,便于开发者可以手写
  • 所有代码都尽量在 src/ai 目录中,其他目录不要动,我会等重构结束后统一删除。
  • 代码保证简洁和精炼,如果不是必须的代码和配置,就不要,代码需要长期可维护。
  • 目标分支始终都是 ai,如果不是,提醒我一下。

参考

<agent_instructions>按照 issue 描述和方案,帮我 pr 实现一下。</agent_instructions>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@changeset-bot
Copy link

changeset-bot bot commented Feb 1, 2026

⚠️ No Changeset found

Latest commit: 1d04aeb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI and others added 2 commits February 1, 2026 12:06
Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copilot AI changed the title [WIP] Define visualization syntax for GPTVis similar to Infographic feat: Add markdown-like visualization syntax parser Feb 1, 2026
Copilot AI requested a review from hustcc February 1, 2026 12:12
@hustcc hustcc marked this pull request as ready for review February 1, 2026 12:20
@github-actions
Copy link
Contributor

github-actions bot commented Feb 1, 2026

😭 Deploy PR Preview 1d04aeb failed. Build logs

🤖 By surge-preview

@hustcc
Copy link
Member

hustcc commented Feb 1, 2026

@copilot 单元测试中,有些图表的语法写法不太对,比如雷达图、直方图应该是不对的。

  1. 根据图表的知识库,了解下图表应该是什么配置,然后生成一个 mock 语法做单测
  2. 针对语法的测试,每一个图表一个单测文件,这样看起来更加清晰。每个图表的单测加 3 个,这个语法很重要,一定要保证正确稳定。
  3. 根目录执行 npm run format 格式化一下代码,让 ling 通过。

…uctures

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 1, 2026

@copilot 单元测试中,有些图表的语法写法不太对,比如雷达图、直方图应该是不对的。

  1. 根据图表的知识库,了解下图表应该是什么配置,然后生成�...

Done in 5146bdd.

Changes made:

  1. Reorganized tests - now each chart type has its own test file (17 test files total)
  2. Fixed chart data structures based on knowledge bases:
    • Radar: uses name and value (not item)
    • Histogram: uses value field in data array
    • Word-cloud: uses text and value (not word and weight)
    • Venn: uses sets as string with comma-separated values
    • Dual-axes: uses categories and series sections
    • All other charts verified against their knowledge base definitions

All 78 tests now pass.

@hustcc
Copy link
Member

hustcc commented Feb 1, 2026

@copilot 单元测试中,有些图表的语法写法不太对,比如双轴图,按照图表知识库,把所有图表都检查一遍,确保正确。

@hustcc
Copy link
Member

hustcc commented Feb 1, 2026

@copilot 单测中还缺少了一些图表,比如 boxplot,检查下还缺少哪些,都加一下。

另外根据图表知识库,检查下是否有一些配置没有在语法中实现。

… on knowledge bases

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 1, 2026

@copilot 单元测试中,有些图表的语法写法不太对,比如双轴图,按照图表知识库,把所有图表都检查一遍,确保正确。

Fixed in 8022749.

Key corrections based on knowledge bases:

  • Histogram: data now correctly uses flat number array [78, 88, 60, 100, 95] instead of object array
  • Dual-axes: categories now correctly uses flat array [2018, 2019, 2020], series uses object array with type and axisYTitle

The parser was updated to support simple value arrays (flat arrays without key-value pairs) in addition to object arrays. All 81 tests pass.

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 1, 2026

@copilot 单测中还缺少了一些图表,比如 boxplot,检查下还缺少哪些,都加一下。

另外根据图表知识库,检查下是否有一些配置没有在语法中实现。

Added tests for all missing chart types in bb2d203.

New test files added (9 new files):

  • boxplot.test.ts - Boxplot chart with category, value, and group fields
  • violin.test.ts - Violin chart with category, value, and group fields
  • mind-map.test.ts - Mind map with hierarchical name structure
  • flow-diagram.test.ts - Flow diagram with nodes and edges (source, target, name)
  • network-graph.test.ts - Network graph with nodes and edges
  • organization-chart.test.ts - Org chart with name and description
  • pin-map.test.ts - Pin map with longitude, latitude, label
  • heat-map.test.ts - Heat map with longitude, latitude, value
  • fishbone-diagram.test.ts - Fishbone diagram with hierarchical name structure

Total: 26 test files, 108 tests covering all chart types from the knowledge bases.

@hustcc
Copy link
Member

hustcc commented Feb 1, 2026

@copilot 集成到 gptvis 中的时候,render 函数第一个参数还是 chartType,第二个参数可以是语法 string, 也可以 config 对象,这样设计看起来代码简洁一些。

另外,对于层级数据的图表,增加嵌套 children 的测试案例。

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 1, 2026

@copilot 集成到 gptvis 中的时候,render 函数第一个参数还是 chartType,第二个参数可以是语法 string, 也可以 config 对象,这样设计看起来代码简洁一些。

�...

Done in b8d46aa.

API Changes:

  • render(type, config) - first parameter is always chart type, second parameter can be either config object or syntax string

Nested children support added for hierarchical charts:

  • mind-map.test.ts - 2 new tests with nested children
  • treemap.test.ts - 2 new tests with nested children
  • organization-chart.test.ts - 2 new tests with nested children
  • fishbone-diagram.test.ts - 2 new tests with nested children

Example:

g.render('mind-map', `
data
  - name 项目计划
    children
      - name 研究阶段
        children
          - name 市场调研
          - name 技术分析
      - name 开发阶段
`);

Total: 26 test files, 112 tests

@hustcc
Copy link
Member

hustcc commented Feb 1, 2026

@copilot render 函数传入的 syntax 一定是包含 vis 前缀的,所以不需要在解析前追加前缀。

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 1, 2026

@copilot render 函数传入的 syntax 一定是包含 vis 前缀的,所以不需要在解析前追加前缀。

Fixed in c14c1ed.

The render() function now parses the syntax string directly without prepending any prefix. The syntax string passed in must include the vis prefix.

// Syntax string must include vis prefix
g.render('pie', `
vis pie
data
  - category A
    value 30
`);

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
Copilot AI requested a review from hustcc February 1, 2026 14:05
@hustcc hustcc merged commit a39330e into ai Feb 1, 2026
14 checks passed
@hustcc hustcc deleted the copilot/design-markdown-yaml-syntax branch February 1, 2026 14:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants