Mermaid

概述

  • 怎么使用Mermaid?

    • 使用特定的Mermaid渲染器;
    • 使用集成了Mermaid渲染功能的Markdown编辑器,如Typora使用时,需要将代码块的语言选择为Mermaid。

    Typora是宇宙第一笔记软件,不接受反驳

  • Mermaid能绘制哪些图?

    • 饼状图:使用pie关键字,具体用法后文将详细介绍
    • 流程图:使用graph关键字,具体用法后文将详细介绍
    • 序列图:使用sequenceDiagram关键字
    • 甘特图:使用gantt关键字
    • 类图:使用classDiagram关键字
    • 状态图:使用stateDiagram关键字
    • 用户旅程图:使用journey关键字
  • 实例:朱元璋家谱简图,圆圈代表皇帝

长子
长子
次子
次子
三子
四子
长子
朱八八
朱五四
朱四九
朱百六
朱雄英
朱标
朱允炆
朱樉
朱棡
朱棣
朱高炽

以上是概述,下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址,自行学习。(记得挂梯子)

饼状图

  • 在线渲染器:Online FlowChart & Diagrams Editor(需要梯子)

  • 语法

    • pie关键字开始图表
    • 然后使用title关键字及其在字符串中的值,为饼图赋予标题。(这是可选的
    • 数据部分
      • " "内写上分区名。
      • 分区名后使用:作为分隔符
      • 分隔符后写上数值,最多支持2位小数——数据会以百分比的形式展示
  • 实例
93%4%3%为什么总是宅在家里?天气太热或太冷喜欢宅

流程图

实例

Yes
No
Start
Is it?
OK
Rethink
End

方向

用于开头,声明流程图的方向。

  • graphgraph TBgraph TD:从上往下
  • graph BT:从下往上
  • graph LR:从左往右
  • graph RL:从右往左

结点

  • 无名字的结点:直接写内容,此时结点边框为方形;节点内容不能有空格
  • 有名字的结点:节点名后书写内容,内容左右有特定符号,结点边框由符号决定;节点内容可以有空格

下面的实例中,没有为graph指定方向,因此默认是从上往下的。但是由于各个结点之前没有箭头,所以他们都处于同一排。

默认方形
方形
圆边矩形
体育场形
子程序形
圆柱形
圆形
菱形
六角形
平行四边形
反向平行四边形
梯形
反向梯形

连线样式

  • 实线箭头:分为无文本箭头和有文本箭头,有文本箭头有2种书写格式
文本1
文本2
a
b
c
d
  • 粗实线箭头:分为无文本箭头和有文本箭头
文本
a
b
c
  • 虚线箭头:分为无文本箭头和有文本箭头
文本
a
b
c
  • 无箭头线:即以上三种连线去掉箭头后的形式
文本1
文本2
文本3
文本
a
b
c
d
e
f
g
h
  • 其他连线:需要将graph关键字改为flowchart,除了新增加的连线形式外,上面三种线的渲染效果也会不同
文本
A
B
C
D
旧连线
也会不同
  • 延长连线:增加相应字符即可,如下图中的B到E,连线中增加了一个-。字符可多次添加。
Yes
No
Start
Is it?
OK
Rethink
End

连线形式

  • 直链
text
text2
A
B
C
  • 多重链:可以使用&字符,或单个描述
a
b
c
d
A
B
C
D
X
M
N
Y

其他

  • 子图:需要将graph关键字改为flowchart,在代码段的开始加入subgraph,尾部加入end
three
one
c2
c1
two
b2
b1
a2
a1
  • 注释:在行首加入%%即可。
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two
posted @   底层逻辑  阅读(1026)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示