在 mdbook 中集成 Mermaid 实现自动化流程图渲染

Wed, 01 Jan 2025 18:00:00 +0800

mermaid 是很强大的一个库，可以使用文本展示图表。mdbook 是一个可以通过 Markdown 格式的文章内容生成在线书籍网站。mdbook-mermaid 这个库将 mermaid 和 mdbook 粘合在了一起。

下面是 mdbook-mermaid 的一个示例，

 graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

该插件使用 Rust 开发，可以通过 Cargo 安装，

cargo install mdbook-mermaid

在首次使用 mdbook-mermaid 时，需要下载一些依赖文件和配置，使用命令：

mdbook-mermaid install path/to/your/book

上面的/path/to/your/book 是你的数据路径，运行之后，将会在你的书籍 book.toml 配置文件中添加如下内容：

[preprocessor.mermaid]
command = "mdbook-mermaid"
[output.html]
additional-js = ["mermaid.min.js", "mermaid-init.js"]

插件将检测是否已配置 mdbbok-mermaid，如果已配置将跳过。否则，将添加上面的内容到 book.toml 配置文件中，并将文件 mermaid.min.js，mermaid-init.js 复制到你书籍的目录中。你可以在 src/bin/assets 目录中找到这些文件。你还可以修改 mermaid-init.js 来配置 mermaid。

最后，重新编译书籍上传即可。

文档工程化 on 豆子技术站

在 mdbook 中集成 Mermaid 实现自动化流程图渲染