离线使用Mermaid画图

需求初次接触Mermaid还是在写博客。当我发现竟然可以只靠标记出连接关系就能自动画出流程图时，我是惊喜的。这对于我这种喜欢画图的人来说帮助很大，它生成图片快速，且易于更改。但是慢慢，我膨胀出了新的需求：有时候生成图片和博客无关，我不想每次生成图片时都来这里，这样比较麻烦。对此，可以使用 Mermaid Live Editor ，但是这个外国网页会有时打开很慢。此外，我会有无法接入互联网的时候。因

YakSue

4939人浏览 · 2020-12-08 22:38:39

YakSue · 2020-12-08 22:38:39 发布

需求

初次接触Mermaid还是在写博客。当我发现竟然可以只靠标记出连接关系就能自动画出流程图时，我是惊喜的。这对于我这种喜欢画图的人来说帮助很大，它生成图片快速，且易于更改。

但是慢慢，我膨胀出了新的需求：

我不是只有在写博客时才需要它，所以我不想每次生成图片时都来这里，这样比较麻烦。对此，可以使用 Mermaid Live Editor ，但是这个外国网页会有时打开很慢。
此外，我会有无法接入互联网的时候。因此我想离线也能使用Mermaid画图

本篇的目标，就是解决这些需求。

官方文档中的4种相对简单的用法

官方文档：A basic mermaid User-Guide for Beginners：

Creating diagrams and charts using mermaid code is simple. The code is turned into a diagram in the web page with the use of a mermaid renderer.
The mermaid renderer is a piece of javascript that parses mermaid definitions, when called. This then renders a diagram based on that code in SVG, alternatively it Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.

使用mermaid代码来创建图表很简单。代码是被web页面使用“mermaid渲染器”转变为图表的。而“mermaid渲染器”就是一片Javascript代码，它负责解析mermaid的定义，当调用时就会将mermaid代码渲染成SVG格式的图表。它在大部分浏览器中都是可用的，例如Firefox，Chrome和Safari。不过IE不可用。

对于初学者来说，有4种相对简单的方式来使用mermaid：
在这里插入图片描述

1.

使用 Mermaid Live Editor 。关于此在线编辑器，可以在Overview看到一些教程。不过正如开头讨论，不满足我的离线需求。

2.

Thanks to the growing popularity of mermaid, many plugins already allow the generation of mermaid diagrams from within popular applications.

多亏了mermaid越来越流行，很多流行的应用都已经有插件支持生成mermaid图表。这里有一份支持的列表。

看起来是和具体应用相关的，但看起来使用不够简单。

3.

(3.) 是最简单的，只需要添加一个绝对路径的脚本：

<body>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>

例如，test.html内容如下：

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>

    Here is one mermaid diagram:
    <div class="mermaid">
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server1]
      B --> D[Server2]
    </div>

    And here is another:
    <div class="mermaid">
      graph TD
      A[Client] -->|tcp_123| B(Load Balancer)
      B -->|tcp_456| C[Server1]
      B -->|tcp_456| D[Server2]
    </div>
  </body>
</html>

我使用Chrome浏览器打开后可见：
在这里插入图片描述
不过可以看到，他还是引用了https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js，而它在这个名为jsdelivr的CDN（Content Delivery Network）中。即也需要联网。

4.

(4.) 与 (3.) 类似，只不过是将mermaid.min.js这个文件下载下来。
但我这里较为疑惑的是，官方文档中为了下载这个文件耗费了不少步骤：
在这里插入图片描述
我在想是不是直接从链接中下载这个文件就可以了，而不需要上面这么多步骤，实验发现是可行的。

实践：离线使用Mermaid画图

1. 下载 mermaid.min.js

从https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js下载。

放置到一个本地位置，比如我这里的 “D:/dev/mermaid.min.js”

2. 开始编辑

随后，只用将上一部分的 (3.) 中链接变为本地即可：

<html>
  <body>
    <script src="D:/dev/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>

    Here is one mermaid diagram:
    <div class="mermaid">
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server1]
      B --> D[Server2]
    </div>

    And here is another:
    <div class="mermaid">
      graph TD
      A[Client] -->|tcp_123| B(Load Balancer)
      B -->|tcp_456| C[Server1]
      B -->|tcp_456| D[Server2]
    </div>
  </body>
</html>

在这里插入图片描述

脱离脚本的依赖

当在浏览器中打开mermaid流程图的网页，再另存为时，就会发现代码已经不再是mermaid代码了，而是转换后的格式了：
在这里插入图片描述
此时就算去掉其中的脚本链接 <script src="./test3_files/mermaid.min.js.下载"></script>，网页中的图形还是会正常显示，即脱离了脚本的依赖。