USP

This framework is uniquely designed for AI generation, supporting concise prompts and streaming output, and offers ~200 built-in templates with a powerful theme system and an integrated editor for refinement.

Use cases

01Generating professional infographics from text descriptions
02Creating dynamic data visualizations with AI streaming output
03Building custom infographic components and layouts
04Integrating infographic rendering into web applications or markdown editors
05Automating slide generation with visual data stories

Detected files (6)

skills/infographic-creator/SKILL.mdskill

Show content (15565 bytes)

---
name: infographic-creator
description: 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
---

信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。

`Infographic = Information Structure + Visual Expression`

本任务使用 [AntV Infographic](https://infographic.antv.vision/) 创建可视化信息图。

在开始任务前，需要理解 AntV Infographic 语法规范，包括模板列表、数据结构、主题等。

## Language Lock

- Prompt 的书写语言和示例语言不能决定最终输出语言。
- 如果用户输入英文，则生成的 `title`、`desc`、`label` 等文案必须保持英文，不要自动翻译成中文。
- 如果用户输入中文，则生成的 `title`、`desc`、`label` 等文案必须保持中文，不要自动翻译成英文。

## 规范

### AntV Infographic 语法

AntV Infographic 语法是一种自定义 DSL，用于描述信息图渲染配置。它使用缩进表达结构，适合 AI 直接生成并流式输出。核心信息包括：

1. template：用模板表达信息结构。
2. data：信息图数据，包含 `title`、`desc` 和主数据字段。
3. theme：主题配置，包含 `palette`、字体、风格化等。

例如：

```infographic
infographic list-row-horizontal-icon-arrow
data
  title Title
  desc Description
  lists
    - label Label
      value 12.5
      desc Explanation
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316
```

### 硬性语法规则

- 第一行必须是 `infographic <template-name>`。
- 模板列表里只写模板名本身；真正输出时首行必须显式写出 `infographic` 前缀。
- 使用 `data` / `theme` 块，块内统一使用两个空格缩进。
- 键值对写法是 `键 空格 值`；对象数组使用 `-` 作为条目前缀。
- `icon` 可以使用精确图标 ID，例如 `mingcute/server-line`，也可以使用语义关键词短语，例如 `star fill`。
- 如果使用语义关键词短语，多个关键词之间使用空格分隔，不要使用短横线；例如写 `rocket launch`，不要写 `rocket-launch`。
- 对 `lists`、`sequences`、`nodes`、`items` 以及 `compares`/`children` 下的语义型数据项，默认应补充 `icon`；不要因为字段是可选就省略。
- 如果模板名或视觉样式明显依赖图标，则每个主要数据项都应包含 `icon`。
- 如果不确定精确图标 ID，也要优先写一个简洁的语义关键词，例如 `rocket`、`shield`、`database`、`users`、`chart line`，而不是省略 `icon` 字段。
- 仅在纯图表类数据点、纯数值序列，或用户明确要求极简文本版时，才可以省略 `icon`。
- `value` 尽量使用纯数值；数值单位优先放在 `label` 或 `desc` 中表达。
- `palette` 推荐使用行内简单数组写法，例如 `palette #4f46e5 #06b6d4 #10b981`。
- `palette` 中的颜色值是裸值，不加引号，不加逗号。
- `data` 只放一个与模板匹配的主数据字段，避免同时混用 `lists`、`sequences`、`compares`、`values`、`root`、`nodes`。

主数据字段选择规则：

- `list-*` → `lists`
- `sequence-*` → `sequences`，可选 `order asc|desc`
- `sequence-interaction-*` → `sequences` + `relations`
  - `sequences` 表示泳道列表
  - 每个泳道必须包含 `label`
  - 每个泳道的 `children` 表示节点列表
  - `children` 下的每一项都必须写成对象条目，并包含 `label`
  - 节点可选 `id`、`icon`、`step`、`desc`、`value`
  - `step` 用于表示时间层级；相同 `step` 处于同一高度
- `compare-*` → `compares`
  - `compare-binary-*` / `compare-hierarchy-left-right-*`
    - `compares` 第一层必须且只能有两个根节点，分别表示对比双方
    - 两个根节点都应包含 `children`
    - 真正的对比项写在各自的 `children` 下
    - `children` 下的每一项都必须写成对象条目，并包含 `label`
    - 即使每一侧只有 1 个指标，也要写成 `children` 内含 1 个对象条目
  - `compare-swot`
    - `compares` 可直接放多个根节点
    - 每个根节点下可选 `children`
  - `compare-quadrant-*`
    - `compares` 直接放 4 个象限根节点
- `hierarchy-structure` → `items`
- `hierarchy-*` → 单一 `root`，通过 `children` 递归嵌套
- `relation-*` → `nodes` + `relations`
  - 简单关系也可直接用箭头语法表达关系
- `chart-*` → `values`
  - `chart-line-plain-text` / `chart-bar-plain-text` / `chart-column-simple` 都使用单条有序 `values`
  - 每个数据点使用 `label` 表示类目，使用 `value` 表示数值
  - 折线图的顺序由 `values` 中条目的排列顺序表达
- 结构无法明确判断时，再用 `items` 兜底

主题规则：

- `theme` 用于自定义主题，例如 `palette`、`base`、`stylize`
- 使用 `theme.base.text.font-family` 指定字体，如 `851tegakizatsu`
- 使用 `theme.stylize` 选择内置风格并传参
  - `rough`：手绘效果
  - `pattern`：图案填充
  - `linear-gradient` / `radial-gradient`：渐变风格
- 仅输出 Infographic 语法本身，不输出 JSON、解释性文字或额外 Markdown 段落

## 数据语法示例

按模板类别给出精简但完整的正向示例：

- `list-*` 模板

```infographic
infographic list-grid-badge-card
data
  title Feature List
  lists
    - label Fast
      icon flash fast
    - label Secure
      icon shield check
```

- `sequence-*` 模板

```infographic
infographic sequence-ascending-steps
data
  title 发布流程
  sequences
    - label 需求确认
      icon clipboard check
    - label 开发实现
      icon code
    - label 发布上线
      icon rocket
  order asc
```

- `sequence-interaction-*` 模板

```infographic
infographic sequence-interaction-compact-animated-badge-card
data
  title 登录校验流程
  sequences
    - label 用户
      icon user
      children
        - label 发起登录
          id user-login
          step 0
          icon login
        - label 收到结果
          id user-result
          step 2
          icon inbox check
    - label 服务端
      icon server
      children
        - label 校验凭证
          id server-verify
          step 1
          icon shield check
        - label 返回结果
          id server-return
          step 2
          icon send
  relations
    user-login - 提交账号密码 -> server-verify
    server-verify - 生成结果 -> server-return
    server-return - 返回结果 -> user-result
```

- `hierarchy-*` 模板

```infographic
infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 组织结构
  root
    label 公司
    children
      - label 产品部
      - label 技术部
```

- `compare-swot` 模板

```infographic
infographic compare-swot
data
  title 产品 SWOT
  compares
    - label Strengths
      icon trophy
      children
        - label 品牌认知高
          icon star
    - label Weaknesses
      icon alert circle
      children
        - label 成本压力大
          icon wallet
```

- `compare-binary-*` 模板

```infographic
infographic compare-binary-horizontal-simple-fold
data
  title 餐桌价格对比
  compares
    - label 原价
      icon tag
      children
        - label 原价
          value 500
          icon tag
    - label 实际支付
      icon wallet
      children
        - label 实际支付
          value 450
          icon check bold
```

- `compare-quadrant-*` 模板

```infographic
infographic compare-quadrant-quarter-simple-card
data
  title 任务优先级
  compares
    - label 高价值低成本
    - label 高价值高成本
    - label 低价值低成本
    - label 低价值高成本
```

- `chart-line-plain-text` 模板

```infographic
infographic chart-line-plain-text
data
  title 模型 A 准确率变化
  desc 第 4 周提升最明显
  values
    - label Week1
      value 86.5
    - label Week2
      value 87.3
    - label Week3
      value 89.1
    - label Week4
      value 91.2
theme
  palette #4f46e5 #db2777 #14b8a6
```

- `relation-*` 模板

```infographic
infographic relation-dagre-flow-tb-simple-circle-node
data
  title 系统关系
  nodes
    - label API
    - id db
      label DB
  relations
    API - 读写 -> db
```

- 兜底 `items` 示例

```infographic
infographic list-row-horizontal-icon-arrow
data
  title 要点总结
  items
    - label 效率优先
      desc 聚焦关键动作
    - label 结果导向
      desc 输出可执行结论
```

### 可用模板

- chart-bar-plain-text
- chart-column-simple
- chart-line-plain-text
- chart-pie-compact-card
- chart-pie-donut-pill-badge
- chart-pie-donut-plain-text
- chart-pie-plain-text
- chart-wordcloud
- compare-binary-horizontal-badge-card-arrow
- compare-binary-horizontal-simple-fold
- compare-binary-horizontal-underline-text-vs
- compare-hierarchy-left-right-circle-node-pill-badge
- compare-quadrant-quarter-circular
- compare-quadrant-quarter-simple-card
- compare-swot
- hierarchy-mindmap-branch-gradient-capsule-item
- hierarchy-mindmap-level-gradient-compact-card
- hierarchy-structure
- hierarchy-tree-curved-line-rounded-rect-node
- hierarchy-tree-tech-style-badge-card
- hierarchy-tree-tech-style-capsule-item
- list-column-done-list
- list-column-simple-vertical-arrow
- list-column-vertical-icon-arrow
- list-grid-badge-card
- list-grid-candy-card-lite
- list-grid-ribbon-card
- list-row-horizontal-icon-arrow
- list-sector-plain-text
- list-waterfall-badge-card
- list-waterfall-compact-card
- list-zigzag-down-compact-card
- list-zigzag-down-simple
- list-zigzag-up-compact-card
- list-zigzag-up-simple
- relation-dagre-flow-tb-animated-badge-card
- relation-dagre-flow-tb-animated-simple-circle-node
- relation-dagre-flow-tb-badge-card
- relation-dagre-flow-tb-simple-circle-node
- sequence-ascending-stairs-3d-underline-text
- sequence-ascending-steps
- sequence-circular-simple
- sequence-color-snake-steps-horizontal-icon-line
- sequence-cylinders-3d-simple
- sequence-filter-mesh-simple
- sequence-funnel-simple
- sequence-horizontal-zigzag-underline-text
- sequence-mountain-underline-text
- sequence-pyramid-simple
- sequence-roadmap-vertical-plain-text
- sequence-roadmap-vertical-simple
- sequence-snake-steps-compact-card
- sequence-snake-steps-simple
- sequence-snake-steps-underline-text
- sequence-stairs-front-compact-card
- sequence-stairs-front-pill-badge
- sequence-timeline-rounded-rect-node
- sequence-timeline-simple
- sequence-zigzag-pucks-3d-simple
- sequence-zigzag-steps-underline-text
- sequence-interaction-default-badge-card
- sequence-interaction-default-animated-badge-card
- sequence-interaction-default-compact-card
- sequence-interaction-default-capsule-item
- sequence-interaction-default-rounded-rect-node

## 模板选择建议

- 严格顺序、步骤推进、阶段演进 → `sequence-*`
- 多角色或多系统交互 → `sequence-interaction-*`
- 并列要点列举 → `list-row-*` / `list-column-*` / `list-grid-*`
- 双方对比、方案对比、前后对比 → `compare-binary-*`
  - 先确定双方是谁
  - 再为双方分别展开 `children`
- SWOT 分析 → `compare-swot`
- 象限分析 → `compare-quadrant-*`
- 层级树结构 → `hierarchy-tree-*`
- 统计趋势、单条序列变化 → `chart-line-plain-text`
- 统计对比、单组数值比较 → `chart-bar-plain-text` / `chart-column-simple`
- 节点关系、流程依赖 → `relation-*`
- 词频主题展示 → `chart-wordcloud`
- 思维导图 → `hierarchy-mindmap-*`

### 完整输出示例

```infographic
infographic list-row-horizontal-icon-arrow
data
  title 产品增长要点
  desc 聚焦获客、转化、复购三个阶段
  lists
    - label 获客
      desc 多渠道投放与内容触达
      icon rocket launch
    - label 转化
      desc 优化路径并减少流失
      icon chart line
    - label 复购
      desc 会员权益与分层运营
      icon repeat
theme
  palette #3b82f6 #8b5cf6 #f97316
```

## 输出格式

只输出一个 `plain` 代码块，不添加任何解释性文字：

```infographic
infographic list-row-horizontal-icon-arrow
data
  title 标题
  desc 描述
  lists
    - label 条目
      value 12.5
      desc 说明
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316
```

## 自检清单

输出前检查以下事项：

- 首行是否为 `infographic <template-name>`
- 是否只使用了一个与模板匹配的主数据字段
- 主要数据项是否都带有合理的 `icon`，尤其是列表、步骤、节点、对比项与名称中含 `icon` 的模板
- `palette` 是否为裸颜色值，且没有引号和逗号
- `sequence-interaction-*` 的泳道节点是否都写成 `children -> - label ...`
- `compare-binary-*` / `compare-hierarchy-left-right-*` 是否只有两个根节点，且两侧内容都放在各自的 `children` 下
- `children` 下的每一项是否都显式包含 `label`
- `chart-line-plain-text` 是否使用单条有序 `values`
- 输出中是否没有 JSON、解释文字或多余代码块

## 生成流程

### 第一步：理解用户需求

在创建信息图之前，先理解用户需求与想表达的信息，以便确定模板和数据结构。

若用户提供清晰的内容描述，应将其拆解为清晰、简洁的结构。

否则需要向用户澄清（如：“请提供清晰简洁的内容描述。”、“你希望使用哪个模板？”）

- 提取关键信息结构（title、desc、items 等）。
- 明确所需数据字段（title、desc、items、label、value、icon 等）。
- 对语义明确的主要数据项主动补充 `icon`，不要等用户单独提醒。
- 选择合适模板。
- 使用 AntV Infographic 语法描述信息图内容 `{syntax}`。

**关键注意**：必须尊重用户输入的语言。例如用户输入中文，则语法中的文本也必须是中文。

### 第二步：渲染信息图

当得到最终的 AntV Infographic 语法后，可按以下步骤生成完整 HTML 文件：

1. 创建包含以下结构的完整 HTML 文件：
   - DOCTYPE 与 HTML meta（charset: utf-8）
   - Title：`{title} - Infographic`
   - 引入 AntV Infographic 脚本：`https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js`
   - 创建 id 为 `container` 的容器 div
   - 初始化 Infographic（`width: '100%'`、`height: '100%'`）
   - 用实际标题替换 `{title}`
   - 用实际 AntV Infographic 语法替换 `{syntax}`
   - 加入导出 SVG 的功能：`const svgDataUrl = await infographic.toDataURL({ type: 'svg' });`

可参考的 HTML 模板：

```html
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
 const infographic = new AntVInfographic.Infographic({
    container: '#container',
    width: '100%',
    height: '100%',
  });
  infographic.render(`{syntax}`);
  document.fonts?.ready.then(() => {
    infographic.render(`{syntax}`);
  }).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>
```

2. 使用 Write 工具生成 HTML 文件，命名为 `<title>-infographic.html`

3. 展示给用户：
   - 生成文件路径，并提示：“直接用浏览器打开即可查看并保存 SVG”
   - 输出语法，并提示：“需要调整模板/配色/内容请告诉我”

**注意：**HTML 文件必须包含：

- 通过导出按钮实现 SVG 导出
- 容器自适应，宽高均为 100%

skills/infographic-item-creator/SKILL.mdskill

Show content (1285 bytes)

---
name: infographic-item-creator
description: Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
---

# Infographic Item Generator

## Overview

Generate complete Item component code for the infographic framework, following the project's item rules, layout constraints, and registration requirements.

## Workflow

1. Read `references/item-prompt.md` for the full framework rules, allowed components, and output requirements.
2. Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
3. Use `getItemProps` to extract custom props and compute layout with `getElementBounds`.
4. Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and `registerItem` with accurate `composites`.
5. Self-check against the constraints in the reference (no unlisted components, indexes passed to all wrapped components, correct conditional rendering).

## Notes

- Prefer scanning `src/designs/items` for similar items to match local patterns when appropriate.
- Keep output concise; avoid React-only features (keys, hooks).

skills/infographic-structure-creator/SKILL.mdskill

Show content (1427 bytes)

---
name: infographic-structure-creator
description: Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
---

# Infographic Structure Creator

## Overview

Generate complete Structure component code for the infographic framework, following the project's component rules, layout constraints, and registration requirements.

## Workflow

1. Read `references/structure-prompt.md` for the full framework rules, allowed components, and output requirements.
2. Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed.
3. Choose Item vs Items, compute layout from `getElementBounds`, and plan decor elements under ItemsGroup.
4. Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and `registerStructure` with accurate `composites`.
5. Self-check against the constraints in the reference (no unlisted components, no SVG cx/cy/r, correct indexes, empty-state handling).

## Notes

- Prefer scanning `src/designs/structures` for similar existing structures to match local patterns when appropriate.
- Keep output concise; avoid React-only features (keys, hooks).

skills/infographic-syntax-creator/SKILL.mdskill

Show content (2460 bytes)

---
name: infographic-syntax-creator
description: Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation.
---

# Infographic Syntax Creator

## Overview

Generate AntV Infographic syntax output from user content, following the rules in `references/prompt.md`.

## Workflow

1. Read `references/prompt.md` for syntax rules, templates, and output constraints.
2. If the user explicitly names a valid template or template family, honor it first; otherwise choose the best matching template for the structure (sequence/list/compare/hierarchy/chart).
3. Extract the user's key structure: title, desc, items, hierarchy, metrics; infer missing pieces if needed.
4. Compose the syntax using `references/prompt.md` as the formatting baseline.
5. Preserve hard constraints in every output:
   - Output is a single fenced code block containing only syntax; no extra text.
   - First line is `infographic <template-name>`.
   - Use two-space indentation; key/value pairs are `key value`; arrays use `-`.
   - Keep all user-facing text in the same language as the user's input unless the user explicitly asks for translation or bilingual output.
   - Prefer generating `icon` for semantic data items by default. If a list item, step, node, compare branch, or compare child has a clear concept, include an `icon` unless the user explicitly wants text-only output or the template is chart-only.
   - If the chosen template name or item style implies icons, treat `icon` as expected on every primary datum rather than optional.
   - When `icon` is written as a keyword phrase, separate words with spaces rather than hyphens. Exact icon IDs may keep their native punctuation.
   - `compare-binary-*` / `compare-hierarchy-left-right-*` must have exactly two root nodes, and the actual comparison points belong in each root node's `children`.
   - `compare-swot` / `compare-quadrant-*` follow their own root-node counts and should not be forced into a binary structure.

## Notes

- This skill returns syntax only. If the user wants a rendered HTML file or a complete deliverable, prefer `infographic-creator`.
- The template list in `references/prompt.md` is representative rather than exhaustive; prefer structurally correct registered templates over forcing a bad match.

skills/infographic-template-updater/SKILL.mdskill

Show content (1295 bytes)

---
name: infographic-template-updater
description: Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
---

# Infographic Template Updater

## Overview

Update public template lists and gallery mappings when new templates are added in `src/templates`.

## Workflow

1. Collect new template names from the added `src/templates/*.ts` file (object keys).
   - If templates are composed via spreads (e.g. `...listZigzagTemplates`), also confirm the final keys in `src/templates/built-in.ts`.
2. Update template lists:
   - `skills/infographic-creator/SKILL.md` in the "Available Templates" list.
   - `site/src/components/AIPlayground/Prompt.ts` in the template list.
   - `skills/infographic-syntax-creator/references/prompt.md` in the template list.
   Keep existing ordering/grouping; add new `list-*` entries near other list templates.
3. Sanity check with `rg -n "<template-name>"` across the above files to confirm presence.

## Notes

- Do not remove or rename existing entries.
- Keep template names exact and lower-case.
- If a template needs example data, update or extend `site/src/components/Gallery/datasets.ts` to match its structure.

.claude-plugin/marketplace.jsonmarketplace

Show content (678 bytes)

{
  "name": "antv-infographic",
  "owner": {
    "name": "AntV Visualization Team",
    "email": "pub_antv@antgroup.com"
  },
  "metadata": {
    "description": "Official AntV Infographic skills marketplace for Claude Code"
  },
  "plugins": [
    {
      "name": "antv-infographic-skills",
      "source": "./",
      "description": "An Infographic Generation and Rendering Framework, bring words to life!",
      "version": "0.2.14",
      "repository": "https://github.com/antvis/Infographic",
      "homepage": "https://infographic.antv.vision/",
      "license": "MIT",
      "keywords": [
        "antv",
        "infographic",
        "visualization"
      ]
    }
  ]
}

README

简体中文 | English

Infographic, bring words to life!

🦋 An Infographic Generation and Rendering Framework, bring words to life!

AntV Infographic is AntV's next-generation declarative infographic visualization engine. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler.

✨ Features

🤖 AI-friendly: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering
📦 Ready to use: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes
🎨 Theme system: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization
🧑🏻‍💻 Built-in editor: Includes an editor for infographics so AI-generated results can be edited further
📐 High-quality SVG output: Renders with SVG by default to ensure visual fidelity and easy editing

🚀 Installation

npm install @antv/infographic

📝 Quick Start

import { Infographic } from '@antv/infographic';

const infographic = new Infographic({
  container: '#container',
  width: '100%',
  height: '100%',
  editable: true,
});

infographic.render(`
infographic list-row-simple-horizontal-arrow
data
  lists
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete
`);

The rendered result looks like this:

Streaming Rendering

With a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.

let buffer = '';
for (const chunk of chunks) {
  buffer += chunk;
  infographic.render(buffer);
}

🔧 Skills Integration

AntV Infographic provides skills to integrate with AI agents:

infographic-creator: Create an HTML file that renders an infographic
infographic-syntax-creator: Generate infographic syntax from descriptions
infographic-structure-creator: Generate custom structure designs
infographic-item-creator: Generate custom item designs
infographic-template-updater: (For developers) update the template library

Claude Code

Claude marketplace is now available. You can install from marketplace, or keep using manual install.

/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic

Manual install:

set -e

VERSION=0.2.4 # Replace with the latest tag, e.g. 0.2.14
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills

curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip

Codex

Enter codex

# Replace <SKILL> with the skill name, e.g. infographic-creator
# https://github.com/antvis/Infographic/tree/main/skills/<SKILL>
$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator

🌐 Ecosystem

Community projects and products powered by AntV Infographic:

💼 Products
- Alma — Desktop AI provider orchestration app with Infographic
- Markdown Viewer — Markdown viewer with Infographic support, export to Word, extensions for Chrome/VS Code/Firefox
- InfographicAI — Generate PPT slides powered by Infographic
- LangChat Slides — Next-Gen AI Slide Generator using @antv/infographic
- Nowledge Mem — AI Memory Bank with Presentation Creator supporting Infographic
- WeChat Markdown Editor — Markdown to WeChat article editor with Infographic
- Welight — WeChat article creation platform with Infographic support
- Zojo — Generate professional infographics with simple syntax
📦 Libraries
- astro-koharu — Anime blog theme (Astro) with Infographic support
- docsify-infographic — Plugin to render Infographic diagrams in Docsify
- feffery-infographic — Create infographics in Python with Plotly Dash
- infographic-cli — CLI tool to generate SVG infographics
- infographic-for-react — React component wrapper for @antv/infographic
- markdown-it-infographic — markdown-it plugin for @antv/infographic
- markstream-vue — Streaming Markdown rendering for Vue 3 with Infographic
- obsidian-infographic — Obsidian plugin for @antv/infographic
- slidev-addon-infographic — @antv/infographic component for Slidev
- VSCode Extension — Preview Infographic in VSCode Markdown files

💡 Have a project using AntV Infographic? Share it in Issue #99!

💬 Community & Communication

Submit your questions or suggestions on GitHub
Join GitHub Discussions to communicate with the community
Contributions are welcome! Let's improve AntV Infographic together!

If you have any suggestions, feel free to communicate with us on GitHub! Star ⭐ us to show your support.

📄 License

This project is open source under the MIT license. See LICENSE for details.