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,
    }),
  ],
}