文章目录
References
流程图-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
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--"在线上<br/>的字"--x 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
声明成一个类多次使用/子图
也可以直接在主题配置文件(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
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
绑定事件
不是很懂
饼图-pie
pie
title Like
"DSP" : 23
"通信原理" : 21
"移动通信" : 18
"电信传输理论" : 10
"毛概" : 15
顺序图-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
类图-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
}
类之间的关系
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)
类注释
<<Interface>>To represent an Interface class：接口类<<abstract>>To represent an abstract class：抽象类<<Service>>To represent a service class：服务类<<enumeration>>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
}
4701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
