在Markdown中使用Mermaid画图

目录

• Mermaid - {:.} 在网页中使用Mermaid - {:.} 在Markdown中使用Mermaid
• 在jekyll中使用mermaid - {:.} 页面模板 - {:.} 在Markdown页面中创建图表定义 - {:.} 例1 - {:.} 例2

Mermaid

Mermaid是一种简单的类似markdown的脚本语言，用于通过javascript从文本生成图表。

在网页中使用Mermaid

阅读教程,用Mermaid生成图表和流程图，学习如何在网页中使用Mermaid

在Markdown中使用Mermaid

您可以使用Jekyll插件Jekyll Merma在本地Jekyll中创建带有标记的图表和流程图。例如，定义一个具有4个节点的流程图，如下所示:

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

然而，GitHub Pages并不正式支持此插件。 如果你把上面的Markdown图定义推到GitHub页面上，它将不起作用. 解决方法是直接在markdown文件中使用html标记。我们可以将图定义封装到＜div＞标记中，而不是使用代码块。以下流程图的定义适用于GitHub页面。

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

在jekyll中使用mermaid

页面模板

在jekyll中使用mermaid，需要在_includes文件夹中创建一个mermaid.html文件，并将以下内容添加到该文件中。

<script type="text/javascript"
  src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js">
</script>
<script>
  $(document).ready(function() {
    mermaid.initialize({
        theme: 'forest'
    });
});
</script>

• 转到这里以搜索最新版本或特定版本。
• 转到这里以检查可用的主题

更新file_inlude/head.html，如果page.mermaid为true，则包括上述模板文件 在_includes/head.html文件中，添加以下代码：

在Markdown页面中创建图表定义

为了在Markdown页面中使用mermaid，它必须有一个可变的mermaid并将其值设置为true。例如，以下示例是一个使用mermaid的Markdown页面

---
layout: post
key: blog
title: "Generating Diagrams with Mermaid in Markdown"
date: 2018-09-15
tags: [Mermaid]
mermaid: true
---

例1

<div class="mermaid">
graph LR
    A --- B
    B-->C[Happy]
    B-->D(Sad);
</div>

例2

<div class="mermaid">
    graph TD
      B[peace]
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
      B-->E(fa:fa-camera-retro perhaps?);
</div>