[GH-ISSUE #828] [feat] 支持信息图，可以使用最近的 AntV Infographic #618

New issue

Closed

opened 2026-03-02 03:40:52 +03:00 by kerem · 2 comments

kerem commented

2026-03-02 03:40:52 +03:00

Owner

Originally created by @hustcc on GitHub (Jan 5, 2026).
Original GitHub issue: https://github.com/codexu/note-gen/issues/828

描述你的建议

有类似于 mermaid 的 markdown 语法，在 markdown 编辑器中使用比较适用。

GitHub：https://github.com/antvis/infographic
官网：https://infographic.antv.vision/

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

const infographic = new Infographic({
  container: "#container",
  height: 240,
  editable: true,
});

const syntax = `
infographic list-row-horizontal-icon-arrow
data
  title 互联网技术演进史
  desc 从Web 1.0到AI时代的关键里程碑
  items
    - time 1991
      label 万维网诞生
      desc Tim Berners-Lee发布首个网站，开启互联网时代
      icon mdi/web
    - ...
`

infographic.render(syntax);

可以类似于 mermaid 做成 markdown 的一个代码块，语言名为 infographic。

可以来帮忙 PR。

Originally created by @hustcc on GitHub (Jan 5, 2026). Original GitHub issue: https://github.com/codexu/note-gen/issues/828 ### 描述你的建议有类似于 mermaid 的 markdown 语法，在 markdown 编辑器中使用比较适用。 - GitHub：https://github.com/antvis/infographic - 官网：https://infographic.antv.vision/ ```ts import { Infographic } from '@antv/infographic'; const infographic = new Infographic({ container: "#container", height: 240, editable: true, }); const syntax = ` infographic list-row-horizontal-icon-arrow data title 互联网技术演进史 desc 从Web 1.0到AI时代的关键里程碑 items - time 1991 label 万维网诞生 desc Tim Berners-Lee发布首个网站，开启互联网时代 icon mdi/web - ... ` infographic.render(syntax); ``` <img width="2538" height="1254" alt="Image" src="https://github.com/user-attachments/assets/b1188b4f-4419-44c0-a6a4-1f0f4e7f7837" /> 可以类似于 mermaid 做成 markdown 的一个代码块，语言名为 `infographic`。可以来帮忙 PR。

kerem closed this issue

2026-03-02 03:40:52 +03:00

kerem commented

2026-03-02 03:40:52 +03:00

Author

Owner

@codexu commented on GitHub (Jan 9, 2026):

可以补充一个完整的 Markdown 示例吗？

@codexu commented on GitHub (Jan 9, 2026): 可以补充一个完整的 Markdown 示例吗？

kerem commented

2026-03-02 03:40:53 +03:00

Author

Owner

@Aarebecca commented on GitHub (Jan 9, 2026):

@codexu 在 https://github.com/codexu/note-gen/pull/834 中的实现，可以通过代码块编写信息图（类似于 mermaid、plantuml）

```infographic
信息图语法...
```

支持渲染的信息图可见：https://infographic.antv.vision/gallery

简单的信息图语法大致可以分解为：模版 + 数据，例如：

infographic chart-bar-plain-text
data
  title 年度营收增长
  desc 展示近三年及本年目标营收对比（单位：亿元）
  items
    - label 2021年
      value 120
    - label 2022年
      value 150
    - label 2023年
      value 190
    - label 2024年
      value 240

可以渲染出如下图表：

@Aarebecca commented on GitHub (Jan 9, 2026): @codexu 在 https://github.com/codexu/note-gen/pull/834 中的实现，可以通过代码块编写信息图（类似于 mermaid、plantuml） > \`\`\`infographic > 信息图语法... > \`\`\` 支持渲染的信息图可见：https://infographic.antv.vision/gallery 简单的信息图语法大致可以分解为：`模版` + `数据`，例如： ``` infographic chart-bar-plain-text data title 年度营收增长 desc 展示近三年及本年目标营收对比（单位：亿元） items - label 2021年 value 120 - label 2022年 value 150 - label 2023年 value 190 - label 2024年 value 240 ``` 可以渲染出如下图表： <img width="871" height="491" alt="Image" src="https://github.com/user-attachments/assets/05cd608a-5259-4ead-bcb9-0aed43226f78" />

kerem referenced this issue

2026-03-02 03:41:37 +03:00

[PR #618] [CLOSED] feat(#617): PicGo图床支持API Key认证和智能上传模式 #758