【笔记】Mermaid学习笔记

发表于 阅读次数：

前言

Mermaid is an open-source JavaScript-based diagramming and charting software that generates diagrams from text-based descriptions.（维基百科）

在Markdown中使用Mermaid

流程图

```mermaid
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map
```

graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

自定义样式

1
2
3
4
5
6
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  style Collection fill:#f0f8ff,stroke:#696969;
1
2
3
4
5
6
7
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  classDef important fill:#f0f8ff,stroke:#696969;
  class List,Set,Map important;

超链接

1
2
3
4
5
6
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  click Collection href "https://example.com/" "提示";

在HTML中使用Mermaid

  • Mermaid会自动渲染class="mermaid"的元素
1
2
3
4
5
6
7
8
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>

<div class="mermaid">
  graph TD
    Collection --> List
    Collection --> Set
    Collection --> Map
</div>

手动渲染元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>

<div id="app">
  graph TD
    Collection --> List
    Collection --> Set
    Collection --> Map
</div>

<script>
  mermaid.initialize({ startOnLoad: false });
  mermaid.run({
    nodes: [document.getElementById("app")],
  }).then(function () {
    console.log();
  }).catch(function (err) {
    console.log(err);
  });
</script>

完成

参考文献

Mermaid官方文档