feat: add plugin-markdown-chart

Author: Mister-Hope

.vscode/settings.json

@@ -22,17 +22,20 @@
     "artalk",
     "bumpp",
     "commitlint",
+    "chartjs",
     "composables",
     "darkmode",
     "devtool",
     "docsearch",
     "domhandler",
+    "echarts",
     "envinfo",
     "esbuild",
     "execa",
     "fflate",
     "frontmatter",
     "fullscreen",
+    "gantt",
     "giscus",
     "globby",
     "gtag",
@@ -41,16 +44,19 @@
     "lazyload",
     "lightmode",
     "linkify",
+    "markmap",
     "mathjax",
     "mdit",
     "meteorlxy",
+    "mindmap",
     "nord",
     "npmmirror",
     "nprogress",
     "pageview",
     "pageviews",
     "pengzhanbo",
     "photoswipe",
+    "plantuml",
     "prefetch",
     "preload",
     "prismjs",

docs/.vuepress/config.ts

@@ -8,6 +8,7 @@ import { commentPlugin } from '@vuepress/plugin-comment'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { feedPlugin } from '@vuepress/plugin-feed'
 import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'
+import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'
 import { markdownImagePlugin } from '@vuepress/plugin-markdown-image'
 import { markdownIncludePlugin } from '@vuepress/plugin-markdown-include'
 import { markdownMathPlugin } from '@vuepress/plugin-markdown-math'
@@ -85,6 +86,14 @@ export default defineUserConfig({
       json: true,
       rss: true,
     }),
+    markdownChartPlugin({
+      chartjs: true,
+      echarts: true,
+      flowchart: true,
+      markmap: true,
+      mermaid: true,
+      plantuml: true,
+    }),
     markdownExtPlugin({
       gfm: true,
       component: true,

docs/package.json

@@ -19,6 +19,7 @@
     "@vuepress/plugin-copy-code": "workspace:*",
     "@vuepress/plugin-docsearch": "workspace:*",
     "@vuepress/plugin-feed": "workspace:*",
+    "@vuepress/plugin-markdown-chart": "workspace:*",
     "@vuepress/plugin-markdown-ext": "workspace:*",
     "@vuepress/plugin-markdown-image": "workspace:*",
     "@vuepress/plugin-markdown-include": "workspace:*",
@@ -35,8 +36,15 @@
     "@vuepress/plugin-search": "workspace:*",
     "@vuepress/plugin-shiki": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
+    "chart.js": "4.4.6",
+    "echarts": "5.5.1",
+    "flowchart.ts": "3.0.1",
     "katex": "0.16.11",
+    "markmap-lib": "0.17.2",
+    "markmap-toolbar": "0.17.2",
+    "markmap-view": "0.17.2",
     "mathjax-full": "3.2.2",
+    "mermaid": "11.4.0",
     "sass-embedded": "1.81.0",
     "sass-loader": "^16.0.3",
     "vue": "^3.5.13",

docs/plugins/markdown/markdown-chart/README.md

@@ -0,0 +1,58 @@
+# markdown-chart
+
+<NpmBadge package="@vuepress/plugin-markdown-chart" />
+
+Add powerful charts to your VuePress site.
+
+This plugin provides 6 ways to let you insert charts into your markdown file.
+
+- chart.js: A lightweight, easy-to-use, highly customizable chart library.
+
+  chart.js is lighter comparing to echarts.
+
+- echarts: A powerful, interactive charting and visualization library for browser.
+
+  echarts is more powerful comparing to chart.js.
+
+- Flowchart: A simple markdown extension to generate flowcharts and sequence diagrams.
+
+  Lightweight, only focusing on flowcharts.
+
+- Markmap: Create mindmap with markdown
+
+  The runtime is very heavy, not recommended.
+
+- Mermaid: Generation of diagram and flowchart from text in a similar manner as markdown.
+
+  Powerful collection of common charts.
+
+- Plantuml: UML diagram driven by Java.
+
+  No runtime, diagram render is processed on plantuml server.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-markdown-chart@next
+```
+
+```ts
+import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'
+
+export default {
+  plugins: [
+    markdownChartPlugin({
+      // Enable chart.js
+      chartjs: true,
+      // Enable echarts
+      echarts: true,
+      // Enable flowchart.ts
+      flowchart: true,
+      // Enable markmap
+      markmap: true,
+      // Enable mermaid
+      mermaid: true,
+    }),
+  ],
+}
+```