Obsidian Infographic 教程：在笔记里展示信息图
Obsidian 很适合写结构化笔记，但一旦你想放一张流程、对比、时间线或层级图，体验就开始变重：打开画图工具，拖节点，导出图片，再贴回笔记。下次内容一改，图也要重新维护。
shuuul/obsidian-infographic 的思路更适合 Markdown 笔记：用一个 infographic 代码块，把 AntV Infographic 信息图直接渲染在 Obsidian 里。图表定义和正文留在同一个 md 文件中，版本管理、搜索、复制都更自然。
如果你还不了解 AntV Infographic，可以先看站内这篇 AntV Infographic 开源项目介绍。如果你想在 Obsidian 里展示函数图，Obsidian Desmos 教程更适合那个场景。
这个插件适合什么笔记
obsidian-infographic 适合把“结构”可视化，而不是做精细设计稿。
- 项目复盘里的流程图
- 产品方案里的优劣势对比
- 学习笔记里的时间线
- 架构笔记里的模块层级
- 周报里的关键指标柱状图
它的优势不是让你像 Figma 一样精修每个像素，而是让你用文本快速生成一张足够清楚的信息图。对笔记来说，这通常更重要。
安装 obsidian-infographic
直接通过 Obsidian 的第三方插件库安装即可。
- 打开 Obsidian 设置
- 进入第三方插件
- 如果还没关闭安全模式，先关闭
- 点击浏览或打开插件市场
- 搜索 Infographic
- 安装并启用 Infographic
安装完成后，回到当前笔记，切到阅读视图或实时预览，就可以测试 infographic 代码块是否渲染。
写第一个 infographic 代码块
新建一个语言为 infographic 的代码块。先用最简单的步骤列表测试插件是否正常工作。
obsidian-infographic 支持两种输入格式：JSON 和 DSL。原因很简单：AntV Infographic 本身既可以接收结构化配置，也提供了更适合人手写的声明式语法。
JSON 更像“程序配置”。它的优点是标准、严格，适合从工具、脚本、AI 输出或网页示例里复制，也适合后续交给程序处理。缺点是括号、引号、逗号比较多，写笔记时容易被格式细节打断。
下面是 JSON 格式：
```infographic
{
"template": "list-row-simple-horizontal-arrow",
"data": {
"items": [
{ "label": "Step 1", "desc": "Collect notes" },
{ "label": "Step 2", "desc": "Extract structure" },
{ "label": "Step 3", "desc": "Render infographic" }
]
}
}
```切到阅读视图或实时预览。如果插件启用成功，你会看到一张横向步骤信息图。
这里有两个关键点：
- 代码块语言必须是 infographic
- template 必须是 AntV Infographic 支持的模板名
如果只是看到原始文本，先检查插件是否启用，再检查代码块开头是不是写成了 infographic。
用 DSL 写法减少括号
DSL 更像“笔记里的大纲”。它把模板名、数据层级、主题配置写成缩进结构，读起来接近 Markdown 列表。你在 Obsidian 里手写、修改标题、增删步骤时，DSL 通常更舒服。
下面是同一张图的 DSL 格式：
```infographic
infographic list-row-simple-horizontal-arrow
data
items
- label Step 1
desc Collect notes
- label Step 2
desc Extract structure
- label Step 3
desc Render infographic
theme light
palette antv
```这段和上面的 JSON 例子表达的是同一件事。区别只在输入格式，不在最终渲染能力。
我的建议很直接：
- 在 Obsidian 里自己写图，用 DSL
- 从 AntV 示例、脚本或其他工具复制配置，用 JSON
- 让 AI 帮你生成初稿，用 DSL 更容易阅读和二次修改
- 要和程序交换数据，或者需要严格校验字段，用 JSON
如果你不确定选哪种，就选 DSL。它更像笔记，更少语法噪音，也更适合长期维护。
做一张对比信息图
信息图最常见的用途之一，是把两组观点放在一起。比如你在产品笔记里比较“手绘截图”和“代码块生成图”。
```infographic
infographic compare-binary-horizontal-badge-card-fold
data
title Note Diagram Workflow
desc Compare image-first and markdown-first visual notes
items
- label Screenshot Workflow
children
- label Fast for one-off sharing
desc Good when the visual will not change
- label Hard to maintain
desc Text updates require a new image
- label Weak searchability
desc Details are hidden inside the bitmap
- label Infographic Block
children
- label Version friendly
desc Diagram source lives in the note
- label Easy to edit
desc Change labels and rerender
- label Better reuse
desc Copy the block into other notes
theme light
palette antv
```这个例子适合放在方法论、产品方案、工具评估类笔记里。你不需要为了一个对比图打开单独的画图软件。
做一张时间线
时间线适合项目记录和学习路径。下面这个例子可以直接放进“AI 工具学习计划”笔记。
```infographic
infographic sequence-timeline-rounded-rect-node
data
title Obsidian Visual Notes Plan
desc A simple path from plain notes to reusable visual knowledge
items
- label Collect
value 70
desc Save raw ideas and links in daily notes
time Week 1
icon lucide/inbox
illus mobile-photos
- label Structure
value 80
desc Turn rough notes into outlines and lists
time Week 2
icon lucide/list-tree
illus code-thinking
- label Visualize
value 90
desc Use infographic blocks for timelines and comparisons
time Week 3
icon lucide/chart-no-axes-combined
illus business-analytics
- label Publish
value 75
desc Export or share the note when the structure is stable
time Week 4
icon lucide/send
illus creativity
theme light
palette antv
```注意 value 不是必须字段，但很多模板会用它控制视觉权重。你可以先保留，再按渲染效果调整。
在设置里调整显示效果
进入 Obsidian 设置，打开第三方插件，找到 Infographic 设置页。
常用设置有这些：
- Auto render：在预览中自动渲染信息图
- Theme：自动、浅色或深色
- Error behavior：渲染失败时显示源码、显示错误或隐藏
- Max width：最大宽度
- Max height：最大高度
我建议一开始把错误行为设成 show-code 或 show-error。这样模板名写错、缩进写错时，你能立刻看到问题，而不是面对一块空白区域猜半天。
导出 SVG、PNG 和 PDF
渲染后的信息图带有工具栏，可以复制源码，也可以导出为 SVG 或 PNG。做资料整理时，SVG 更适合继续编辑和放进文档；PNG 更适合聊天、社交媒体和临时分享。
插件 README 还强调了 PDF 支持。也就是说，你可以用 Obsidian 自带的导出 PDF 功能，把带有 infographic 代码块的笔记导出去。
实际导出前建议做三件事：
- 切到阅读视图，确认每张图都已经渲染
- 如果使用深色主题，检查 PDF 里的文字对比度
- 重要文档先导出一次测试版，确认图没有被截断
信息图模板通常有固定视觉结构。内容太长时，最容易出问题的不是插件，而是你把一整篇文章塞进了一个图里。信息图应该表达结构，不应该承担全部正文。
常见问题
代码块没有渲染
先检查代码块语言。开头必须是 infographic。
```infographic
...
```再检查插件是否已经启用。安装完成不等于启用，第三方插件列表里需要打开 Infographic。
渲染区域是空白
通常是模板名或数据结构不匹配。
先用 README 里的 list-row-simple-horizontal-arrow 示例测试。如果这个最小例子能渲染，再逐步替换成你的模板和数据。
DSL 看起来没问题但仍然报错
重点看缩进。DSL 依赖层级，items、children、label、desc 的缩进不能随意混用。每一层建议统一用两个空格。
图太宽或太高
先到插件设置里调 Max width 和 Max height。还不够时，减少 items 数量，或者换一个更适合的模板。
同一张图里元素越多，移动端和 PDF 导出的风险越高。复杂结构可以拆成两张图。
同步到另一台设备后不能显示
Obsidian 同步的是笔记内容，不一定同步插件安装状态。另一台设备也要安装并启用 Infographic。
manifest 里显示插件不是桌面专用，但移动端主题、性能和导出能力仍然可能和桌面端不同。正式使用前，最好在目标设备上打开一次。
一个完整笔记示例
下面这段可以直接放进 Obsidian。它把“写一篇可发布教程”的流程做成横向步骤图。
# Tutorial Publishing Flow
这张图用 obsidian-infographic 生成。源代码留在笔记里，后续改标题、步骤或说明都不用重新画图。
```infographic
infographic list-row-simple-horizontal-arrow
data
items
- label Research
desc Read the repo, README, release notes, and examples
- label Draft
desc Write a runnable tutorial with one clear outcome
- label Verify
desc Test commands, links, and rendering behavior
- label Publish
desc Export assets or publish the markdown note
theme light
palette antv
```什么时候别用它
如果你需要的是像素级海报、品牌设计稿、复杂交互图，obsidian-infographic 不是最顺手的工具。它更像“信息图渲染器”，不是设计软件。
但如果你的目标是在 Obsidian 里维护可编辑、可复制、可版本管理的结构化图表，它的方向很对。写笔记时，把结构留在文本里，通常比留在截图里更耐用。
