在GitHub Pages 中使用Mermaid 画图

传统画流程图通常使用 Visio Studio，使用比较复杂，毕竟要安装；本文简单介绍在GitHub Pages 中通过 mermaid 库，来绘制流程图、甘特图的前置步骤。

原理

mermaid解析特定格式，转化为svg，显示到界面上

步骤

简单添加以下内容到你的markdown中，即可生产出如下图的内容：

<script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<script>mermaid.initialize({startOnLoad:true});</script>

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

效果

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

参考链接