Mermaid画图教程（一）

References

mermiad教程

流程图-Flowchart语法说明

顺序图-Sequence diagrams语法说明

类图-Class diagrams语法说明

饼图-Pie chart diagrams语法说明

mermaid在线作图工具-可保存为图片

Mermaid画图教程二

流程图-Flowchart

关键字graph和flowchart的区别：flowchart支持一些特别的属性，如子图之间的连接，更特别的箭头。

流程图方向

• TB - top to bottom
• TD - top-down/ same as top to bottom
• BT - bottom to top
• RL - right to left
• LR - left to right

图形形状及连接方式

graph LR
	id1["[xxx]"]
	id2[["[[xxx]]"]]
	id3(["([xxx])"])
	id4[("[(xxx)]")]
	id5(("((xxx))"))
	id6>">xxx]"]
	id7{"{xxx}"}
	id8{{"{{xxx}}"}}
	id9[/"[/xxx/]"/]
	id10[/"[/xxx\]"\]
	id11[\"\xxx/"/]
	id12[more]
	id1 --- |"---"| id2 -->|"-->"| id3 -.->|"-.->"| id4
	id5 --- |直线| id6 -->|带箭头<br/>的直线| id7 -.->|带箭头<br/>的虚线| id8
	id9 == "==>" ==>id10
	id9 -.- |"-.-"| id10
	id10 --> id11 -.- id12

---

-->

-.->

直线

带箭头
的直线

带箭头
的虚线

==>

-.-

[xxx]

[[xxx]]

([xxx])

[(xxx)]

((xxx))

>xxx]

{xxx}

{{xxx}}

[/xxx/]

[/xxx\]

\xxx/

more

When using flowchart instead of graph there is the possibility to use multidirectional arrows.

flowchart LR
	%% 有点和上面的graph不一样，在箭头上不是标注文本，二是图形
        A o--"o-....o....-o"--o B
        B <--"<--xxx-->"--> C
        C x--"在线上
的字"--x D

o-....o....-o

<--xxx-->

在线上
的字

A

B

C

D

自定义风格

flowchart不能自定义风格（也许是我不会，哈哈），下面是graph的自定义风格。

使用关键字style/classDef

graph LR
    id1(红色填充<br/>黑色边框<br/>宽度为4px)
    id2(绿色填充<br/>虚线边框<br/>白色字体)
    style id1 fill:#f00,stroke:#333,stroke-width:4px
    %% stroke-dasharray属性设置虚线边框的点的大小(长10宽5)
    style id2 fill:#0f0,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 10 5
    id1 -->a[继承mystyle1风格] & b[继承mystyle2风格] -->id2
    %% 或者定义成一个类，其它继承即可，重复利用
    classDef mystyle1 fill:#f9f,stroke:#333,stroke-width:4px;
    classDef mystyle2 fill:#00f,stroke:#f33,stroke-width:4px,color:#f2f;
    %% 继承mystyleX风格
    a:::mystyle1
    b:::mystyle2
    

红色填充
黑色边框
宽度为4px

绿色填充
虚线边框
白色字体

继承mystyle1风格

继承mystyle2风格

声明成一个类多次使用/子图

也可以直接在主题配置文件(xxx.css)中配置。如果一个类被命名为default，它将被分配给所有没有特定类定义的类classDef default fill:#f9f,stroke:#333,stroke-width:4px;。

flowchart图

flowchart TB
    c1-->|不同子图元素<br/>之间的连接| a2
    subgraph one
    a1-->|子图内部元素<br/>之间的连接| a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one -->|子图之间的连接| two
    three --> two
    two --> c2

three

one

不同子图元素
之间的连接

子图内部元素
之间的连接

子图之间的连接

c2

c1

two

b2

b1

a2

a1

graph图

graph LR
	%% flowchart改为graph也可以
	%% 风格1，用红色填充，边框用蓝色，边框宽度两个像素
	classDef mystyle1 fill:#f00, stroke:#00f, stroke-width:2px;
	classDef mystyle2 fill:#0f0, stroke:#f00, stroke-width:4px;
	classDef mystyle3 fill:#00f, stroke:#0f0, stroke-width:8px,color:#fff,stroke-dasharray: 6 3
	classDef default fill:#f9f,stroke:#333,stroke-width:4px;
	%% :::表示继承类（风格）
	D[(默认风格)]
	B(绿色填充<br/>红边框<br/>圆角):::mystyle2 --> D
	C[蓝色填充<br/>绿色边框<br/>白色字体]:::mystyle3 --> D
	%% D默认为default风格
	
	e((显示特别<br/>的符号)) -->|"f(,.?!+-*ز)"| f(,.?!+-*ز)
	
	C --> b2
	subgraph subgraph1
		a1{"{菱形}"} --- a2[/"[/梯形\]"\]
	end
	subgraph subgraph2
		b1[["[[xxx]]"]] -->|子图内部元<br/>素的连接| b2(["([圆角])"])
	end
	%% graph图形是不能在子图之间进行连接，但是子图内部的元素还是可以
	%% subgraph1 --> subgraph2
	%% a1 -->|子图元素<br/>之间的连接| b1

subgraph2

subgraph1

f(,.?!+-*ز)

子图内部元
素的连接

([圆角])

[[xxx]]

[/梯形\]

{菱形}

默认风格

绿色填充
红边框
圆角

蓝色填充
绿色边框
白色字体

显示特别
的符号

,.?!+-*ز

绑定事件

不是很懂

饼图-pie

pie 
    title Like
    "DSP" : 23
    "通信原理" : 21
    "移动通信" : 18
    "电信传输理论" : 10
    "毛概" : 15

26% 24% 21% 11% 17% Like DSP 通信原理 移动通信 电信传输理论 毛概

顺序图-sequenceDiagram

基本语法：[Actor][Arrow][Actor]:Message text，Actor表示角色的意思。其中Arrow有->,–>,->>,–>>,-X,–X。

Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss：序列图的样式是通过定义多个CSS类来完成的。在渲染期间，这些类是从src / themes / sequence.scss中的文件中提取的。

sequenceDiagram
	%% 自动编号
	autonumber
	%% 定义参与者并取别名，aliases：别名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便签说明
        Note left of A: 只复习了一部分
        Note right of B: 没复习
        Note over A,B: are contacting
        
        A->>B: 明天是要考试吗？
        B-->>A: 好像是的！
        
        %% 显示并行发生的动作，parallel：平行
        %% par [action1]
        rect rgb(0, 255, 255)
            par askA
                C -->> A:你复习好了吗？
            and askB
                C -->> B:你复习好了吗？
            and self
                C ->>C:我还没准备复习......
            end
        end
        
        %% 背景高亮，提供一个有颜色的背景矩形
        rect rgb(255, 255, 0)
            loop 自问/Every min
            %% <br/>可以换行
            C ->> C:我什么时候<br/>开始复习呢？
            end
        end
        
        %% 可选择路径
        rect rgb(200, 100, 100)
            alt is good
                A ->> C:复习了一点
            else is common
                B ->> C:我也是
            end
            %% 没有else时可以提供默认的opt
            opt Extra response
                C ->> C:你们怎么不回答我
            end
        end

Aly Bob CofCai 只复习了一部分 没复习 are contacting 明天是要考试吗？ 1 好像是的！ 2 你复习好了吗？ 3 你复习好了吗？ 4 我还没准备复习...... 5 par [askA] [askB] [self] 我什么时候 开始复习呢？ 6 loop [自问/Every min] 复习了一点 7 我也是 8 alt [is good] [is common] 你们怎么不回答我 9 opt [Extra response] Aly Bob CofCai

类图-class diagrams

用于类之间的所属关系表达

classDiagram
	%% Duck继承自Animal
        Animal <|-- Duck
        Animal <|-- Fish
        Animal <|-- Zebra
        %% +即public；-即private；#即protected；~即Package/Internal
        Animal : +int age
        Animal : +String gender
        %% 返回值类型，在括号后面加，记得要有一个空格
        Animal: +isMammal() bool
        Animal: +mate()
        %% Duck有Animal的属性和方法
        class Duck{
            +String beakColor
            +swim()
            +quack()
        }
        class Fish{
            -int sizeInFeet
            -canEat()
        }
        class Zebra{
            +bool is_wild
            +run(speed)
        }
        Duck <|-- yellowDuck
        class yellowDuck{
        	-string color
        	-int size
        }

Animal +int age +String gender +isMammal() : bool +mate() Duck +String beakColor +swim() +quack() Fish -int sizeInFeet -canEat() Zebra +bool is_wild +run(speed) yellowDuck -string color -int size

类之间的关系

classDiagram
	%% [classA][Arrow][ClassB]:LabelText
        classA --|> classB : Inheritance
        classC --* classD : Composition
        classE --o classF : Aggregation
        classG --> classH : Association
        classI -- classJ : Link(Solid)
        classK ..> classL : Dependency
        classM ..|> classN : Realization
        classO .. classP : Link(Dashed)

classA classB classC classD classE classF classG classH classI classJ classK classL classM classN classO classP Inheritance Composition Aggregation Association Link(Solid) Dependency Realization Link(Dashed)

类注释

• <> To represent an Interface class：接口类
• <> To represent an abstract class：抽象类
• <> To represent a service class：服务类
• <> To represent an enum：枚举类

classDiagram
    class Shape {
        <<interface>>
        noOfVertices
        -len
        -high
        drawPoint()
        drawLine()
        drawRctangle()
    }
    class Color {
        <<enumeration>>
        RED
        BLUE
        GREEN
        WHITE
        BLACK
    }
    class type {
    	<<abstract>>
    	Animal
    }

«interface» Shape noOfVertices -len -high drawPoint() drawLine() drawRctangle() «enumeration» Color RED BLUE GREEN WHITE BLACK «abstract» type Animal