Mermaid 赋能 VuePress：轻松绘制流程图、时序图，让博客内容更生动

聊聊如何让博客框架 VuePress 显示图表

‍

什么是 mermaid

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

‍

‍

‍

‍

安装依赖

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

‍

npm i vuepress-plugin-mermaidjs

‍

‍

‍

配置

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

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

‍

‍

效果

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

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

‍

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

‍

‍

‍

参考

插件官网：https://vuepress-plugin-mermaidjs.efrane.com