用mermaid生成想要的逻辑导图,非常不错的插件,typora我开始放弃了,毕竟人家收费了

mermaid是一种非常不错的逻辑导图、流程图编写工具,是一个开源的哦。并且提供了js插件,引入就ok了,下面是demo演示。

警告:别用IE弄它~!


官网API地址:

https://mermaid-js.github.io/mermaid/#/usage


引入文件(可以下载到自己项目,也可用cdn):

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


初始化执行:

<script>mermaid.initialize({startOnLoad:true});</script>


在编写的div里面新增class=“mermaid”

<div class="mermaid">
     graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</div>


效果:

1638156601(1).png


完整demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>


语法说明:

https://mermaid-js.github.io/mermaid/#/flowchart?id=graph

评论/留言