Markdown画图(mermaid)学习
简介
目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram
mermaid(美人鱼), 是一个类似markdown,用文本语法来描述文档图形的工具。mermaid语法包含在博客园markdown中。
注释为:
%% 注释
插入为:(以下的例如只列举代码)
```mermaid
代码
```
或
<body>
<div class="mermaid">
代码
</div>
</body>
graph(流程图)
关键字graph表示一个流程图的开始,同时需要指定该图的方向。如果内容包含特殊字符,可使用"字符"
,或参考这个的markdown转义。
方向
代码 | 方向 |
---|---|
TB | 从上到下 |
TD | 从上到下 |
BT | 从下到上 |
RL | 从右到左 |
LR | 从左到右 |
T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN
例如:
graph LR;
A-->B;
B-->C;
C-->D;
D-->A;
A-->B;
B-->C;
C-->D;
D-->A;
形状
代码 | 形状 |
---|---|
变量 | 默认形状 |
变量[内容] | 矩形 |
变量(内容) | 圆矩形 |
变量((内容)) | 圆形 |
变量>内容] | 非对称形 |
变量{内容} | 菱形 |
例如:
graph LR
A
B[b]
C(c)
D((d))
E>e]
F{f}
A
B[b]
C(c)
D((d))
E>e]
F{f}
连线
话不多说,上表。注意:中间的符号或多或少都不行
代码 | 形状 |
---|---|
A-->B | 箭头 |
A---B | 直连 |
A--text---B | 注释 |
A--text-->B | 箭头注释 |
A-.-B | 虚线直连 |
A-.->B | 虚线箭头 |
A-.text.-B | 虚线注释直连 |
A-.text.->B | 箭头虚线注释 |
A===B | 加粗直连 |
A==>B | 加粗箭头 |
A==text===B | 加粗注释直连 |
A==text==>B | 加粗注释箭头 |
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A6-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
样式
将特定样式例如较粗的边框或不同的背景颜色
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
大例如
graph LR
A[x]
B["if(x<0)"]
C["x=-x"]
D[return x]
A-->B-->C-->D
C-->D
A[x]
B["if(x<0)"]
C["x=-x"]
D[return x]
A-->B
B-->C
B-->D
C-->D
subgraph(子图)
格式
注意:外层可以使用里层中的节点,可以认为是全局变量
graph LR
subgraph 名称
代码
end
subgraph 名称
代码
end
大例如:
subgraph g1
a1-->b1
end
subgraph g2
a2-->b2
end
subgraph g3
a3-->b3
end
b1-->a2
b2-->a3
sequenceDiagram(序列图)
功能
- participant
参与者,相当先定义模块,可通过设定参与者(participant)的顺序控制展示顺序。
例如:
partcipant A
partcipant B
participant A
participant B
partcipant B
partcipant A
participant B
participant A
也可以使用别名:
sequenceDiagram
participant A as A dog
participant B as Bob
A->B:Hello
participant A as A dog
participant B as Bob
A->B:Hello
- note
注释,格式如下
note right of或left of 变量:Text
note over 变量左,变量右 :Text
- 循环
loop 题目
代码
end
- 选择
alt 题目
代码
else
代码
end
在没有else的情况下使用 opt(option,选择)
opt 题目
代码
end
例如:
sequenceDiagram
A->>B: Hello B, how are you?
alt is sick
B->>A:not so good :(
else is well
B->>A:good
end
opt another
B->>A:Thanks for asking
end
A->>B: Hello B, how are you?
alt is sick
B->>A:not so good :(
else is well
B->>A:good
end
opt another
B->>A:Thanks for asking
end
- 激活停用
可以激活activate
或停用deactivate
。
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
也可通过在消息箭头后面添加+
或-
后缀,这一种快捷方式标记:
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
- 平行
可以显示并行发生的动作。
par [题目]
代码
and [题目]
代码
and [题目]
代码
end
sequenceDiagram
participant A
participant B
par A to B
A->B:Hello
and A to C
A->C:Hello
end
participant A
participant B
par A to B
A->B:Hello
and A to C
A->C:Hello
end
连线
代码 | 形状 |
---|---|
-> | 无箭头实线 |
->> | 有箭头实线 |
--> | 无箭头虚线 |
-->> | 有箭头虚线 |
-x | 带x实线 |
--x | 带x虚线 |
在必须后面加:
,以加以注释。
例如:
sequenceDiagram
A -> B : none
A ->> B : none
A --> B : none
A --> B : none
A -x B : none
A --x B : none
A -> B : none
A ->> B : none
A --> B : none
A --> B : none
A -x B : none
A --x B : none
gantt(甘特图)
甘特图是一类条形图,由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述
功能
代码 | 解释 |
---|---|
title | 标题 |
dateFormat | 日期写入格式 |
axisFormat | 日期输出格式 |
section | 模块 |
done | 已经完成 |
Active | 当前正在进行 |
Future | 后续待处理 |
crit | 关键阶段 |
日期缺失 | 默认从上一项完成后 |
格式基本为:内容:关键是否,状态,变量,日期
日期写入格式
默认为:dateFormat YYYY-MM-DD
代码 | 例如 | 解释 |
---|---|---|
YYYY | 2020 | 4位年数 |
YY | 20 | 2位年数 |
Q | 4 | 季度 |
M或MM | 1或12 | 月 |
D或DD | 1或31 | 日 |
Do | 1st或31st | 序数的日 |
DDD或DDDD | 1或365 | 年的日 |
X | 1410715640.579 | 秒 |
x | 1410715640579 | 毫秒 |
H或HH | 0或23 | 时 |
h或hh | 1或12 | 12时记时法 |
a或A | am或pm | 12时的附加 |
m或mm | 0或59 | 分 |
s或ss | 0或59 | 秒 |
S | 0或9 | 十分之一秒 |
SS | 0或99 | 百分之一秒 |
SSS | 0或999 | 千分之一秒 |
Z或ZZ | +12:00 | 从UTC偏移的时间 |
日期输出格式
默认为:axisFormat %Y-%m-%d
代码 | 解释 |
---|---|
%a | 星期几的缩写 |
%A | 完整的工作日名称 |
%b | 月份的缩写 |
%B | 完整的月份名称 |
%c | 日期和时间如"%a%b%e%H:%M:%S%Y" |
%d | 以十进制数[01,31]补零的月份 |
%e | 以十进制数字表示的月份中带空格的日期[1,31] |
%H | 小时(24小时制)十进制数字[00,23] |
%I | 小时(12小时制)十进制数字[01,12] |
%j | 年中的天十进制数字[001,366] |
%m | 以十进制数字[01,12]表示的月份 |
%M | 分钟十进制数字[00,59] |
%L | 十进制数字[000,999]表示的毫秒 |
%p | AM或PM |
%S | 秒十进制数字[00,61] |
%U | 一年中的第几周(星期日为一周的第一天)以十进制数[00,53]为准 |
%w | 工作日以十进制数字[0,6] |
%W | 一年中的第几周(星期一为一周中的第一天)以十进制数[00,53]为准 |
%x | 日期以“%m /%d /%Y”表示 |
%X | 时间以“%H:%M:%S”表示 |
%y | 不带世纪的十进制数字[00,99] |
%Y | 以世纪作为十进制数字的年份 |
%Z | 时区偏移量 |
%% | 文字“%”字符 |
大例如
gantt
title AB
section A
A1 : done, 2020-01-01,2020-01-02
A2 : active, 2020-01-02,1d
section B
B1 : future, 2020-01-03
B2 : crit,active,b2,2020-01-03,48h
section C
C1 : done,after b2,1d
title AB
section A
A1 : done, 2020-01-01,2020-01-02
A2 : active, 2020-01-02,1d
section B
B1 : future, 2020-01-03
B2 : crit,active,b2,2020-01-03,48h
section C
C1 : done,after b2,1d
classDiagram(类图)
类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模,以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素,应用程序中的交互以及要编程的类。
就是大了点,以我现在的能力是无法改变的。
功能
- 类
UML提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区:
顶部的小节包含类的名称。它以粗体和居中打印,并且第一个字母大写。它还可能包含描述类性质的可选注释文本。
中间隔离专区包含类的属性。它们左对齐,第一个字母为小写。
底部的隔离区包含类可以执行的操作。它们也左对齐,首字母为小写。
- 定义类
定义类有两种方法:
- 使用关键字类(如)明确定义一个类class A.
- 通过它们之间的关系定义两个类A <|-- B
命名约定:类名应由字母数和下划线字符组成。
classDiagram
class A
A <|-- B
class A
A <|-- B
- 定义成员
根据括号()
是否存在来区分属性和函数/方法。与()
一起的被视为函数/方法,而其他被视为属性。
使用:(冒号)后跟成员名称来关联类的成员
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal : +isMammal()
Animal : +mate()
Duck : +String beakColor
Duck : +swim()
Duck : +quack()
Fish : -int sizeInFeet
Fish : -canEat()
Zebra : +bool is_wild
Zebra : +run()
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal : +isMammal()
Animal : +mate()
Duck : +String beakColor
Duck : +swim()
Duck : +quack()
Fish : -int sizeInFeet
Fish : -canEat()
Zebra : +bool is_wild
Zebra : +run()
- 能见度
为了指定类成员的可见性(即任何属性或方法),可以将这些符号放在成员名称的前面,但它是可选的:
1.+
Public
2.-
Private
classDiagram
AA <|-- BB
AA : +a()
BB : -b()
AA <|-- BB
AA : +a()
BB : -b()
连线
大概定义为:
类型1 关系 类型2 : 注释
代码 | 代码 | 解释 |
---|---|---|
<|-- |
--|> |
实线三角 |
*-- |
--* |
实线菱头 |
o-- |
--o |
实线空菱 |
<-- |
--> |
实线箭头 |
-- |
-- |
实线直连 |
<.. |
..> |
实线箭头 |
<|.. |
..|> |
实线三角 |
.. |
.. |
实线直连 |
例如:
classDiagram
A1 <|-- B1
B1 --|> C1
A2 *-- B2
B2 --* C2
A3 o-- B3
B3--o C3
A4 <-- B4
B4--> C4
A5 -- B5
B5-- C5
A6 <.. B6
B6..> C6
A7 <|.. B7
B7 ..|> C7
A8 .. B8
B8 .. C8
A1 <|-- B1
B1 --|> C1
A2 *-- B2
B2 --* C2
A3 o-- B3
B3--o C3
A4 <-- B4
B4--> C4
A5 -- B5
B5-- C5
A6 <.. B6
B6..> C6
A7 <|.. B7
B7 ..|> C7
A8 .. B8
B8 .. C8
Markdown画图(mermaid)学习的更多相关文章
- markdown编辑器的学习
markdown编辑器的学习 1 标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 2列表 无序列表 1 2 3 4 有序列表 1 2 3 4 3引用 这里是引用,哈哈我也不知道到我引 ...
- Mermaid 学习
基础 在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; ...
- Markdown常用语法学习
Markdown常用语法学习,这些就够用了. 演示地址: https://github.com/YalongYan/Markdown-- 特别提示: 标题'##'后面必须加一个空格,否则编译不对.# ...
- 关于Markdown的一些学习笔记
**关于Markdown的一些学习笔记** 一直利用markdown进行博客的文档编写,一方面是因为不需要特别注重排版,另一方面是十分的方便.最近突发奇想的认为,如果能运用到平时的作业或课程中,会不会 ...
- Markdown基本语法学习(使用Typora编辑器)
Markdown基本语法学习(使用Typora编辑器) 一级标题:就用 #加标题名字 二级标题 二级标题:## + 标题名字 三级标题 三级标题:### + 标题名字 四级标题 四级标题:#### + ...
- 马克飞象 Markdown 使用和学习
第三方学习网站 http://sspai.com/25137https://maxiang.io/ 使用工具:有道云笔记 https://note.youdao.com/ 新建时使用Mardown类型 ...
- 程序员小张的第一篇博文 --记Markdown的使用学习
1.前言 为了即将到来的面试做准备,以及记录一下平日里自己的学习过程和生活日常,我开始进驻博客园啦!这就是我的第一篇博客(有点小激动)~ 作为一只新手,首先记录一下今晚的编写博文的学习过程吧~ 2.使 ...
- markdown第一天学习
Markdown学习 标题: 空格+标题名字后回车 二级标题 空格+标题名字后回车 三级标题 空格+标题名字后回车 四级标题 空格+标题名字后回车 字体 粗体 hello,world!------两边 ...
- Python 之 【markdown 模块的学习】
摘要: markdown工具,可以将txt转化成html格式.这一类工具的作用是将按一定格式写成的可读性强的文本文件转化为结构化的标准xhtml或html.Linux 下面也有markdown: zh ...
随机推荐
- APP测试经验总结
app测试哪几项: 每一款APP上线之前都需要经过严格的测试,测试周期可按项目开发周期来确定测试时间,一般测试时间为两三周(15个工作日),不过这个根据项目实际情况,可能推迟或提前的. ...
- VMware 15安装Ubuntu 16.04并配置环境
VMware(虚拟机)是指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统,它能在Windows系统上虚拟出多个计算机,每个虚拟计算机可以独立运行,可安装各种软件与应用等 ...
- SpringMVC和Spring
SpringMVC和Spring汇总 转载:https://www.cnblogs.com/doudouxiaoye/p/5693399.html 1. 为什么使用Spring ? 1). 方便解耦, ...
- express高效入门教程(1)
1.hello world 1.1.安装express // 1.进入到自己的项目目录, 我这里是express-demo cd express-demo // 2.初始化项目,生成package.j ...
- Mac下搭建react开发环境
安装node 官网下载 https://nodejs.org/en/ 双击安装,接下来都是默认选择即可,直至安装成功 测试是否安装成功,分别输入以下命令: node -v npm -v 如下图所示,说 ...
- Elasticsearch从入门到放弃:分词器初印象
Elasticsearch 系列回来了,先给因为这个系列关注我的同学说声抱歉,拖了这么久才回来,这个系列虽然叫「Elasticsearch 从入门到放弃」,但只有三篇就放弃还是有点过分的,所以还是回来 ...
- vi/vim 行删除操作
好东西就要多用,vi/vim越用越喜欢了. 删除多行怎么办呢? 命令输入“:32,65d”,回车键,32-65行就被删除了.
- 简易的java爬虫项目
简易的java爬虫项目 本项目仅供java新手学习交流,由于本人也是一名java初学者,所以项目中也有很多不规范的地方,希望各位高手不吝赐教,在评论区指出我的不足,我会虚心学习: 成果预览: 在开始讲 ...
- 自定义PHPstorm快捷键
这篇随笔介绍一下PHPstorm自定义快捷键的步骤: 1.点击主菜单 File 下的 setting : 2.在弹出框中点击 Keymap : 3.之后会出现如下图所示的界面(图中所有的菜单都折叠了) ...
- js中取el表达式问题
例如常用的${pageContext.request.contextPath} 如果需要在js中用到 分两种情况: 如果js是直接写在jsp中 可以直接写el表达式 例如: 如果js是写在外部,jsp ...