feat: mermaid

example/.vuepress/config.js

@@ -143,6 +143,7 @@ module.exports = {
       }
     ],
     '@renovamen/vuepress-plugin-katex',
+    '@renovamen/vuepress-plugin-mermaid',
     'vuepress-plugin-chart'
   ],
   markdown: {

example/docs/README.md

@@ -39,7 +39,10 @@ Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题，在 [H
 - 文章目录
 - 代码高亮渲染，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
 - 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
-- 文章中的一些附加样式，目前支持脚注（基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)）、高亮（基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)）
+- 在文章中使用图表，目前支持 [Chart.js](https://www.chartjs.org) 和 [Mermaid](https://mermaid-js.github.io)
+- 文章中的一些附加样式，目前支持：
+  - 脚注（基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)）
+  - 高亮（基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)）
 - 站点统计（[Google Analytics](https://analytics.google.com/) 和 [百度统计](https://tongji.baidu.com/)）
 - 评论（基于 [Vssue](https://github.com/meteorlxy/vssue)）
 - RSS

example/posts/2020-10-29-hello-word.md

@@ -109,6 +109,16 @@ while True:
 }
 ```
 
+### Mermaid
+
+```mermaid
+sequenceDiagram
+    Alice->John: Hello John, how are you?
+    loop Every minute
+        John-->Alice: Great!
+    end
+```
+
 
 ## Images
 

example/posts/2020-10-30-hello-word-with-header-image.md

@@ -112,6 +112,16 @@ while True:
 }
 ```
 
+### Mermaid
+
+```mermaid
+sequenceDiagram
+    Alice->John: Hello John, how are you?
+    loop Every minute
+        John-->Alice: Great!
+    end
+```
+
 
 ## Images
 

packages/plugins/chart/README.md

@@ -1,20 +1,20 @@
 # vuepress-plugin-chart
 
-A plugin for adding [Chart.js](https://www.chartjs.org) to VuePress.
+A plugin for adding [Chart.js](https://www.chartjs.org) to [VuePress](https://vuepress.vuejs.org/).
 
  
 
-## Usage
+## Installation
 
-Install:
+Install this plugin with:
 
 ```bash
 yarn add vuepress-plugin-chart
 # or
 npm install vuepress-plugin-chart
 ```
 
-Add this plugin to your `.vuepress/config.js`:
+And add it to your `.vuepress/config.js`:
 
 ```js
 module.exports = {
@@ -26,9 +26,13 @@ module.exports = {
 }
 ```
 
+ 
+
+## Usage
+
 Then you can use [Chart.js](https://www.chartjs.org) in Markdown:
 
-<pre><code class="json">```chart
+<pre><code>```chart
 {
   "type": "bar",
   "data": {

packages/plugins/mermaid/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Xiaohan Zou (@Renovamen)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugins/mermaid/README.md

@@ -0,0 +1,48 @@
+# @renovamen/vuepress-plugin-mermaid
+
+A plugin for adding [Mermaid](https://mermaid-js.github.io) to [VuePress](https://vuepress.vuejs.org/).
+
+ 
+
+## Installation
+
+Install this plugin with:
+
+```bash
+yarn add @renovamen/vuepress-plugin-mermaid
+# or
+npm install @renovamen/vuepress-plugin-mermaid
+```
+
+And add it to your `.vuepress/config.js`:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@renovamen/vuepress-plugin-mermaid'
+    ]
+  ]
+}
+```
+
+ 
+
+## Usage
+
+Then you can use [Mermaid](https://mermaid-js.github.io) in Markdown:
+
+<pre><code>```mermaid
+sequenceDiagram
+  Alice->John: Hello John, how are you?
+  loop Every minute
+    John-->Alice: Great!
+  end
+```
+</code></pre>
+
+&nbsp;
+
+## License
+
+[MIT](LICENSE)

packages/plugins/mermaid/enhanceApp.js

@@ -0,0 +1,6 @@
+import Mermaid from './lib/Mermaid';
+
+export default function (ctx) {
+  const { Vue } = ctx;
+  Vue.component('Mermaid', Mermaid);
+}

packages/plugins/mermaid/index.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const mermaid = require('./lib/markdown-it-mermaid')
+
+module.exports = (options, ctx) => {
+  return {
+    name:'@renovamen/vuepress-plugin-mermaid',
+    enhanceAppFiles: path.resolve(__dirname, './enhanceApp.js'),
+    chainMarkdown(config) {
+      config
+        .plugin('mermaid')
+        .use(mermaid)
+    }
+  }
+}

packages/plugins/mermaid/lib/Mermaid.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :id="id" class="vuepress-mermaid">
+    {{ code }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mermaid',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  mounted () {
+    import('mermaid/dist/mermaid.min').then(mermaid => {
+      mermaid.initialize({
+        startOnLoad: true
+      });
+      mermaid.init(undefined, '#' + this.id);
+    })
+  }
+}
+</script>
+
+<style lang="stylus">
+.vuepress-mermaid
+  margin 30px 0
+  overflow scroll
+  text-align center
+  display flex
+  justify-content center
+  align-items center
+  @media (max-width: 419px)
+    margin 0
+</style>

packages/plugins/mermaid/lib/markdown-it-mermaid.js

@@ -0,0 +1,24 @@
+const { hash } = require('@vuepress/shared-utils')
+
+const mermaid = (md) => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules);
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+
+    if (token.info === 'mermaid') {
+      try {
+        const key = `mermaid_${hash(idx)}`;
+        const code = token.content.trim();
+
+        md.$dataBlock[key] = code;
+        return `<Mermaid id="${key}" :code="$dataBlock.${key}"></Mermaid>`;
+      }
+      catch (err) {
+        return `<pre>${err}</pre>`
+      }
+    }
+    return temp(tokens, idx, options, env, slf);
+  }
+}
+
+module.exports = mermaid;

packages/plugins/mermaid/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@renovamen/vuepress-plugin-mermaid",
+  "version": "0.1.0",
+  "description": "A plugin for adding Mermaid to VuePress.",
+  "author": "Renovamen <renovamenzxh@gmail.com>",
+  "main": "index.js",
+  "keywords": [
+    "vue",
+    "vuepress",
+    "vuepress-plugin",
+    "mermaid"
+  ],
+  "homepage": "https://github.com/Renovamen/vuepress-theme-gungnir/tree/main/packages/plugins/mermaid",
+  "bugs": {
+    "url": "https://github.com/Renovamen/vuepress-theme-gungnir/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Renovamen/vuepress-theme-gungnir.git",
+    "directory": "packages/plugins/mermaid"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "mermaid": "^8.9.0"
+  }
+}

packages/theme-gungnir/package.json

@@ -27,6 +27,7 @@
     "@renovamen/vuepress-plugin-katex": "^0.1.0",
     "@renovamen/vuepress-plugin-baidu-tongji": "^0.1.0",
     "@renovamen/vuepress-plugin-md-plus": "^0.1.0",
+    "@renovamen/vuepress-plugin-mermaid": "^0.1.0",
     "@vssue/api-github-v3": "^1.4.7",
     "@vssue/vuepress-plugin-vssue": "^1.4.7",
     "@vuepress/plugin-blog": "1.9.4",