VitPress Plugin for mermaid.js

• 外挂使用说明文档
• 外挂文档模板 开箱即用
• vitepress
• mermaidjs 绘图组件

vitpress 首次编译需要重启。

alias esm 动态编译组件

如需动态编译执行 vue 组件代码,需修改源码

• vitepress 版本 0.21.4 需修改以下路径代码 node_modeules>vitepress>dist>node>serve-3fdbda2c.js

// 第12309行注释，替换为编译
//const vueRuntimePath = "vue/dist/vue.runtime.esm-bundler.js";
const vueRuntimePath = 'vue/dist/vue.esm-bundler.js';

• vitepress 版本 0.13.0 alias配置失效，。 需修改以下路径代码 node_modeules>vitepress>dist>node>serve-3fdbda2c.js

// 第12333行注释，替换为编译
    {
      find: /^vue$/,
    // replacement: require.resolve("vue/dist/vue.runtime.esm-bundler.js")
       replacement: require.resolve("vue/dist/vue.esm-bundler.js")
    }

Installation

You can install it with

# 安装
yarn add -D quick-plugin-md
# npm i -D quick-plugin-md

# 调试测试文档
yarn docs:dev

# 打包测试文档
yarn docs:build

# 打包 组件库
yarn lib
# 打包 语言插件
yarn lang
# 打包 搜索插件
yarn search
# 打包输出全部组件与插件
yarn build

更新

• 0.2.6 2022/1/15

  • quick-svg 独立样式引入

• 0.2.5 2022/1/15

  • quick-svg 0.0.6 更新 init data

• 0.2.4 2022/1/15

  • 修正脑图样式重名
  • quick-svg 0.0.5 修正浏览器兼容性

• 0.2.3 2022/1/15

  • 新增样式解析 less
  • quick-svg新增集成脑图插件

• 0.2.2 2022/1/11

  • rollup 升级 2.63.0
  • quick.lib 升级 0.4.4
  • CodeRun 新增参数 unsee hide

• 0.2.1 2021/12/2

  • quick.lib 升级 0.4.3 解决 base64 编码兼容 c#

• 0.2.0 2021/11/24

  • CodeRun 修正样式加载 bug

• 0.1.9 2021/11/21

  • quick.lib : 0.4.0 升级组件代码压缩 bug

• 0.1.8 [里程碑] 2021/11/17 修正搜索组件 bug

• 0.1.6 2021/11/17

  • 修正搜索源生成的 bug
  • 加入以下插件 "escape-html": "^1.0.3", "diacritics": "^1.3.0", "markdown-it-container": "^2.0.0", "markdown-it-emoji": "^1.4.0", "markdown-it-anchor": "^5.2.7", "markdown-it-table-of-contents": "^0.4.4"

• 0.1.5 2021/11/6

  • 分离 mermaidjs 单独由 config.head 中引用，请参阅文档

• 0.1.5 2021/11/6

  • 分离 mermaidjs 单独由 config.head 中引用，请参阅文档

• 0.1.4 2021/11/6

  • vitepress 升级到 0.20.1

• 0.1.3 2021/11/1

  • quick.lib : 0.3.8
  • mermaid : 8.13.3
  • vitepress 升级到 0.14.1

• 0.1.2 2021/6/2

  • search 新增搜索支持多级路径 children

• 0.1.0 里程碑 2021/4/20

  • Picture 新增图片组件，支持缩放

• 0.0.8
  2021/4/19

  • mermaid 随机 ID 修正 bug

• 0.0.7 2021/4/19

  • language markdown 语言标签外挂更名
  • mermaid 自动标签识别，改为配置 tags

• 0.0.6 2021/4/18

  • 修正 build bug

• 0.0.5

  • 采用异步加载，修正图表显示组件打包 bug

• 0.0.4

  • 修正图表显示组件 bug

vuepress

Then you just need to register the plugin in your .vuepress/config.js:

module.exports = {
  alias: {
    '@': resolve('../../'),
  },
  title: 'Hello VitePress',
  description: 'Just playing around.',
  base,
  themeConfig: {
    docsDir: 'docs',
    logo: 'img/logo.png',
    lastUpdated: 'Last Updated',
    editLinkText: 'Edit this page on Gitee',
    // 编辑连接
    editLink: true,
    nextLinks: true,
    prevLinks: true,
    // 导航栏
    sidebar: true, // 'auto',
    // 层次
    // sidebarDepth: 2,
    // 顶部导航
    nav,
    // 侧边栏
    sidebar,
  },
  markdown: {
    // options for markdown-it-anchor
    //  anchor: { permalink: false },
    // options for markdown-it-toc
    // toc: { includeLevel: [1, 2] },

    config: md => {
      // use more markdown-it plugins! quick-plugin-md/dist/plugin/mermaid.js
       md.use(require('quick-plugin-md/language/'),{
    // 无需标签根据第一行代码自动转为图形组件
    // tags: ['gitGraph', 'classDiagram', 'sequenceDiagram', 'gantt'],
    // /** 默认标签*/
    // default: 'mermaid',
    // // 输出日志
    // log: true,
    // // 自定义markdown标签对应转换的模板组件名
    // template: {
    //   // mermaid 标签转为 组件定义
    //   // mermaid: '<mermaid code="{code}"></mermaid>',
    //   mermaid: '<mermaid>{code}</mermaid>',
    //   pie: '<PieCode>{code}</PieCode>',
    // },
       });
    },
  },
};

Usage

The recommended usage is to place your mermaidjs diagrams inside a fenced code block with the language 'mermaid':

```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop every minute
    John-->Alice: Great!
end
```