docs: update plain to infographic (#190)

* chore: update version

* docs: update ```plain to ```infographic

Author: Aarebecca

.skills/infographic-creator/SKILL.md

@@ -23,7 +23,7 @@ AntV Infographic 语法是一种自定义的 DSL，用于描述信息图渲染
 
 例如：
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Title
@@ -57,7 +57,7 @@ theme
 - `hierarchy-*`：使用单一 `root`，通过 `children` 嵌套（不要重复 `root`）
 - `theme` 用于自定义主题（palette、font 等）
   例如：暗色主题 + 自定义配色
-  ```plain
+  ```infographic
   infographic list-row-simple-horizontal-arrow
   theme dark
     palette
@@ -74,7 +74,7 @@ theme
 
   例如：手绘风格（rough）
 
-  ```plain
+  ```infographic
   infographic list-row-simple-horizontal-arrow
   theme
     stylize rough
@@ -91,7 +91,7 @@ theme
 
 - `list-*` 模版
 
-```plain
+```infographic
 infographic list-grid-badge-card
 data
   title Feature List
@@ -104,7 +104,7 @@ data
 
 - `sequence-*` 模版
 
-```plain
+```infographic
 infographic sequence-steps-simple
 data
   sequences
@@ -116,7 +116,7 @@ data
 
 - `hierarchy-*` 模版
 
-```plain
+```infographic
 infographic hierarchy-structure
 data
   root
@@ -128,7 +128,7 @@ data
 
 - `compare-*` 模版
 
-```plain
+```infographic
 infographic compare-swot
 data
   compares
@@ -144,7 +144,7 @@ data
 
 四象限图
 
-```plain
+```infographic
 infographic compare-quadrant-quarter-simple-card
 data
   compares
@@ -156,7 +156,7 @@ data
 
 - `chart-*` 模版
 
-```plain
+```infographic
 infographic chart-column-simple
 data
   values
@@ -170,7 +170,7 @@ data
 
 > 边标签写法：A -label-> B 或 A -->|label| B
 
-```plain
+```infographic
 infographic relation-dagre-flow-tb-simple-circle-node
 data
   nodes
@@ -185,7 +185,7 @@ data
 
 - 兜底 `items` 示例
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   items
@@ -283,7 +283,7 @@ data
 
 绘制互联网技术演进信息图
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Internet Technology Evolution

.skills/infographic-syntax-creator/references/prompt.md

@@ -37,7 +37,7 @@ AntV Infographic 语法是一种自定义的 DSL，用于描述信息图渲染
 
 例如：
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Title
@@ -71,7 +71,7 @@ theme
 - `hierarchy-*`：使用单一 `root`，通过 `children` 嵌套（不要重复 `root`）
 - `theme` 用于自定义主题（palette、font 等）
   例如：暗色主题 + 自定义配色
-  ```plain
+  ```infographic
   infographic list-row-simple-horizontal-arrow
   theme dark
     palette
@@ -88,7 +88,7 @@ theme
 
   例如：手绘风格（rough）
 
-  ```plain
+  ```infographic
   infographic list-row-simple-horizontal-arrow
   theme
     stylize rough
@@ -105,7 +105,7 @@ theme
 
 - `list-*` 模版
 
-```plain
+```infographic
 infographic list-grid-badge-card
 data
   title Feature List
@@ -118,7 +118,7 @@ data
 
 - `sequence-*` 模版
 
-```plain
+```infographic
 infographic sequence-steps-simple
 data
   sequences
@@ -130,7 +130,7 @@ data
 
 - `hierarchy-*` 模版
 
-```plain
+```infographic
 infographic hierarchy-structure
 data
   root
@@ -142,7 +142,7 @@ data
 
 - `compare-*` 模版
 
-```plain
+```infographic
 infographic compare-swot
 data
   compares
@@ -158,7 +158,7 @@ data
 
 四象限图
 
-```plain
+```infographic
 infographic compare-quadrant-quarter-simple-card
 data
   compares
@@ -170,7 +170,7 @@ data
 
 - `chart-*` 模版
 
-```plain
+```infographic
 infographic chart-column-simple
 data
   values
@@ -184,7 +184,7 @@ data
 
 > 边标签写法：A -label-> B 或 A -->|label| B
 
-```plain
+```infographic
 infographic relation-dagre-flow-tb-simple-circle-node
 data
   nodes
@@ -199,7 +199,7 @@ data
 
 - 兜底 `items` 示例
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   items
@@ -297,7 +297,7 @@ data
 
 绘制互联网技术演进信息图
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Internet Technology Evolution
@@ -341,7 +341,7 @@ data
 
 只输出一个 `plain` 代码块，不添加任何解释性文字：
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title 标题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

site/src/content/learn/infographic-syntax.en.md

@@ -6,7 +6,7 @@ Infographic syntax is a Mermaid-like grammar for describing templates, designs,
 
 <InfographicStreamRunner>
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Customer Growth Engine
@@ -63,7 +63,7 @@ Information structure captures the data abstraction that determines content and
 
 The entry point starts with `infographic [template-name]`, followed by blocks that describe the template, design, data, and theme.
 
-```plain
+```infographic
 infographic list-row-horizontal-icon-arrow
 data
   title Customer Growth Engine
@@ -91,15 +91,15 @@ data
 
 The template is declared directly in the entry point.
 
-```plain
+```infographic
 infographic <template-name>
 ```
 
 ### design {#design}
 
 The `design` block selects structures, cards, titles, and other modules.
 
-```plain
+```infographic
 design
   structure <structure-name>
     gap 12
@@ -130,7 +130,7 @@ In general, the selected template expects a certain data item field. For example
 
 List data represents a group of peer items without ordering, common for checklists or feature lists. Use `lists`.
 
-```plain
+```infographic
 infographic list-grid-compact-card
 data
   title Fruit Shopping List
@@ -147,7 +147,7 @@ data
 
 Sequence data is similar to lists but ordered, often used for timelines or steps. Use `sequences`.
 
-```plain
+```infographic
 infographic sequence-steps-simple
 data
   sequences
@@ -158,7 +158,7 @@ data
 
 Use the `order` field to specify sorting (`asc` or `desc`). In the example below, `order desc` means items are arranged in descending order.
 
-```plain
+```infographic
 infographic sequence-stairs-front-pill-badge
 data
   title Job Level Sequence
@@ -173,7 +173,7 @@ data
 
 Hierarchy data describes a tree structure, common for org charts or taxonomies. Use `root` for the root node and `children` recursively for descendants.
 
-```plain
+```infographic
 infographic hierarchy-structure
 data
   root
@@ -187,7 +187,7 @@ data
 
 Compare data is for side-by-side or grouped comparisons (e.g. SWOT or quadrant charts). Use `compares`.
 
-```plain
+```infographic
 infographic quadrant-quarter-simple-card
 data
   compares
@@ -203,7 +203,7 @@ data
 
 Compare items can also include `children` to create comparison hierarchies, where each root item is a comparison target and children are its metrics:
 
-```plain
+```infographic
 infographic compare-swot
 data
   compares
@@ -223,7 +223,7 @@ data
 
 Statistical data showcases metrics, using `values`.
 
-```plain
+```infographic
 infographic chart-column-simple
 data
   values
@@ -237,7 +237,7 @@ data
 
 For grouped data, use `category` (with a compatible template), for example:
 
-```plain
+```infographic
 infographic chart-column-grouped-simple
 data
   title Rainfall Data
@@ -274,7 +274,7 @@ Relation data describes node-to-node connections, such as flowcharts and network
 
 **YAML-style:**
 
-```plain
+```infographic
 infographic relation-dagre-flow-tb-simple-circle-node
 data
   title Relation Graph
@@ -290,7 +290,7 @@ data
 
 **Mermaid-style (flowchart-like):**
 
-```plain
+```infographic
 infographic relation-dagre-flow-tb-simple-circle-node
 data
   nodes
@@ -308,7 +308,7 @@ data
 
 For simple relation graphs, you can omit `nodes` and define nodes directly in `relations`:
 
-```plain
+```infographic
 infographic relation-dagre-flow-tb-simple-circle-node
 data
   relations
@@ -341,13 +341,13 @@ The `theme` block switches themes and tweaks palettes, fonts, and stylization.
 
 Use a preset theme:
 
-```plain
+```infographic
 theme <theme-name>
 ```
 
 Use a custom theme:
 
-```plain
+```infographic
 theme
   colorBg #0b1220
   colorPrimary #ff5a5f