---
# System prepended metadata

title: Flow Sample

---

# Flow Sample

```sequence
  Title:时序图示例
  客户端->服务端: 我想找你拿下数据 SYN
  服务端-->客户端: 我收到你的请求啦 ACK+SYN
  客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
  Note right of 服务端: 我是一个服务端
  Note left of 客户端: 我是一个客户端
  Note over 服务端,客户端: TCP 三次握手
  participant 观察者
  
```

---

```mermaid
  gantt
          dateFormat  YYYY-MM-DD
          title 软件开发甘特图
          section 设计
          需求:done,des1, 2019-01-06,2019-01-08
          原型:active,des2, 2019-01-09, 3d
          UI设计:des3, after des2, 5d
          未来任务:des4, after des3, 5d
          section 开发
          学习准备理解需求:crit, done, 2019-01-06,24h
          设计框架:crit, done, after des2, 2d
          开发:crit, active, 3d
          未来任务:crit, 5d
          休息时间:2d
          section 测试
          功能测试:active, a1, after des3, 3d
          压力测试:after a1, 20h
          测试报告: 48h
```

---

```mermaid
sequenceDiagram
对象A->对象B:中午吃什么？
对象B->>对象A: 随便
loop 思考
    对象A->对象A: 努力搜索
end
对象A-->>对象B: 火锅？
对象B->>对象A: 可以
Note left of 对象A: 我是一个对象A
Note right of 对象B: 我是一个对象B
participant 对象C
Note over 对象C: 我自己说了算
```

---

```mermaid
classDiagram
  Class01 <|-- AveryLongClass : Cool
  <<interface>> 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 {
    <<service>>
    int id
    size()
  }
```

---

[Flow Source](http://flowchart.js.org/)

```flow
st=>start: web:>
op1=>operation: 會員ID綁定審核成功
op2=>operation: 中台API 
op3=>operation: 核心API
cond1=>condition: 中台OK
cond2=>condition: 核心OK
e=>end: web:>

st->op1->op2->cond1
cond1(no,right)->op1
cond1(yes)->op3

op3(right)->cond2
cond2(no,right)->op2
cond2(yes)->e

```

---

```mermaid
gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
```

---

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

---

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

---

[Graphviz Source](https://github.com/ballantony/dot-graphviz/blob/main/graphs.org)

```graphviz
graph graphname { 
		a -- b; 
		b -- c;
		b -- d;
		d -- a;
	}
```

```graphviz
digraph graphname {
		a -> b;
		b -> c;
		a -> c;
	}
```

```graphviz
digraph graphname {

		T [label="Teacher"]      // node T
		P [label="Pupil"]  // node P

		T->P [label="Instructions",         fontcolor=darkgreen] // edge T->P
}
```

---