diagram ๊ทธ๋ฆฌ๊ธฐ

โœจ diagram ๊ทธ๋ฆฌ๊ธฐ #

๐Ÿ‰ ์ฝ”๋“œ๋กœ ๊ทธ๋ฆฌ๊ธฐ - mermaid #

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.
{{< /mermaid >}}

sequenceDiagram participant Alice participant John rect rgb(191, 223, 255) note right of Alice: Alice calls John. Alice->>+John: Hello John, how are you? rect rgb(200, 150, 255) Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! end John-->>-Alice: I feel great! end Alice ->>+ John: Did you want to go to the game tonight? John -->>- Alice: Yeah! See you there.

{{< mermaid >}}
    gitGraph
      commit
      branch develop
      commit
      branch feature-ENG-1
      commit id:"ENG-1: add A"
      commit id:"ENG-1: fix B"
      checkout develop
      merge feature-ENG-1
      branch feature-ENG-2
      commit id:"ENG-2: C"
      checkout develop
      merge feature-ENG-2
      branch release-0.1.0
      commit id: "๋ฆด๋ฆฌ์ฆˆ ์ค€๋น„"
      commit id: "fix d" tag:"0.1.0"
      checkout main
      merge release-0.1.0
      checkout develop
      merge main
      commit id:"ENG-20"
      checkout main
      branch hotfix-ENG-21
      commit id:"ENG-21: ๊ธด๊ธ‰ํ•ซํ”ฝ์Šค" tag:"0.1.1"
      checkout main
      merge hotfix-ENG-21
      checkout develop
      commit id:"ENG-22"
{{< /mermaid >}}

gitGraph commit branch develop commit branch feature-ENG-1 commit id:"ENG-1: add A" commit id:"ENG-1: fix B" checkout develop merge feature-ENG-1 branch feature-ENG-2 commit id:"ENG-2: C" checkout develop merge feature-ENG-2 branch release-0.1.0 commit id: "๋ฆด๋ฆฌ์ฆˆ ์ค€๋น„" commit id: "fix d" tag:"0.1.0" checkout main merge release-0.1.0 checkout develop merge main commit id:"ENG-20" checkout main branch hotfix-ENG-21 commit id:"ENG-21: ๊ธด๊ธ‰ํ•ซํ”ฝ์Šค" tag:"0.1.1" checkout main merge hotfix-ENG-21 checkout develop commit id:"ENG-22"

๐Ÿ’ UI๋กœ ๊ทธ๋ฆฌ๊ธฐ - draw.io #

  • ์›น ์—๋””ํ„ฐ๋กœ ๊ทธ๋ฆฌ๊ณ  .svg๋กœ ์ €์žฅํ•˜๊ธฐ
  • ํ˜น์€ electron desktop ์•ฑ์„ ์„ค์น˜ํ•˜๊ณ  ๋กœ์ปฌ์—์„œ ๊ทธ๋ฆฌ๊ณ  .svg๋กœ ์ €์žฅํ•˜๊ธฐ
choco install drawio -confirm
  • svg ์‚ฝ์ž…ํ•˜๊ธฐ
{{< svg "/company/handbook/test.svg">}}
user
user
reverse
proxy
reverse...
frontend (react)
db
db
Backend Service
Text is not SVG - cannot display