简介

目前博客园支持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;

graph LR;
A-->B;
B-->C;
C-->D;
D-->A;

形状

代码	形状
变量	默认形状
变量[内容]	矩形
变量(内容)	圆矩形
变量((内容))	圆形
变量>内容]	非对称形
变量{内容}	菱形

例如：

graph LR

  A

  B[b]

  C(c)

  D((d))

  E>e]

  F{f}

graph TB
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

graph TB
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

graph LR
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

大例如：

graph LR
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

sequenceDiagram
participant A
participant B

partcipant B

partcipant A

sequenceDiagram
participant B
participant A

也可以使用别名：

sequenceDiagram

  participant A as A dog

  participant B as Bob

  A->B:Hello

sequenceDiagram
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

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

激活停用

可以激活activate或停用deactivate。

sequenceDiagram

    Alice->>John: Hello John, how are you?

    activate John

    John-->>Alice: Great!

    deactivate John

sequenceDiagram
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!

sequenceDiagram
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

sequenceDiagram
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

sequenceDiagram
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

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

classDiagram(类图)

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素，应用程序中的交互以及要编程的类。

就是大了点，以我现在的能力是无法改变的。

功能

类

UML提供了表示类成员的机制，例如属性和方法，以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区：

顶部的小节包含类的名称。它以粗体和居中打印，并且第一个字母大写。它还可能包含描述类性质的可选注释文本。

中间隔离专区包含类的属性。它们左对齐，第一个字母为小写。

底部的隔离区包含类可以执行的操作。它们也左对齐，首字母为小写。

定义类

定义类有两种方法：

使用关键字类（如）明确定义一个类class A.
通过它们之间的关系定义两个类A <|-- B

命名约定：类名应由字母数和下划线字符组成。

    classDiagram

    class A

    A <|-- B

classDiagram
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()

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()

能见度

为了指定类成员的可见性（即任何属性或方法），可以将这些符号放在成员名称的前面，但它是可选的：

1.+Public

2.-Private

   classDiagram

     AA <|-- BB

     AA : +a()

     BB : -b()

classDiagram
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

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

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 ...

随机推荐

cookie，session，jwt，token，oauth2联系和区别
为啥有这么多的东西? 由于互联网在刚开始设计的时候是展现静态网页为主,没有现在这么多的交互和互动,所以被设计为了无状态,随用随走的简单模式.随着互联网的发展,各种具有和用户交互功能的网站出现,要求用户 ...
2020_06_18Mysql事务
1.事务的基本介绍 1.概念:一个包含多个步骤的事务,被事务管理,要么同时成功,要么同时失败. 2.操作: 2.1 开启事务:start transaction; 2.2 回滚:rollback; 2 ...
git命令--使用fork模式工作
一. 1.第一步,先将原作者项目fork到自己的目录下,这个可以直接在控制台操作可以看到该项目在ins-product目录下,fork之后,可以去查看自己的工作目录可以看到在本人目录下已经存在该项 ...
python利用列表文件遍历
关键词:文件遍历/列表思路:先制作目标文件列表(txt/csv...均可),再逐行读取列表文件 1. 制作列表 linux 终端输入:# find ./abc -type f > list.t ...
使用随机函数random来实现课堂点名
如何使用函数random来实现课堂随机点名 1.最初的样子如下 2.点击开始点名,上面一行的文字变成名字,名字在不停的变化,开始点名变成停止点名,如下 3.点击停止点名,上面名字不动,停止点名变成开始 ...
序列推荐(transformer)
目录 Attention演进(RNN&LSTM&GRU&Seq2Seq + Attention机制) LSTM GRU Seq2Seq + Attention机制 Attent ...
学习 Java 网站推荐给你
推荐几个非常不错的 Java 学习网站 LearnJava 在线这是一个非常不错的学习 Java 的在线网站,纯免费.这是一个个人项目,旨在通过简单有效的在浏览器中进行练习让你快速掌握 Java 编 ...
Redundant Paths 分离的路径【边双连通分量】
Redundant Paths 分离的路径题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields ...
主流App自动化测试框架对比
1.主流App自动化测试框架对比 2.Appium自动化测试框架官方网址:http://appium.io/ 跨架构:支持原生.混合以及web移动应用跨平台:Android & I ...
多线程01-CAS (CompareAndSwap)
1.基本概念原子性是不可中断的最小操作:在Java中,一般通过加锁或者自旋CAS方式来确保原子操作: 而CAS(compareAnd swap)作为Java中常用的保证原子性的手段,JDK1.5之后 ...

Markdown画图(mermaid)学习

简介