AntV Infographic

markstream-vue 支持渲染 AntV Infographic 图表。

1. 安装

该功能依赖 @antv/infographic 库。

npm install @antv/infographic

在应用入口中配置可选 loader，并确保它发生在 app.mount() 或首个 infographic 代码块渲染之前：

// main.ts
import { setInfographicLoader } from 'markstream-vue'
import { createApp } from 'vue'
import App from './App.vue'

setInfographicLoader(() => import('@antv/infographic'))

createApp(App).mount('#app')

迁移提示：infographic 渲染现在需要显式 opt-in。如果你的应用之前依赖“安装 @antv/infographic 后自动渲染图表”的行为，请继续安装该依赖，并补上上面的 loader 配置。

2. 示例

在 Markdown 中使用 infographic 代码块即可渲染图表：

```infographic
infographic list-row-simple-horizontal-arrow
data
  items
    - label Step 1
      desc Start
    - label Step 2
      desc Processing
    - label Step 3
      desc Complete
```

平移行为与 Mermaid 块一致：在预览区任意位置拖拽即可移动图表，指针移出预览框后手势仍继续跟随。触摸仅在图表放大后平移（fit 缩放下图表完整可见，滑动仍用于页面滚动）；全屏弹窗中触摸始终平移。所有框架包（Vue 3 / Vue 2 / React / Svelte / Angular / Octane）共用 markstream-core 的 createPanGesture 同一实现。

3. 更多资源

• AntV Infographic 官网 - 查看更多图表模版与语法的详细介绍。