添加 mermaid 支持

聊聊如何让 VuePress 显示图表

什么是 mermaid

如果你还不了解，可以先看看我的 Markdown 教程——使用 Markdown 画图。

安装依赖

相关插件有很多，我这里选择的是 vuepress-plugin-mermaidjs (opens new window)：

npm i vuepress-plugin-mermaidjs

配置

在 config.ts 里配置（看 plugins 里的配置）：

module.exports = {
    // ...
    plugins: [
        'vuepress-plugin-mermaidjs'
    ]
    // ...
}

效果

效果当然就是能正常渲染公式块了，参考我的 Markdown 教程：

• 使用 Markdown 画流程图
• 使用 Markdown 画时序图

PS：由于甘特图渲染后字体很小，因此我直接放截图了，没有用该插件

参考

插件官网：https://vuepress-plugin-mermaidjs.efrane.com (opens new window)