Mermaid-基础图的绘制
前言
今天在B站给我推荐了一个绘制流程图的视频,其中提到了开源项目terrastruct,本来想尝试来着,结果评论区居然一直在推荐使用mermaid与xmind(哭笑)。我记得Typora是支持mermaid的,只是我一直没有绘图需求来着,看评论区说语法简单,想着以后写文章如果用到,那就可以直接使用mermaid绘制一些图像,省掉了上传图像的麻烦,于是就有了学习mermaid绘图的想法。
看了下官方文档,感觉自己常用到的基本就只有三种图:流程图、饼图、时间轴。
FlowChart(流程图)
关键字:flowchart
图的方向
- TB - top to buttom
- TD - top-down
- BT - buttom to top
- RL - right to left
- LR - left to right
例子1 TB:
1 | flowchart TB |
flowchart TB a --> b & c --> d
例子2 LR:
1 | flowchart LR |
flowchart LR a --> b & c --> d
图的样式
- round edges -
()
- shaped node(胶囊) -
([])
- subroutine shape -
[[]]
- cyclinderical shape(圆柱) -
[()]
- cicle -
(())
- asymmetric shape(旗帜) -
>]
- rhombus(菱形) -
{}
- hexagon(六边形) -
{{}}
- parallelogram(平行四边形) -
[//]
[\\]
- traoezoid(梯形) -
[/\]
[\/]
- double circle -
((()))
例子:
1 | flowchart TB |
flowchart TB A([one]) --> B & c[(three)] --> d[/hello/]
连线样式
- arrow head -
-->
- open link -
---
- text on links -
--This is a text!--
---|This is the text|
- dotted links -
-.->
- thick link -
==>
- invisible link -
~~~
- new arrow types -
--o
--x
- multi directional arrows(双向箭头) -
o--o
<-->
x--x
- 延长方式 -
---->
例子:
1 | flowchart TB |
flowchart TB a[start] --> b{Is it?} b -->|Yes| c[OK] c --> d[Rethink] --> b b ---->|No| e[End]
特殊符号显示
用引号包含住内容,一般可以表示括号内容,如果有更加复杂的需求,可以使用:# ;
例子:
1 | flowchart LR |
flowchart LR a["This is a text(#3556;)"] --> b["A dec char:#9829;"]
多图(Subgraphs)
语法
1 | subgraph title |
例子:
1 | flowchart TB |
flowchart TB subgraph one a1 --> a2 end subgraph two b1 --> b2 end subgraph three c1 --> c2 end c1 --> a2
多图的情况下可以使用图到图的连接,也可以实现图外连接:
1 | flowchart TB |
flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end q["你干嘛"] --> one one --> two & e["哎呦"] three --> two two --> c2
也可以用direction
来规定子图的方向
1 | flowchart LR |
flowchart LR subgraph TOP direction TB subgraph B1 direction RL i1 -->f1 end subgraph B2 direction BT i2 -->f2 end end A --> TOP --> B B1 --> B2
互动
可以将单击事件绑定到节点,单击可能导致 javascript 回调或将在新的浏览器选项卡中打开的链接。其实就是实现类似按钮的功能,其中回调功能不做概述。
语法:
1 | click 对象 “网址” “注释” |
例子:
1 | flowchart LR |
flowchart LR A-->B B-->C C-->D click A callback "Tooltip for a callback" click B "https://www.gcnanmu3125.xyz" "我的博客地址"
对fontawesome的基本支持
可以从字体添加图标。这些图标可通过语法 fa:icon
类名访问。
1 | flowchart TD |
flowchart TD B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?)
Pie(饼图)
关键字:pie
属性:
- title
- 元素
- 元素值(如果不是比例,会根据数量直接生成比例)
简单的例子:
1 | pie title Pets adopted by volunteers |
pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15
如果想显示数据,可以通过showdata
关键字在图例显示具体值
1 | pie showData |
pie showData title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 6
Timeline(时间轴)
关键字: timeline
基本写法为:
1 | timeline |
简单演示:
发现Typora只支持到mermaid 9.1.2,所以无法绘制时间轴,因此不展示后续。
1 | timeline |
timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter
动手实践
流程图:https://blog.csdn.net/cc920095705/article/details/113769741
1 | flowchart TD |
flowchart TD a[Start] --- b[Your Operation] b --- c{Yes or No?} ---|Yes| d([End]) a ---|No| c
饼图
数据来源:国家统计局:2022年居民收入和消费支出情况-新华网 (xinhuanet.com)
1 | pie showdata |
pie showdata title 2022年居民人均消费基础及构成(单位:元) "其他用品及服务" : 595 "食品烟酒" : 7481 "衣着" : 1365 "居住" : 5882 "生活用品及服务" : 1432 "交通通信" : 3195 "教育文化娱乐" : 2469 "医疗保健" : 2120
学习下来感觉使用起来还是很方便的,语法也非常简单,适合简单作图与思路分析的场合,但是大多数软件及网站无法及时跟进Mermaid的更新速度,不像LaTex公式
一样随处可用,这一点也制约着它的发展。