NotePublic/Software/Applications/VSCode/VSCode_Markdown_UML.md

VSCode+Markdown+UML

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

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

1.流程图

sta=>start: 开始
e=>end: 结束
op=>operation: 操作（处理块）
sub=>subroutine: 子程序
cond=>condition: 是或者不是（条件判断）?
cond2=>condition: 第二个判断（条件判断）?
io=>inputoutput: 输出

sta->op->cond
cond(yes)->e
cond(no)->cond2
cond2(yes,right)->sub(left)-op
cond2(no)->io(lef)->e

1.1.语法

1.1.1.关键字

1. start, end：表示该流程图中的开始与结束。
2. operation：表示该流程图中的处理块。
3. subroutine：表示该流程图中的子程序块。
4. condition：表示该流程图中的条件判断。
5. inputoutput：表示该流程图中的输入输出。
6. right, left：表示该流程图中当前模块下一个箭头的指向（默认箭头指向下方）。
7. yes, no：表示该流程图中条件判断的分支（默认yes箭头向下no箭头向右；yes与no可以和right同时使用；yes箭头向右时，no箭头向下）
8. URL：e=>点击本结束跳转:>http://https://segmentfault.com/blog/ingood

1.1.2.各模块之间的联系

基本形式：

模块标识=>模块关键字: 模块模块名称

连接定义：

模块标识1->模块标识2
模块标识1->模块标识2->模块标识3
... ...

1. 通过模块与连接定义，可以组成一个完整的流程图。
2. 在模块定义中，模块标识与模块名称可以自定义，模块关键字不可以自定义！

2.序列图

title: 三个臭皮匠的故事
participant 小王
participant 小李
participant 小异常

note left of 小王: 我是小王
note over 小李: 我是小李
note right of 小异常: 大家好！\n我是小异常

小王->小王: 小王想：今天要去见两个好朋友咯~
小王->小李: 嘿，小李好久不见啊~ 
小李-->>小王: 是啊
小李->小异常: 小异常，你好啊
小异常-->小王: 哈，小王！\n最近身体怎么样了？
小王->>小异常: 还可以吧

2.1.语法

2.1.1.关键字

1. title：表示该序列图中的标题。
2. participant：表示该序列图中的对象。
3. note：表示该序列图中的部分说明。

关于 note 以下三种关键字：

• left of：表示在当前对象的左侧。
• right of：表示在当前对象的右侧。
• over：表示覆盖在当前对象的上方。

2.1.2.箭头

1. ->：实线实箭头
2. –>：虚线实箭头
3. ->>：实线虚箭头
4. –>>：虚线虚箭头

2.1.3.换行

如果当前行中的文字过多想要换行，可以使用 \n 进行转义换行，效果如以上例子。

3.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

4.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

4.1.语法

4.1.1.泛化(Generalization)

继承、子类与父类

classDiagram

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

4.1.2.实现(Realization)

classDiagram

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

4.1.3.组合(Composition)

classDiagram

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

4.1.4.聚合(Aggregation)

classDiagram

Company o-- Empolyee0
Company o-- Empolyee1

4.1.5.关联(Association)

classDiagram

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

4.1.6.依赖(Dependency)

classDiagram

Animal..>Food

5.Mermaid 流程图

5.1.横向流程图

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

5.2.纵向流程图

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

5.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

6.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!

7.Mermaid 状态图

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

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

8.Entity Relationship Diagrams

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

9.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

10.Pie chart diagrams

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

11.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

12.外部参考资料

1. About Mermaid