Mermaid 学习
基础
在 VS code
中安装插件 Markdown Preview Mermaid Support
,则便可支持 Mermaid
流程图
flowchart
A-->B;
A-->C;
B-->D;
C-->D;
时序图
sequence diagram
participant Alice
participant Bob
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: Jolly good!
甘特图
gantt diagram
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
future task : des3, after des2, 5d
future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and json :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to ,mermaid :1d
Graph
graph LR
A --> B
这是申明一个由左到右,水平向右的图。
A -->B
可能方向有:
TB
- top bottomBT
- bottom topRL
- right leftLR
- left rightTD
- same as TB
节点与形状
默认节点
graph LR
id1
- [x] 注意:
id
显示在节点内部。
id1
文本节点
graph LR
id[This is the text in the box];
展示如下:
id[This is the text in the box];
圆角节点
graph LR
id(This is the text in the box);
即:
id(This is the text in the box);
圆节点(The form of a circle)
graph LR
id((This is the text in the circle));
id((This is the text in the circle));
非对称节点(asymetric shape)
graph LR
id>This is the text in the box]
id>This is the text in the box]
菱形节点(rhombus)
graph LR
id{This is the text in the box}
id{This is the text in the box}
连接线
节点间的连接线有多种形状,而且可以在连接线中加入标签:
箭头形连接
graph LR;
A-->B;
A-->B;
开放行连接
graph LR
A --- B
A --- B
标签连接
graph LR
A -- This is the label text --- B;
A -- This is the label text --- B;
箭头标签连接
A–>|text|B
或者 A– text –>B
A-- text -->B
虚线(dotted link,点连线)
-.->
和 -.-
A-.->B
A-.-B
标签虚线
graph LR
A-.text.->B
A-.text.->B
粗实线
==>
A==>B
标签粗线
=\=text\==>
和 =\=text\===
A==text==>B
A==text===B
特殊的语法
使用引号可以抑制一些特殊的字符的使用,可以避免一些不必要的麻烦。
graph LR
d1["This is the (text) in the box"]
d1["This is the (text) in the box"]
html 字符的转义字符
转义字符的使用语法
流程图定义如下:
graph LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
子图(Subgraphs)
subgraph title
graph definition
end
示例:
graph TB
subgraph one
a1 --> a2
end
subgraph two
b2 --> b2
end
subgraph three
c1 --> c2
end
c1 --> a2
subgraph one
a1 --> a2
end
subgraph two
b2 --> b2
end
subgraph three
c1 --> c2
end
c1 --> a2
基础 fontawesome 支持
想加入来自frontawesome的图表字体,详情请点击:fontawdsome
引用的语法为:++fa:#icon class name#++
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camerra-retro perhaps?);
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camerra-retro perhaps?);
更多参考:mermaid docs
图表(graph)
定义连接线的样式
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
备注:上面的样式参考 CSS 样式。
样式类
为了方便样式的使用,可以定义类来使用样式
类的定义示例:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
对节点使用样式类:
class nodeId className;
同时对多个节点使用相同的样式类:
class nodeId1,nodeId2 className;
可以在CSS中提前定义样式类,应用在图表的定义中。
graph LR
A-->B[AAABBB];
B-->D;
class A cssClass;
默认样式类:
当没有指定样式的时候,默认采用。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
示例:
graph LR
classDef default fill:#f90,stroke:#555,stroke-width:4px;
id1(Start)-->id2(Stop)
classDef default fill:#f90,stroke:#555,stroke-width:4px;
id1(Start)-->id2(Stop)
序列图(sequence diagram)
示例:
Alice->John: Hello John, how are you ?
John-->Alice:Great!
Alice->>John: dont borther me !
John-->>Alice:Great!
Alice-xJohn: wait!
John--xAlice: Ok!
sequenceDiagram
Alice->John: Hello John, how are you ?
John-->Alice:Great!
Alice->>John: dont borther me !
John-->>Alice:Great!
Alice-xJohn: wait!
John--xAlice: Ok!
如果想让 John 出现在前面,mermaid 通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改:
sequenceDiagram
participant John
participant Alice
Alice-xJohn:Hello John,how are you?
John-->>Alice:Great!
participant John
participant Alice
Alice-xJohn:Hello John,how are you?
John-->>Alice:Great!
箭头的六种样式:
->
–>
->>
–>>
-x
–x
便签
给序列图增加便签:
具体规则:
[right of | left of | over][Actor]:Text
示例:
sequenceDiagram
participant John
Note left of John: Text in note
participant John
Note left of John: Text in note
跨越两个 Actor 的便签:
sequenceDiagram
Alice->John:Hello John, how are you?
Note over Alice,John:A typical interaction
Alice->John:Hello John, how are you?
Note over Alice,John:A typical interaction
循环 Loops
在序列图中,也可以使用循环,具体规则如下:
loop Loop text
... statements...
end
示例:
sequenceDiagram
Alice->>John: Hello!
loop Reply every minute
John->>Alice:Great!
end
Alice->>John: Hello!
loop Reply every minute
John->>Alice:Great!
end
选择 ALT
在序列图中选择的表达。规则如下:
alt Describing text
...statements...
else
...statements...
end
或者使用 opt
(推荐在没有 else
的情况下使用)
opt Describing text
...statements...
end
示例:
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice:not so good :(
else is well
Bob->>Alice:Feeling fresh like a daisy:)
end
opt Extra response
Bob->>Alice:Thanks for asking
end
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice:not so good :(
else is well
Bob->>Alice:Feeling fresh like a daisy:)
end
opt Extra response
Bob->>Alice:Thanks for asking
end
甘特图(gantt)
甘特图是一类条形图,由 Karol Adamiechi 在 1896 年提出, 而在 1910 年 Henry Gantt 也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。
示例:
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
更加丰富的:
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
header 1 | header 2 |
---|---|
title |
标题 |
dateFormat |
日期格式 |
section |
模块 |
Completed |
已经完成 |
Active |
当前正在进行 |
Future |
后续待处理 |
crit |
关键阶段 |
日期缺失 |
默认从上一项完成后 |
关于日期的格式可以参考:
范例
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
di{Diamond with line break} -.-> ro(Rounded)
di==>ro2(Rounded square shape)
end
e --> od3>Really long text with linebreak<br>in an Odd shape]
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
di{Diamond with line break} -.-> ro(Rounded)
di==>ro2(Rounded square shape)
end
e --> od3>Really long text with linebreak<br>in an Odd shape]
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
一个小 Bug
在 Markdown 模式下
```mermaid
graph TB
id[a]
```
与 LaTex 公式不能实现混编, 否则, 公式将不能正确显示.
若要与 LaTex 实现混编, 只需要将其改为下面的形式即可
<div class="mermaid">graph LR;
id[a]
</div>
Mermaid 学习的更多相关文章
- Markdown画图(mermaid)学习
简介 目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram mermaid(美人鱼), 是一个类似markdown,用文本语 ...
- 基于 Cmd MarkDown 的 markdown 语法学习
首先我要打一个属于干货的广告:CmdMarkDown 是非常好用的markdown编辑器软件,支持全平台,由作业部落出品,分为客户端与WEB端两种使用场景. 本篇博客学习的markdown语法都是基于 ...
- <老友记>学习笔记
这是六个人的故事,从不服输而又有强烈控制欲的monica,未经世事的千金大小姐rachel,正直又专情的ross,幽默风趣的chandle,古怪迷人的phoebe,花心天真的joey——六个好友之间的 ...
- Markdown中使用mermaid画流程图
Markown语法简单,用来写文档是个不错的选择. 但是Markdown 语法并不直接支持画图,当然方法还是有的. 本人用的Markdown编辑器为vscode,在里面直接安装merdaid插件即可使 ...
- ------------------java collection 集合学习 ----小白学习笔记,,有错,请指出谢谢
<!doctype html>java对象集合学习记录 figure:first-child { margin-top: -20px; } #write ol, #write ul { p ...
- makedown学习笔记(以后可能会用makedown写博客)
学习手册 https://www.zybuluo.com/mdeditor?url=https%3A%2F%2Fwww.zybuluo.com%2Fstatic%2Feditor%2Fmd-help. ...
- Python学习day45-数据库(总结)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Python学习day44-数据库(单表及多表查询)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Python学习day43-数据库(多表关系)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
随机推荐
- 使用JavaScript 修改浏览器 URL 地址栏
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...
- Eclipse配置C++环境
由于实在不想用(界面太丑,超级强迫症),前段时间JAVA一直用eclipse,感觉这个IDE非常友好,看上去很舒服,下载的时候发现有C++版本,于是折腾了一会儿,谷歌上发现好多教程,但是大部分比较老, ...
- 未来人类T5 安装win10,ubuntu双系统
1.首先确保win10已经安装,u盘中已刻录好系统,下载好英伟达最新驱动保存在u盘中,压缩100g的磁盘空间给ubuntu. 2.设置双显卡模式,重启时按F7选择进入u盘启动. 3.进入安装界面,选择 ...
- meterpreter使用
1.基本命令 background:将meterpreter终端隐藏在后台 sessions:查看已经成功获取的会话,想继续与某会话进行交互使用sessions –i quit:直接关闭当前meter ...
- 2016.08.02 math(leetcode) 小结
math(leetcode) 小结 在leetcode中有些知识点(套路) 判断一个数是不是能被某些数整除,可以用 n%x == 0,循环除的话,就将while(n%x == 0)的循环条件设置判断整 ...
- 2016.5.21——atoi()函数的测试
对函数atoi()函数的测试: atoi()函数将字符串型转换为整型 代码: #include "stdafx.h" #include "iostream" # ...
- linux音频alsa-uda134x驱动分析之二(时钟)
Audio Clocking音频时钟============== This text describes the audio clocking terms in ASoC and digital au ...
- linux下C获取系统时间的方法
asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime,localtime 表头文件 #include 定义函数 char * asctime(const ...
- C# 读取指定文件夹下所有文件
#region 读取文件 //返回指定目录中的文件的名称(绝对路径) string[] files = System.IO.Directory.GetFiles(@"D:\Test" ...
- Django Rest Framework----ModelViewSet视图 ModelViewSet源码分析
一.视图类 #bookview是一个视图类,继承自ModelViewSet class BookView(ModelViewSet): throttle_classes = [VisitThrottl ...