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