###### tags: `tech` # mermaidチートシート ## シーケンス図 ```mermaid sequenceDiagram participant a as A participant b as B participant c as C participant d as D a ->> b: 通常矢印 b -->> d : 破線矢印 a ->> a: セルフ矢印 b -> c: シンプルライン alt Alt a ->> c: test end Note over a, d: メモ loop ループ a ->> c: test end rect rgb(200, 200, 255) a ->> c: 色付きの四角形 end ``` ## フローチャート ### 縦表示 ```mermaid graph TD A[A] --> B[B] B --> A B --> |矢印の上に文字| C{C} C --> D[D] C --> E[E] ``` ### 横表示 ```mermaid graph LR A[A] --> B[B] B --> A B --> C[C] C --> D[D] D --> E[E] ``` ## ガントチャート ```mermaid gantt dateFormat YYYY-MM-DD title アプリ〇〇機能開発 section TeamA task1 :done, des1, 2020-11-01,2020-11-04 task2 :active, des2, 2020-11-04, 3d task3 : des3, after des2, 5d task4 : des4, after des3, 5d section TeamB task1 :active, des5, after des2, 3d task2 : des6, after des5, 5d task3 : des7, after des6, 3d section TeamC task1 :active, des8, after des1, 10d task2 : des9, after des8, 2d ``` ## クラス図 ```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 ``` ## ER図 ```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 ``` ## Git図