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