5.3 KiB
5.3 KiB
VSCode+Markdown+UML
- VSCode+Markdown+UML
首先 VSCode 安装 Markdown Preview Enhanced (Yiyi Wang) 插件。
然后对 Markdown 文件可使用 Ctrl+k,v 进行预览。
1. Mermaid 流程图
flowchart
Start[开始]
End[结束]
Operation([处理块])
Subroutine[子程序]
Condition1{是或者不是}
Condition2{第二个判断}
Output[输出]
Start --> Operation --> Condition1 --> |Yes|End
Condition1 --> |No|Condition2 --> |Yes|Subroutine --> Operation
Condition2 --> |No|Output --> End
1.1. 横向流程图
flowchart LR
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| D[结果2]
F[横向流程图]
1.2. 纵向流程图
flowchart TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> D[结果1]
C --> E[结果2]
subgraph F[F]
direction TB
G[纵向流程图]
end
1.3. 超大流程图样例
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
2. Mermaid 甘特图
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 行1
任务1 :a1, 2014-01-01, 30d
任务2 :after a1 , 20d
section 行2
任务3 :2014-01-12 , 12d
任务4 : 24d
3. Mermaid 类图
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
3.1. 语法
3.1.1. 泛化(Generalization)
继承、子类与父类
classDiagram
A<|--B
A:+int doing
A:+Can()
B:+flying()
3.1.2. 实现(Realization)
classDiagram
class IFlyable{
<<interface>>
+ flying()
}
IFlyable<|..Bat
Bat:+flying()
3.1.3. 组合(Composition)
classDiagram
Computer *-- CPU
Computer *-- Mainboard
Computer *-- HardDisk
Computer *-- MemeryCard
3.1.4. 聚合(Aggregation)
classDiagram
Company o-- Empolyee0
Company o-- Empolyee1
3.1.5. 关联(Association)
classDiagram
Reader "1..*" -- "1..*" Book
Book "1..*"--> "1"Author
3.1.6. 依赖(Dependency)
classDiagram
Animal..>Food
4. Mermaid 时序图
sequenceDiagram
participant Alice
participant Bob
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: Jolly good!
5. Mermaid 状态图
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
6. Entity Relationship Diagrams
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
7. User Journey Diagram
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
8. Pie chart diagrams
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
9. Requirement Diagram
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req