Mermaid sequence(シーケンス図)

概要:

Mermaid記法で、シーケンス図のメモです

• 前のER図の続編になりました
• mermaid.jsで、ブログ等に表示したりする形です

---

構成

• mermaid.js
• Mermaid

---

関連

https://mermaid.js.org/intro/

---

記法

• [ ->>+ ] の部分が、右工程の矢印
• [ ->>- ] の部分が、左工程の矢印

---

• step1

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

---

• step2: 3工程に増やす

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John->>+Step3: Hello Step3, how are you? 
    Step3-->>-John: Hi John, I can hear you!
    John-->>-Alice: Hi Alice, I can hear you!

---

• step3: 実践編 tRPC動作

sequenceDiagram
    Fornt JS->>+中間API: request
    中間API->>+tRPC_Server:  request 
    tRPC_Server-->>-中間API: response
    中間API-->>-Fornt JS: response

....