mermaid是什么

Mermaid是一个方便、灵活且易于使用的文本驱动图形生成工具，适用于各种场景，包括技术文档、报告、演示和博客等。它使得图形的创建和编辑变得简单，并提供了丰富的图形类型和可扩展性，满足了图形化表达的需求。

Mermaid的主要特点包括：

  1. 简单易用：Mermaid使用简单的文本语法来描述图形结构，使得图形的创建和编辑变得非常直观和易于理解。通过一些简单的语法规则，您可以定义节点、连接、样式和其他属性。

  2. 多种图形类型：Mermaid支持多种图形类型，包括流程图、序列图、类图、甘特图等。不同的图形类型具有不同的语法和语义，可以满足不同类型的图形需求。

  3. 跨平台：Mermaid可以在多个平台上运行，包括Web浏览器、Node.js环境和一些文本编辑器插件。这使得您可以在不同的环境中使用Mermaid来创建和展示图形。

  4. 嵌入性：Mermaid图形可以嵌入到HTML页面、Markdown文档和其他文本文件中。它使用简单的HTML标签或特殊的Markdown语法，可以轻松地将图形嵌入到各种文档中。

  5. 可扩展性：Mermaid提供了一些插件和扩展，可以增加更多的功能和样式。您可以使用这些扩展来定制和美化您的图形，以满足特定的需求。

实战

第一步配置模版

添加以下内容到layouts/shortcodes/mermaid.html文件

<div class="mermaid">
  {{.Inner}}
</div>

第二步MermaidJS脚本

<script async src="https://unpkg.com/mermaid@8.2.3/dist/mermaid.min.js"></script>

最后案例测试

使用mermaid语法画流程图

使用mermaid shortcode语法如下： 

{{<mermaid>}}
  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
{{</mermaid>}}

最终效果如下图所示:

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

参考链接