侧边栏壁纸
博主头像
MeowRain博主等级

  大家好,我是MeowRain,中文可读作喵雨,至于为什么起这个名字,其实是因为英文里的rain和我的名字有谐音字,哈哈😄,再一个就是我比较喜欢猫咪,也养着一只小猫咪(叫小喵,目前是我姐姐代养,自己太忙了顾不上照顾小猫咪)所以就叫MeowRain啦。

  • 累计撰写 179 篇文章
  • 累计创建 53 个标签
  • 累计收到 8 条评论

mermaid markdown--(用图表完美化你的文档)

MeowRain
2022-02-06 / 0 评论 / 0 点赞 / 237 阅读 / 2,212 字
温馨提示:
本文最后更新于 2022-02-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Mermaid介绍

Mermaid允许您使用文本和代码创建图表和可视化效果‎。
它是一个基于Javascript的图表和图表工具,可以由Markdown驱动,以动态创建和修改的方式呈现图表‎

‎> 如果你熟悉Markdown,你应该没有问题学习‎‎meimaid的语法‎‎。‎

‎Mermaid的主要目的是帮助实现可视化文档,并帮助开发。‎

image.png

Halo博客支持mermaid

halo官方明确注明,halo是支持mermaid的
image.png
主题是不一定支持的,如果不支持,请看下面

首先,登陆到后台,进入 系统 -> 博客设置 -> 其他设置。将下面的代码复制到 自定义内容页面 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
    image.png
  • 创建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>
  • 效果
    image.png

其余请参考
https://mermaid-js.github.io/mermaid/#/./usage

初次使用mermaid

在markdown编辑器中,我们要输入
image.png

显示一个节点

在以上的内容中填入即可

flowchart LR
   id

来显示一个节点,如下,当然,我们可以随意更改id这个内容
image.png

图表

流程图

参考
image.png

方向

TB:从上到下

使用:
内容中填入
image.png

大家可以自由尝试,比如下面
image.png

BT:从下到上

image-20220206130532383

LR: 从左到右

image-20220206130636788

RL: 从右到左

image-20220206130758306

形状

参考

本图来自

[关于写作那些事之快速上手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 (从右往左)四种.)

image-20220206132255399

官方参考文档:Flowchart (mermaid-js.github.io)

圆角矩形

image-20220206131330466

矩形

image-20220206131408132

圆柱形

image-20220206131504775

平行四边形

image-20220206131645871

梯形

image-20220206131733366

image-20220206131754167

圆形

image-20220206131845208

体育场

image-20220206131917016

菱形

image-20220206131952335

六边形

image-20220206132016315

组合使用

image-20220206134604933

连接线

官方参考

Flowchart (mermaid-js.github.io)

双竖线表描述文字

image-20220206133734566

image-20220206133623188

子图

参考:

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才可以使用

如下

image-20220206135801732

image-20220206135815174

0

评论区