Obsidian Infographic Tutorial: Visual Notes with AntV
- Smars
- Tutorials , Obsidian
- 24 May, 2026
Obsidian is excellent for structured notes, but visual structure often breaks the flow. You open a diagram tool, drag shapes around, export an image, paste it into the note, then repeat the whole thing when the content changes.
shuuul/obsidian-infographic takes a more Markdown-native path. It renders AntV Infographic visuals directly from an infographic code block inside your Obsidian note. The diagram source stays next to the explanation, so editing, search, copy, and version history all remain clean.
If AntV Infographic is new to you, start with our AntV Infographic open-source overview. If you want math graphs instead of process visuals, Obsidian Desmos is the better tool.
When to use this plugin
obsidian-infographic is best for visualizing structure, not for polishing a design mockup.
- Process flows in project retrospectives
- Pros and cons in product notes
- Timelines in learning notes
- Module hierarchies in architecture notes
- Simple metric charts in weekly reviews
The value is not pixel-perfect design. The value is turning text into a clear visual fast enough that the visual can stay part of the note.
Install obsidian-infographic
Install it directly from Obsidian’s third-party plugin directory.
- Open Obsidian Settings
- Go to Third-party plugins
- Turn off Restricted mode if you have not already
- Open Browse or the plugin directory
- Search for Infographic
- Install and enable Infographic
After installation, return to the note and switch to reading view or live preview to test whether infographic blocks render.
Create your first infographic block
Create a fenced code block with the infographic language. Start with a tiny step list to confirm the plugin is working.
obsidian-infographic supports two input formats: JSON and DSL. The reason is practical: AntV Infographic can consume structured configuration, while also offering a declarative syntax that is easier for humans to write.
JSON behaves like program configuration. It is strict, standard, and easy to copy from tools, scripts, AI output, or web examples. It is also better when you want another program to generate or validate the data. The downside is visual noise: braces, quotes, and commas get in the way when you are writing notes by hand.
Here is the JSON format:
```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" }
]
}
}
```Switch to reading view or live preview. If the plugin is enabled, Obsidian will render a horizontal step infographic.
Two details matter:
- The code block language must be infographic
- The template name must match an AntV Infographic template
If you only see raw text, check whether the plugin is enabled and whether the code fence starts with infographic.
Use DSL to make notes cleaner
DSL behaves more like an outline inside your note. It writes the template name, data hierarchy, and theme settings as indentation, which feels closer to a Markdown list. When you are writing in Obsidian and changing labels, steps, or descriptions by hand, DSL is usually more comfortable.
Here is the same visual in DSL format:
```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
```This expresses the same visual as the JSON example. The difference is the input format, not the rendering capability.
My recommendation is simple:
- Writing diagrams by hand in Obsidian: use DSL
- Copying config from AntV examples, scripts, or other tools: use JSON
- Asking AI to draft a visual block: use DSL because it is easier to read and revise
- Exchanging data with code or validating fields strictly: use JSON
If you are unsure, choose DSL. It feels more like a note, has less syntax noise, and is easier to maintain over time.
Build a comparison infographic
One practical use case is comparing two workflows. Here is a note-friendly comparison between screenshot-based diagrams and code-block-generated visuals.
```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
```This works well in methodology notes, product analysis, and tool evaluations. You do not need to open a separate drawing app for a simple comparison.
Build a timeline
Timelines are useful for project logs and learning plans. The example below fits an AI tooling study note.
```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
```The value field is not always required, but many templates use it to shape visual weight. Keep it at first, then adjust after seeing the rendered result.
Adjust rendering settings
Open Obsidian Settings, go to Third-party plugins, and open the Infographic settings page.
Useful settings include:
- Auto render: render infographics automatically in preview
- Theme: auto, light, or dark
- Error behavior: show source, show error, or hide failed blocks
- Max width: maximum rendered width
- Max height: maximum rendered height
At the beginning, set error behavior to show-code or show-error. When a template name or indentation is wrong, you want the problem visible instead of staring at an empty block.
Export SVG, PNG, and PDF
Rendered infographics include a toolbar. You can copy the source, export SVG, or export PNG. SVG is better when you want to edit or embed the visual in documents. PNG is better for chats, social posts, and quick sharing.
The README also highlights PDF support. That means Obsidian’s built-in Export to PDF flow can include notes that contain infographic blocks.
Before exporting an important note:
- Switch to reading view and confirm every visual has rendered
- If you use a dark theme, check text contrast in the exported PDF
- Export a test PDF first and make sure no visual is clipped
Infographic templates have their own layout limits. When content is too long, the problem is often not the plugin. It is that the visual is being asked to carry an entire essay. Let the infographic show structure, and let the note carry the details.
Troubleshooting
The code block does not render
Check the code block language first. It must be infographic.
```infographic
...
```Then confirm the plugin is enabled. Installing a plugin is not the same as enabling it, so make sure Infographic is toggled on in the third-party plugin list.
The rendered area is blank
The usual cause is a mismatched template name or data shape.
Start with the list-row-simple-horizontal-arrow example from the README. If that minimal example renders, gradually replace the template and data with your own.
The DSL looks right but still fails
Check indentation. DSL depends on hierarchy. items, children, label, and desc cannot be indented randomly. Use two spaces per level consistently.
The visual is too wide or too tall
Start with Max width and Max height in the plugin settings. If that is not enough, reduce the number of items or pick a template that fits the content better.
The more elements you pack into one visual, the higher the risk on mobile and PDF export. Split complex structures into two visuals.
It does not render on another device
Obsidian syncs note content, but plugin installation is device-specific. Install and enable Infographic on the other device too.
The manifest says the plugin is not desktop-only, but mobile themes, performance, and export behavior can still differ from desktop. Test on the device where you plan to use it.
A complete note example
Paste this into Obsidian to create a simple publishing flow infographic.
# Tutorial Publishing Flow
This visual is generated by obsidian-infographic. The source stays in the note, so later edits do not require redrawing the diagram.
```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
```When not to use it
If you need a pixel-perfect poster, brand design mockup, or complex interactive diagram, obsidian-infographic is not the smoothest tool. It is an infographic renderer, not a design suite.
But if your goal is editable, copyable, version-friendly visual structure inside Obsidian, the direction is exactly right. In a note system, structure stored as text usually ages better than structure trapped in screenshots.
