✨ 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">}}