Mermaid介绍
Mermaid允许您使用文本和代码创建图表和可视化效果。
它是一个基于Javascript的图表和图表工具，可以由Markdown驱动，以动态创建和修改的方式呈现图表
> 如果你熟悉Markdown，你应该没有问题学习meimaid的语法。
Mermaid的主要目的是帮助实现可视化文档，并帮助开发。
Halo博客支持mermaid
halo官方明确注明，halo是支持mermaid的
主题是不一定支持的，如果不支持，请看下面
首先，登陆到后台，进入 系统 -> 博客设置 -> 其他设置。将下面的代码复制到 自定义内容页面 head。
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.4/dist/mermaid.min.js"></script>
官方文档
https://mermaidjs.github.io/#/
https://mermaid-js.github.io/mermaid/#/./usage
https://mermaid-js.github.io/mermaid/#/./Tutorials
官方文档是英文的，接下来，我将使用我有限的英语翻译能力，并借助百度翻译等来完成官方文档的部分翻译。本文可能会长期更新，感谢支持！
在html单页内引用mermaid.js
- 首先创建mermaid.html
- 创建div块，然后类名设为mermaid,引入javascript，初始化
<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>
- 官方示例：
<!DOCTYPE html>
<html lang="en">
<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>
- 效果
初次使用mermaid
在markdown编辑器中，我们要输入
显示一个节点
在以上的内容中填入即可
flowchart LR
id
来显示一个节点，如下，当然，我们可以随意更改id这个内容
图表
流程图
参考
方向
TB:从上到下
使用：
内容中填入
大家可以自由尝试，比如下面
BT：从下到上
LR： 从左到右
RL: 从右到左
形状
参考
本图来自
[关于写作那些事之快速上手Mermaid流程图 - 简书 (jianshu.com)](https://www.jianshu.com/p/cd1f267784e7#:~:text=mermaid-flow-chart-layout-simplemindmap.png 流程图布局方向%2C由四种基本方向组成%2C分别是英文单词%3A top (上)%2C bottom (下)%2C left (左)和,TB (从上到下)%2C BT (从下到上)%2C LR (从左往右)和 RL (从右往左)四种.)
官方参考文档：Flowchart (mermaid-js.github.io)
圆角矩形
矩形
圆柱形
平行四边形
梯形
圆形
体育场
菱形
六边形
组合使用
连接线
官方参考
Flowchart (mermaid-js.github.io)
双竖线表描述文字
子图
参考：
Flowchart (mermaid-js.github.io)
交互
参考
Flowchart (mermaid-js.github.io)
样式
Flowchart (mermaid-js.github.io)
对fontawesome的支持：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
记住要在网页内引用fontawesome才可以使用
如下
评论区