feat: add plugin-markdown-chart

vuepress · Oct 22, 2024 · d4bad4a · d4bad4a
1 parent f9776da
commit d4bad4a
Show file tree

Hide file tree

Showing 62 changed files with 7,114 additions and 272 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -21,27 +21,33 @@
   "cSpell.words": [
     "artalk",
     "bumpp",
+    "chartjs",
     "composables",
     "darkmode",
     "devtool",
     "docsearch",
+    "echarts",
     "envinfo",
     "esbuild",
     "frontmatter",
     "fullscreen",
+    "gantt",
     "giscus",
     "globby",
     "gtag",
     "jsonld",
     "lazyload",
     "lightmode",
     "katex",
+    "markmap",
     "mathjax",
     "mdit",
+    "mindmap",
     "nord",
     "nprogress",
     "pageview",
     "photoswipe",
+    "plantuml",
     "prefetch",
     "preload",
     "prismjs",

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -8,6 +8,7 @@ import { catalogPlugin } from '@vuepress/plugin-catalog'
 import { commentPlugin } from '@vuepress/plugin-comment'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { feedPlugin } from '@vuepress/plugin-feed'
+import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'
 import { markdownImagePlugin } from '@vuepress/plugin-markdown-image'
 import { markdownMathPlugin } from '@vuepress/plugin-markdown-math'
 import { redirectPlugin } from '@vuepress/plugin-redirect'
@@ -91,6 +92,14 @@ export default defineUserConfig({
       json: true,
       rss: true,
     }),
+    markdownChartPlugin({
+      chartjs: true,
+      echarts: true,
+      flowchart: true,
+      markmap: true,
+      mermaid: true,
+      plantuml: true,
+    }),
     markdownImagePlugin({
       figure: true,
       mark: true,

diff --git a/docs/package.json b/docs/package.json
@@ -12,13 +12,15 @@
     "@mdit/plugin-footnote": "0.13.1",
     "@vuepress/bundler-vite": "2.0.0-rc.18",
     "@vuepress/bundler-webpack": "2.0.0-rc.18",
-    "@vuepress/plugin-back-to-top": "workspace:*",
     "@vuepress/helper": "workspace:*",
+    "@vuepress/plugin-back-to-top": "workspace:*",
+    "@vuepress/plugin-cache": "workspace:*",
     "@vuepress/plugin-catalog": "workspace:*",
     "@vuepress/plugin-comment": "workspace:*",
     "@vuepress/plugin-copy-code": "workspace:*",
     "@vuepress/plugin-docsearch": "workspace:*",
     "@vuepress/plugin-feed": "workspace:*",
+    "@vuepress/plugin-markdown-chart": "workspace:*",
     "@vuepress/plugin-markdown-image": "workspace:*",
     "@vuepress/plugin-markdown-math": "workspace:*",
     "@vuepress/plugin-markdown-tab": "workspace:*",
@@ -31,11 +33,17 @@
     "@vuepress/plugin-revealjs": "workspace:*",
     "@vuepress/plugin-search": "workspace:*",
     "@vuepress/plugin-shiki": "workspace:*",
-    "@vuepress/plugin-cache": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
-    "katex": "0.16.11",
-    "mathjax-full": "3.2.2",
-    "sass-embedded": "1.80.3",
+    "chart.js": "^4.4.5",
+    "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.3.0",
+    "sass-embedded": "^1.80.3",
     "sass-loader": "^16.0.2",
     "vue": "^3.5.12",
     "vuepress": "2.0.0-rc.18"

diff --git a/docs/plugins/markdown/markdown-chart/README.md b/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,
+    }),
+  ],
+}
+```