markdown-chart

Add powerful charts to your VuePress site.

This plugin provides 6 different chart libraries to help you insert charts into your Markdown files:

Chart.js: A lightweight, easy-to-use, highly customizable chart library.
Chart.js is lighter compared to ECharts.
ECharts: A powerful, interactive charting and visualization library for browsers.
ECharts is more powerful compared to Chart.js.
Flowchart: A simple Markdown extension to generate flowcharts and sequence diagrams.
Lightweight, focusing only on flowcharts.
Markmap: Create mind maps from Markdown.
The runtime is heavy, not recommended for production.
Mermaid: Generate diagrams and flowcharts from text in a similar manner as Markdown.
Powerful collection of common charts.
PlantUML: UML diagrams powered by Java.
No client-side runtime, extremely lightweight.

Installation

pnpm

pnpm add -D @vuepress/plugin-markdown-chart@next

yarn

yarn add -D @vuepress/plugin-markdown-chart@next

npm

npm i -D @vuepress/plugin-markdown-chart@next

Usage

import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'

export default {
  plugins: [
    markdownChartPlugin({
      // Enable Chart.js
      chartjs: true,
      // Enable ECharts
      echarts: true,
      // Enable Flowchart.js
      flowchart: true,
      // Enable Markmap
      markmap: true,
      // Enable Mermaid
      mermaid: true,
      // Enable PlantUML
      plantuml: true,
    }),
  ],
}

Available Charts

Options

chartjsboolean

Whether to enable Chart.js support.

echartsboolean

Whether to enable ECharts support.

flowchartboolean

Whether to enable Flowchart support.

markmapboolean

Whether to enable Markmap support.

mermaidboolean

Whether to enable Mermaid support.

plantumlboolean | MarkdownItPlantumlOptions[]

Whether to enable PlantUML support. Can accept configuration options for advanced usage.

DANGEROUS_ALLOW_SCRIPT_EXECUTIONboolean

Whether to allow script execution in charts.

DANGEROUS_SCRIPT_EXECUTION_ALLOWLISTstring[] | '*'

Default []

Only effective when DANGEROUS_ALLOW_SCRIPT_EXECUTION is enabled. A list of file paths allowed to execute chart scripts. Use '*' to allow all files.