UML流程图

语法参考

示例1

<div id="flowchart-0" class="flow-chart"></div>

## UML时序图

[参考链接](https://bramp.github.io/js-sequence-diagrams/)

~~~sequence
Title: 我是标题
participant A
participant B
participant C
participant D
A->B: 方法，代表实心箭头，同步消息，比如 AJAX 的同步请求
B->>C: 请求，
C-->D: 代表虚线，表示返回消息，spring Controller return
D-->>A: 代表非实心箭头 ，异步消息，比如AJAX请求
Title:连接建立的过程
客户主机->服务器主机: 连接请求（SYN=1,seq=client_isn） 
服务器主机->客户主机: 授予连接（SYN=1,seq=client_isn）\n ack=client_isn+1
客户主机->服务器主机: 确认（SYN=0,seq=client_isn+1）\nack=server_isn+1

mermaid

语法参考

graph TD
client1-->|read / write|SVN((SVN server))
client2-->|read only|SVN
client3-->|read / write|SVN
client4-->|read only|SVN
client5(...)-->SVN
SVN---|store the data|sharedrive
  • Flow
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

  • Sequence

      sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

  • Gantt

      gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d

  • Class

classDiagram
Class01 <|-- averylongclass : cool <> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <>
  int id
  size()
}

  • State

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

  • Pie

    mermaid pie "Dogs" : 386 "Cats" : 85 "Rats" : 15