vitepress-plugin-legend

English

简体中文

English

简体中文

Theme

Infographic ​

AntV Infographic is a library focused on infographic visualization, providing 236+ built-in templates.

Installation ​

bash
npm install vitepress-infographic-preview
# or
yarn add vitepress-infographic-preview
# or
pnpm add vitepress-infographic-preview

Configuration ​

1. Plugin Setup ​

Add the plugin in .vitepress/config.ts:

typescript
import { defineConfig } from 'vitepress';
import { vitepressInfographicPreview } from 'vitepress-infographic-preview';

export default defineConfig({
  markdown: {
    config: (md) => {
      vitepressInfographicPreview(md);
    },
  },
});

2. Component Registration ​

Register the global component in .vitepress/theme/index.ts:

typescript
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import { initComponent } from 'vitepress-infographic-preview/component';
import 'vitepress-infographic-preview/dist/index.css';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    initComponent(app);
  },
} satisfies Theme;

Usage ​

Basic Usage ​

Create infographics using Markdown code blocks:

Show Toolbar ​

Control toolbar visibility using frontmatter:

Load from External File ​

Use the PreviewInfographicPath component to load an external file:

vue
<PreviewInfographicPath path="./chart.igf" showToolbar />

Configuration Options ​

vitepressInfographicPreview Options ​

OptionTypeDefaultDescription
showToolbarbooleanfalseShow toolbar by default

PreviewInfographicPath Component Props ​

PropTypeDefaultDescription
pathstring-Infographic file path
showToolbarbooleanfalseShow toolbar

Toolbar Features ​

  • Zoom In/Out: Zoom infographic
  • Fit to Screen: Reset zoom
  • Copy Code: Copy infographic syntax to clipboard
  • Download Chart: Download chart as PNG image
  • Fullscreen: Fullscreen preview

Template Types ​

AntV Infographic supports various template types:

  • Chart: Bar, Pie, Line, Word Cloud, etc.
  • Comparison: Binary comparison, Hierarchy comparison, Quadrant, etc.
  • Hierarchy: Mind Map, Tree structure, etc.
  • List: List, Grid, Pyramid, etc.
  • Quadrant: Quadrant charts
  • Relation: Relation graphs, DAG, etc.
  • Sequence: Timeline, Steps, Flow, etc.

For more templates, visit AntV Infographic Gallery.