# VSCode+Markdown+UML

- [VSCode+Markdown+UML](#vscodemarkdownuml)
  - [1. Mermaid 流程图](#1-mermaid-流程图)
    - [1.1. 横向流程图](#11-横向流程图)
    - [1.2. 纵向流程图](#12-纵向流程图)
    - [1.3. 超大流程图样例](#13-超大流程图样例)
  - [2. Mermaid 甘特图](#2-mermaid-甘特图)
  - [3. Mermaid 类图](#3-mermaid-类图)
    - [3.1. 语法](#31-语法)
      - [3.1.1. 泛化(Generalization)](#311-泛化generalization)
      - [3.1.2. 实现(Realization)](#312-实现realization)
      - [3.1.3. 组合(Composition)](#313-组合composition)
      - [3.1.4. 聚合(Aggregation)](#314-聚合aggregation)
      - [3.1.5. 关联(Association)](#315-关联association)
      - [3.1.6. 依赖(Dependency)](#316-依赖dependency)
  - [4. Mermaid 时序图](#4-mermaid-时序图)
  - [5. Mermaid 状态图](#5-mermaid-状态图)
  - [6. Entity Relationship Diagrams](#6-entity-relationship-diagrams)
  - [7. User Journey Diagram](#7-user-journey-diagram)
  - [8. Pie chart diagrams](#8-pie-chart-diagrams)
  - [9. Requirement Diagram](#9-requirement-diagram)
  - [10. 外部参考资料](#10-外部参考资料)


首先 VSCode 安装 Markdown Preview Enhanced (Yiyi Wang) 插件。

然后对 Markdown 文件可使用 Ctrl+k,v 进行预览。

## 1. Mermaid 流程图

```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. 横向流程图

```mermaid
flowchart LR
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| D[结果2]
F[横向流程图]
```

### 1.2. 纵向流程图

```mermaid
flowchart TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> D[结果1]
C --> E[结果2]
subgraph F[F]
  direction TB
  G[纵向流程图]
end
```

### 1.3. 超大流程图样例

```mermaid
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 甘特图

```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 类图

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

继承、子类与父类

```mermaid
classDiagram

A<|--B
A:+int doing
A:+Can()
B:+flying()
```

#### 3.1.2. 实现(Realization)

```mermaid
classDiagram

class IFlyable{
  <<interface>>
  + flying()
}
IFlyable<|..Bat
Bat:+flying()
```

#### 3.1.3. 组合(Composition)

```mermaid
classDiagram

Computer *-- CPU
  Computer *-- Mainboard
  Computer *-- HardDisk
  Computer *-- MemeryCard
```

#### 3.1.4. 聚合(Aggregation)

```mermaid
classDiagram

Company o-- Empolyee0
Company o-- Empolyee1
```

#### 3.1.5. 关联(Association)

```mermaid
classDiagram

Reader "1..*" -- "1..*" Book
Book "1..*"--> "1"Author
```

#### 3.1.6. 依赖(Dependency)

```mermaid
classDiagram

Animal..>Food
```

## 4. Mermaid 时序图

```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 状态图

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

## 6. Entity Relationship Diagrams

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

## 7. User Journey Diagram

```mermaid
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

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

## 9. Requirement Diagram

```mermaid
requirementDiagram

requirement test_req {
  id: 1
  text: the test text.
  risk: high
  verifymethod: test
}

element test_entity {
  type: simulation
}

test_entity - satisfies -> test_req
```

## 10. 外部参考资料

1. [About Mermaid](https://mermaid-js.github.io/mermaid/#/)