✨ diagram 그리기 #

🍉 코드로 그리기 - mermaid #

• diagram as a code - DaaS
• 예제와 도움말
• 머메이드 라이브 에디터 라이브 에디터에서 바로 확인할 수 있고 png나 svg로 export 가능하다
• 인라인으로 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">}}