安装mermaid

### 如何安装和配置 Mermaid Mermaid 是一个支持 Markdown 的流行 JavaScript 图表库，可以用于绘制流程图、甘特图、序列图等。以下是详细的安装和配置指南： #### 1. 安装 Mermaid Mermaid 的安装可以通过 npm 进行，适用于多种环境。以下是具体的安装步骤： - 在 Hexo 环境中安装 Mermaid 插件： ```bash npm install hexo-filter-mermaid-diagrams --save ``` 此命令会将 `hexo-filter-mermaid-diagrams` 插件安装到 Hexo 项目中，并保存到 `package.json` 文件中[^1]。 - 在 VitePress 环境中安装 Mermaid 插件： ```bash npm install vitepress-plugin-mermaid --save ``` 此命令会将 `vitepress-plugin-mermaid` 插件安装到 VitePress 项目中[^3]。 #### 2. 配置 Mermaid 根据不同的环境，Mermaid 的配置方式略有不同。 - **Hexo 配置**： 在 Hexo 根目录下的 `_config.yml` 文件中添加以下内容： ```yaml mermaid: enable: true # 默认为 false version: "latest" # 默认为 v7.1.2 options: startOnload: true # 默认为 true ``` 同时，在 Matery 主题目录的 `layout/_partial/` 下的 `footer.ejs` 文件末尾添加以下内容： ```ejs <% if (theme.mermaid.enable) { %> <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script> <script> if (window.mermaid) { mermaid.initialize({theme: 'forest'}); } </script> <% } %> ``` 上述代码启用了 Mermaid 并设置了主题为 `forest`[^1]。 - **VitePress 配置**： 在 VitePress 项目的 `vite.config.js` 文件中添加以下内容： ```javascript import { defineConfig } from 'vitepress' import mermaidPlugin from 'vitepress-plugin-mermaid' export default defineConfig({ plugins: [ mermaidPlugin() ] }) ``` 此配置将 Mermaid 插件集成到 VitePress 中。 #### 3. 使用 Mermaid 绘制图表 在 Markdown 文件中，使用 Mermaid 的语法定义图表。例如，绘制一个简单的流程图： ```markdown ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` ``` #### 4. 其他工具支持 - 如果需要在 draw.io 中使用 Mermaid 插件，可以参考项目地址：[https://gitcode.com/gh_mirrors/dr/drawio_mermaid_plugin](https://gitcode.com/gh_mirrors/dr/drawio_mermaid_plugin)[^2]。 - 在线编辑器推荐：[https://mermaid-js.github.io/mermaid-live-editor/](https://mermaid-js.github.io/mermaid-live-editor/)，可以直接在线测试和生成 Mermaid 图表。 ### 注意事项 确保系统已安装 Node.js 和 npm。可以通过以下命令检查版本： ```bash node -v npm -v ``` ---