V2AS问路
Markdown画图(mermaid)学习
阅读原文时间：2022年01月13日阅读：1

简介

目前博客园支持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提供了表示类成员的机制，例如属性和方法，以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区：

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

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

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

  • 定义类

    定义类有两种方法：

  1. 使用关键字类（如）明确定义一个类class A.

  2. 通过它们之间的关系定义两个类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

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

使用Typora编写Markdown你真的会了吗
Markdown时序图--基础语法
aha

4

markdown mermaid序列图

5

mermaid使用简介(画论文插图的一种解决方案)

6

【hexo指南】hexo配置ER图流程图时序图插件