npm 包 mermaid 使用教程

什么是 mermaid？

mermaid 是一个用于绘制图表和流程图的 JavaScript 库，可以帮助开发者快速绘制出各种图表，比如流程图、时序图、甘特图等。mermaid 不依赖任何其他库，只需要在网页中引用 mermaid.min.js 文件即可。

如何安装 mermaid

可以通过 npm 安装 mermaid，命令如下：

npm install mermaid

如何使用 mermaid

1. 在 HTML 文件中引入 mermaid.min.js 文件

<script src="./node_modules/mermaid/dist/mermaid.min.js"></script>

1. 在代码中定义要绘制的图表

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

在上面的例子中，我们定义了一个简单的流程图，A 向 B 和 C 连接，B 和 C 再分别向 D 连接。这个图表可以通过 graph TD; 来表示，其中 TD 表示 top-down 布局，也就是从上往下绘制。

1. 在代码中渲染图表

mermaid.initialize({
    startOnLoad: true
});

startOnLoad 表示页面加载完成后是否自动渲染 mermaid 图表，若为 true，则会在页面加载完成后自动渲染。

mermaid 支持的图表类型

• flowchart（流程图）
• sequenceDiagram（时序图）
• gantt（甘特图）
• classDiagram（类图）
• stateDiagram（状态图）

其中，流程图和时序图是 mermaid 中最常用的两种图表类型，下面分别介绍这两种类型的用法。

绘制流程图

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

上面的代码定义了一个流程图，A 向 B 和 C 连接，而 B 和 C 再向 D 连接。其中，LR 表示从左往右布局，也就是从左边开始绘制，可以改为 TB 表示从上到下布局或者 RL 表示从右往左布局。

绘制时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>+Bob: Hello Bob, how are you?
    Bob-->>-Alice: Hi Alice, all good. You?

上面的代码定义了一个简单的时序图，Alice 发送消息给 Bob，Bob 回复 Alice。其中，participant 表示参与者，->> 表示发送消息，-->>- 表示接收消息。

总结

本文介绍了如何安装和使用 mermaid，以及 mermaid 支持的各种图表类型。希望本文对前端开发人员们有所帮助，让你们能够更加轻松地绘制出各种图表。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32317