obsidian-infographic

January 22, 2026 · View on GitHub

Obsidian plugin for rendering infographic diagrams using @antv/infographic

中文文档

Installation

Note: This plugin is not yet published in the Obsidian plugin marketplace. Please use one of the following methods to install it manually:

  1. Make sure you have installed BRAT plugin
  2. In BRAT settings, click the "Add a beta plugin" button and add this plugin's GitHub repository URL: 
    https://github.com/hcg1023/obsidian-infographic
  3. Version Selection
    • Select "Latest version", or install a specific version as needed
  4. Click the Add Plugin button and BRAT will automatically download and install the latest version of the plugin

Method 2: Build from Source

  1. Clone the project to your Obsidian plugins directory:

    cd ~/.obsidian/plugins
git clone https://github.com/hcg1023/obsidian-infographic.git
cd obsidian-infographic

  2. Install dependencies and build:

    npm install
npm run build

  3. Enable the plugin in Obsidian settings

Method 3: Download Source + Pre-built File

  1. Download the project source code to .obsidian/plugins directory
  2. Download the main.js file from the latest release
  3. Place main.js in .obsidian/plugins/obsidian-infographic/ directory
  4. Enable the plugin in Obsidian settings

Method 4: Pre-built Files Only

  1. Download the following files from the latest release:

    • main.js
    • manifest.json
    • styles.css

  2. Create obsidian-infographic folder in .obsidian/plugins/ directory (if it doesn't exist)

  3. Place the downloaded files in .obsidian/plugins/obsidian-infographic/ directory

  4. Enable the plugin in Obsidian settings

Usage

Basic Example

In your Obsidian notes, use the infographic code block:

```infographic
infographic list-row-simple-horizontal-arrow
data
  items
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete
```

Advanced Example with Template

```infographic
infographic chart-bar-plain-text
data
  title 年度营收增长
  desc 展示近三年及本年目标营收对比（单位：亿元）
  items
    - label 2021年
      value 120
      desc 转型初期，稳步试水
      icon lucide/sprout
    - label 2022年
      value 150
      desc 平台优化，效率显著提升
      icon lucide/zap
    - label 2023年
      value 190
      desc 深化数智融合，全面增长
      icon lucide/brain-circuit
    - label 2024年
      value 240
      desc 拓展生态协同，冲击新高
      icon lucide/trophy
theme light
  palette antv
```

Export

Right-click on the rendered infographic to access the following options:

  1. Copy - Copy the infographic (PNG format) to clipboard for pasting into other applications
  2. Export as PNG - Download the infographic as a PNG image file
  3. Export as SVG - Download the infographic as an SVG vector file

Development

Prerequisites

  • Node.js >= 16
  • npm or yarn

Build

# Install dependencies
npm install

# Development mode with hot reload
npm run dev

# Production build
npm run build

# Run linter
npm run lint

Project Structure

obsidian-infographic/
├── src/
│   ├── main.ts       # Main plugin code
│   └── settings.ts   # Plugin settings
├── main.js           # Compiled plugin
├── manifest.json     # Plugin manifest
├── styles.css        # Plugin styles
└── package.json      # Dependencies

Options

This plugin uses @antv/infographic for rendering. The infographic content is passed directly to the Infographic instance.

For more information on infographic syntax and features, see the Infographic documentation.

Features

  • Render infographic diagrams in Obsidian using infographic code blocks
  • Support for various diagram types (mind maps, timelines, flowcharts, etc.)
  • Export to PNG or SVG formats
  • Copy to clipboard functionality
  • Error handling with friendly error messages

License

MIT License

Credits