Git 그래프
Git 그래프는 서로 다른 브랜치의 git 커밋과 git 작업을 시각적으로 표현한 것입니다.
Git 그래프는 개발자와 운영 팀에 특히 유용하며, Git 브랜치 전략을 공유하는 데 사용할 수 있습니다.
Mermaid 는 Git 그래프를 렌더링할 수 있습니다.
복사
임베드
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid 는 기본적인 git 작업을 지원합니다. 예:
- commit : 현재 브랜치의 새 커밋을 나타냅니다.
- branch : 새 브랜치를 생성하고 전환하며 동시에 현재 브랜치로 설정합니다.
- checkout : 기존 브랜치로 전환하고 현재 브랜치로 설정합니다.
- merge : 기존 브랜치를 현재 브랜치에 병합합니다.
이러한 Git 작업을 통해 Mermaid 에서 Git 그래프를 매우 쉽고 빠르게 그릴 수 있습니다. 엔티티 이름은 일반적으로 대문자로 시작하지만, 이에 대한 인정된 표준은 없으며 Mermaid 에서도 필수가 아닙니다.
참고: checkout 과 switch 는 서로 바꾸어 사용할 수 있습니다.
문법
Git 그래프의 Mermaid 문법은 매우 직접적이고 간단합니다. 선언적 접근 방식을 채택하여 각 커밋이 코드에 나타나는 순서대로 Git 그래프의 타임라인에 그려집니다. 기본적으로 각 명령의 삽입 순서를 따릅니다.
먼저 gitGraph 문법을 사용하여 차트 유형을 선언합니다. gitGraph 문법은 Mermaid 에게 Git 그래프를 그리고 싶다는 것을 알리고 그에 따라 차트 코드를 파싱합니다.
각 Git 그래프는 main 브랜치로 초기화됩니다. 다른 브랜치를 생성하지 않으면 기본적으로 커밋이 기본(main) 브랜치로 들어갑니다. 이는 git 의 작동 방식에서 비롯된 것으로, 시작할 때 항상 메인 브랜치에서 시작합니다. 기본적으로 main 브랜치가 현재 브랜치로 설정됩니다.
commit 문법을 사용하여 현재 브랜치에 커밋을 등록할 수 있습니다. 이것이 어떻게 작동하는지 살펴보겠습니다:
기본 브랜치 main 의 세 가지 커밋을 보여주는 간단한 git 그래프:
복사
임베드
gitGraph
commit
commit
commit
앞의 예를 자세히 보면 기본 브랜치 main 과 세 개의 커밋을 볼 수 있습니다. 또한 기본적으로 각 커밋에 고유하고 무작위인 ID 가 할당된다는 점에 유의하세요.
사용자 정의 커밋 ID 추가
특정 커밋에 대해 선언할 때 id 속성으로 사용자 정의 ID를 지정하고 콜론 : 을 붙인 다음, 큰따옴표 안에 사용자 정의 값을 표기할 수 있습니다.
아래 그림을 통해 어떻게 작동하는지 살펴보겠습니다:
복사
임베드
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
커밋 유형 수정
Mermaid 에서 커밋에는 세 가지 유형이 있으며, 차트에서 렌더링되는 방식이 약간 다릅니다. 이러한 유형은 다음과 같습니다:
- NORMAL : 기본 커밋 유형으로, 속이 찬 원으로 표현됩니다.
- REVERSE : 커밋이 역방향 커밋임을 강조하며, 교차하는 속이 찬 원으로 표현됩니다.
- HIGHLIGHT : 특정 커밋을 강조 표시하며, 속이 찬 사각형으로 표현됩니다.
주어진 커밋에 대해 선언할 때 type 속성으로 그 유형을 지정하고, 뒤에 콜론 : 과 위에서 논의한 필요한 유형 옵션을 붙일 수 있습니다. 예: commit type:
참고: 커밋 유형을 지정하지 않으면 기본적으로 NORMAL 이 선택됩니다.
아래 그림을 통해 이러한 다양한 유형의 커밋이 어떻게 진행되는지 살펴보겠습니다:
복사
임베드
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
이 예에서는 각 커밋에 서로 다른 유형을 지정했습니다. 또한 커밋을 선언할 때 id 와 type 을 동시에 포함하는 방법을 보세요.
태그 추가
주어진 커밋에 대해 git world 의 태그나 릴리스 버전 개념과 유사하게 tag 로 장식할 수 있습니다. 커밋을 선언할 때 tag 속성으로 사용자 정의 태그를 첨부하고, 뒤에 콜론 : 을 붙이며 큰따옴표 안에 사용자 정의 값을 표기할 수 있습니다.
복사
임베드
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
이 예에서는 커밋에 사용자 정의 태그를 설정했습니다.
새 브랜치 생성
Mermaid 에서 새 브랜치를 만들려면 branch 문법을 사용할 수 있습니다. 또한 새 브랜치의 이름을 제공해야 합니다. 이름은 고유해야 하며 기존 브랜치의 이름이 될 수 없습니다.
Mermaid 가 branch 문법을 읽으면 새 브랜치를 생성하고 현재 브랜치로 설정합니다. Git 그래프에서 새 브랜치를 생성하고 해당 브랜치로 전환하는 것과 같습니다.
복사
임베드
gitGraph
commit
commit
branch develop
commit
commit
commit
이 예에서는 기본 main 브랜치에서 시작하여 두 개의 커밋을 푸시한 방법을 볼 수 있습니다. 그런 다음 develop 브랜치를 생성했고, 이후의 모든 커밋은 develop 브랜치가 현재 브랜치가 되었기 때문에 develop 브랜치에 배치되었습니다.
기존 브랜치 체크아웃
Mermaid 에서 기존 브랜치로 전환하려면 checkout 문법을 사용할 수 있으며, 기존 브랜치의 이름도 제공해야 합니다. 지정된 이름의 브랜치를 찾지 못하면 콘솔 오류가 발생합니다. 사용 예: checkout develop
Mermaid 가 checkout 문법을 읽으면 지정된 이름의 브랜치를 찾아 현재 브랜치로 설정합니다. 이는 Git 에서 브랜치를 체크아웃하는 것과 같습니다.
복사
임베드
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
이 예에서는 먼저 기본 main 브랜치에서 시작하여 두 번 커밋을 푸시했습니다. 그런 다음 develop 브랜치를 생성했고, 이후 세 개의 커밋 모두 develop 브랜치가 현재 브랜치가 되었기 때문에 develop 브랜치에 배치되었습니다. 그런 다음 checkout 문법을 사용하여 현재 브랜치를 main 으로 설정했고, 이후의 모든 커밋은 main 브랜치에 기록됩니다.
두 브랜치 병합
Mermaid 에서 기존 브랜치를 병합하거나 연결하려면 merge 문법을 사용해야 합니다. 또한 병합할 기존 브랜치의 이름을 제공해야 합니다. 지정된 이름의 브랜치를 찾지 못하면 콘솔에 오류가 표시됩니다. 또한 두 개의 독립적인 브랜치만 병합할 수 있으며, 브랜치를 자기 자신과 병합할 수 없습니다.
문법 예: merge develop
Mermaid 가 merge 문법을 읽으면 지정된 브랜치와 그 마지막 커밋을 찾아 현재 브랜치의 마지막 커밋과 병합합니다. 속이 찬 이중 원으로 표현됩니다.
다음은 두 브랜치 병합 예입니다:
복사
임베드
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
이 예에서는 먼저 main 브랜치에서 시작하여 두 개의 커밋을 푸시했습니다. 그런 다음 develop 브랜치를 생성하고 develop 브랜치에 세 개의 커밋을 푸시했습니다. 그런 다음 checkout 문법을 사용하여 현재 브랜치를 main 으로 설정했고, 이후의 모든 커밋은 main 브랜치를 대상으로 진행되었습니다. 마지막으로 develop 브랜치를 main 브랜치에 병합하여 병합 커밋을 생성했습니다. 이때 현재 브랜치가 여전히 main 이므로 마지막 두 커밋은 해당 브랜치에 기록됩니다.
병합에 유사한 속성을 추가할 수도 있습니다:
- id 는 사용자 정의 ID로 기본 ID를 덮어씁니다.
- tag 는 사용자 정의 태그를 병합 커밋에 추가합니다.
- type 은 병합 커밋의 기본 유형을 덮어씁니다. 앞서 언급한 다른 커밋 유형을 사용할 수 있습니다.
복사
임베드
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
다른 브랜치에서 선택적으로 커밋 병합
Mermaid 는 한 브랜치의 커밋을 현재 브랜치로 체리픽하는 것을 지원합니다. cherry-pick 문법을 사용하여 다른 브랜치에서 커밋을 체리픽할 수도 있습니다.
cherry-pick 문법을 사용하려면 id 속성으로 id 를 지정한 다음 콜론 : 뒤에 원하는 커밋 id 를 작성하고 큰따옴표로 감싸야 합니다. 예:
여기에는 주의해야 할 몇 가지 중요한 규칙이 있습니다:
- 기존 커밋을 선택하려면 id 를 제공해야 합니다. 주어진 커밋 ID 가 존재하지 않으면 오류가 발생합니다. 이를 위해 commit id:$value 형식을 사용하여 커밋을 선언하세요.
- 주어진 커밋은 현재 브랜치에 존재해서는 안 되며, 체리픽되는 커밋은 항상 현재 브랜치와 다른 브랜치에서 와야 합니다.
- 현재 브랜치에는 체리픽을 수행하기 전에 최소한 하나의 커밋이 있어야 하며, 그렇지 않으면 오류가 발생합니다.
- 병합 커밋을 체리픽할 때는 부모 커밋 ID 를 제공해야 합니다. 부모 속성을 생략하거나 유효하지 않은 부모 커밋 ID 를 제공하면 오류가 발생합니다.
- 지정된 부모 커밋은 체리픽되는 병합 커밋의 직접 부모 커밋이어야 합니다.
복사
임베드
gitGraph
commit id: "ZERO"
branch develop
branch release
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"MERGE"
commit id:"TWO"
checkout release
cherry-pick id:"MERGE" parent:"B"
commit id:"THREE"
checkout develop
commit id:"C"
특정 구성 옵션
Mermaid Git 그래프에서 다음 옵션을 구성할 수 있습니다:
- showBranches : 부울 값, 기본값은 true. false 로 설정하면 브랜치가 표시되지 않습니다.
- showCommitLabel : 부울 값, 기본값은 true. false 로 설정하면 커밋 레이블이 표시되지 않습니다.
- mainBranchName : 문자열, 기본값은 main. 기본 브랜치의 이름.
- mainBranchOrder : 브랜치 목록에서 메인 브랜치의 위치. 기본값은 0이며, 이는 기본적으로 main 브랜치가 1번째에 위치함을 의미합니다.
- parallelCommits : 부울 값, 기본값은 false. true 로 설정하면 부모와 거리가 있는 커밋이 동일한 레벨에 표시됩니다.
브랜치 이름과 연결선 숨기기
때로는 브랜치 이름과 연결선을 숨기고 싶을 수 있습니다. showBranches 문법을 사용하여 이 작업을 수행할 수 있습니다. 기본적으로 그 값은 true 이며, 지시문을 사용하여 false 로 설정할 수 있습니다.
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
커밋 레이블 레이아웃: 회전 또는 수평
Mermaid 는 두 가지 유형의 커밋 레이블 레이아웃을 지원합니다. 기본 레이아웃은 회전이며, 이는 레이블이 커밋 원 아래에 배치되고 더 나은 가독성을 위해 45도 회전됨을 의미합니다. 이는 긴 레이블을 가진 커밋에 특히 유용합니다.
또 다른 유형은 수평이며, 이는 레이블이 커밋 원 아래에 배치되고 수평으로 중앙 정렬되어 표시되며 회전하지 않음을 의미합니다. 이는 짧은 레이블을 가진 커밋에 특히 유용합니다.
지시문에서 rotateCommitLabel 문법을 사용하여 커밋 레이블의 레이아웃을 변경할 수 있습니다. 기본값은 true 이며, 이는 커밋 레이블이 회전함을 의미합니다.
사용 예: 회전 커밋 레이블
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: true
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
사용 예: 수평 커밋 레이블
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: false
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
커밋 레이블 숨기기
때로는 커밋 레이블을 숨기고 싶을 수 있습니다. showCommitLabel 문법을 사용하여 이 작업을 수행할 수 있습니다. 기본적으로 그 값은 true 이며, 지시문을 사용하여 false 로 설정할 수 있습니다.
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
showCommitLabel: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
사용자 정의 메인 브랜치 이름
때로는 메인 브랜치의 이름을 사용자 정의하고 싶을 수 있습니다. mainBranchName 문법을 사용하여 이 작업을 수행할 수 있습니다. 기본적으로 그 값은 main 이며, 지시문을 사용하여 임의의 문자열로 설정할 수 있습니다.
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchName: 'MetroLine1'
---
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
Mermaid 로 만든 가상 지하철 노선도를 살펴보세요. 여기에서는 기본 메인 브랜치 이름을 MetroLine1 로 변경합니다.
사용자 정의 브랜치 순서
Mermaid 에서 기본적으로 브랜치는 그래프 코드에서 정의되거나 나타나는 순서대로 표시됩니다.
때로는 브랜치 순서를 사용자 정의하고 싶을 수 있습니다. 브랜치 정의 옆에 order 문법을 사용하여 구현할 수 있으며, 양수로 설정할 수 있습니다.
Mermaid 는 order 문법이 지정한 우선 순서를 따릅니다.
- 메인 브랜치는 기본 순서 값이 0이므로 항상 먼저 표시됩니다. (구성의 mainBranchOrder 문법으로 순서를 수정하여 0에서 변경하지 않는 한)
- 다음으로, order 가 없는 모든 브랜치는 그래프 코드에 나타나는 순서대로 표시됩니다.
- 다음으로, order 가 있는 모든 브랜치는 order 값 순서대로 표시됩니다.
모든 브랜치의 순서를 완전히 제어하려면 모든 브랜치에 order 를 정의해야 합니다.
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
위 그림에서 모든 브랜치가 정의된 순서를 따릅니다.
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchOrder: 2
---
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
위 그림에서 순서를 지정하지 않은 모든 브랜치는 정의된 순서대로 그려집니다. 이후 test4 브랜치가 순서가 1이므로 그려집니다. 다음으로 main 브랜치가 순서가 2이므로 그려집니다. 마지막으로 test1 브랜치가 순서가 3이므로 그려집니다.
참고: mainBranchOrder 를 2로 덮어썼기 때문에 main 브랜치는 시작 부분에 그려지지 않고 순서대로 표시됩니다.
여기에서는 기본 메인 브랜치 이름을 MetroLine1 로 변경합니다.
방향
Mermaid 는 세 가지 방향을 지원합니다: 왼쪽에서 오른쪽(기본), 위에서 아래, 아래에서 위.
왼쪽에서 오른쪽(기본, LR:)
Mermaid 에서 기본 방향은 왼쪽에서 오른쪽으로 실행되며, 브랜치는 서로 위에 쌓입니다.
그러나 gitGraph 문법 뒤에 LR: 을 사용하여 이 값을 명시적으로 설정할 수 있습니다.
복사
임베드
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
위에서 아래 (TB:)
위에서 아래 방향에서는 커밋이 차트의 위에서 아래로 진행되고, 브랜치는 나란히 배열됩니다.
이런 방식으로 그래프를 방향 지정하려면 gitGraph 문법 뒤에 TB: 를 추가해야 합니다.
복사
임베드
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
아래에서 위로 (BT:)
아래에서 위 방향에서는 커밋이 차트의 아래에서 위로 진행되고, 브랜치는 나란히 배열됩니다.
이런 방식으로 그래프를 방향 지정하려면 gitGraph 문법 뒤에 BT: 를 추가해야 합니다.
복사
임베드
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
임시 커밋(parallelCommits: false)
복사
임베드
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
병렬 커밋 (parallelCommits: true)
복사
임베드
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
테마
Mermaid 는 일련의 사용자 정의 테마를 지원하며, 이를 사용하여 자신에게 맞는 테마를 찾을 수 있습니다. 참고: 기존 테마의 변수를 재정의하여 자신만의 사용자 정의 테마를 만들 수도 있습니다.
다음은 다양한 사용자 정의 테마 옵션입니다:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
테마를 변경하려면 initialize 문법을 사용할 수 있습니다.
기본 테마
복사
임베드
---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
숲 테마
복사
임베드
---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
기본 테마
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
어두운 테마
복사
임베드
---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
중립 테마
복사
임베드
---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
테마 변수를 사용한 사용자 정의
Mermaid 는 테마 변수를 사용하여 차트를 사용자 정의할 수 있도록 하며, 이러한 변수는 차트의 각 요소의 모양과 스타일을 제어합니다.
이해를 돕기 위해 default 테마를 예로 들면, 테마 변수의 기본값은 테마에서 자동으로 선택됩니다.
default 테마를 사용하여 브랜치의 색상을 설정합니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Mermaid 는 기본값을 덮어쓰기 위한 테마 변수를 지원하며, 최대 8개 브랜치까지 덮어쓸 수 있습니다. 즉, 테마 변수를 사용하여 최대 8개 브랜치의 색상을 설정할 수 있습니다. 8개를 초과하는 브랜치의 경우 테마 변수가 순환 방식으로 반복 사용됩니다. 즉, 9번째 브랜치는 1번째 브랜치의 스타일을 사용합니다.
사용자 정의 브랜치 색상
git0 부터 git7 까지의 테마 변수를 사용하여 브랜치 색상을 사용자 정의할 수 있습니다. Mermaid 는 최대 8개 브랜치의 색상을 설정할 수 있도록 하며, git0 변수는 첫 번째 브랜치의 색상을 제어하고, git1 은 두 번째 브랜치의 색상을 제어하며 이런 식으로 이어집니다.
참고: 이러한 테마 변수의 기본값은 선택된 테마에서 선택됩니다. 기본값을 덮어쓰려면 initialize 문법을 사용하여 사용자 정의 테마 변수 값을 추가할 수 있습니다.
예:
이제 git0 부터 git3 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'git0': '#ff0000'
'git1': '#00ff00'
'git2': '#0000ff'
'git3': '#ff00ff'
'git4': '#00ffff'
'git5': '#ffff00'
'git6': '#ff00ff'
'git7': '#00ffff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
사용자 정의 브랜치 레이블 색상
gitBranchLabel0 부터 gitBranchLabel7 까지의 테마 변수를 사용하여 브랜치 레이블 색상을 사용자 정의할 수 있습니다. Mermaid 는 최대 8개 브랜치의 색상을 설정할 수 있도록 하며, gitBranchLabel0 변수는 첫 번째 브랜치 레이블의 색상을 제어하고, gitBranchLabel1 변수는 두 번째 브랜치 레이블의 색상을 제어하며 이런 식으로 이어집니다.
default 테마를 사용하여 브랜치 레이블의 색상을 설정하는 방법을 살펴보겠습니다:
이제 gitBranchLabel0 부터 gitBranchLabel2 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitBranchLabel0': '#ffffff'
'gitBranchLabel1': '#ffffff'
'gitBranchLabel2': '#ffffff'
'gitBranchLabel3': '#ffffff'
'gitBranchLabel4': '#ffffff'
'gitBranchLabel5': '#ffffff'
'gitBranchLabel6': '#ffffff'
'gitBranchLabel7': '#ffffff'
'gitBranchLabel8': '#ffffff'
'gitBranchLabel9': '#ffffff'
---
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
여기에서 branch8 과 branch9 의 색상과 스타일이 각각 인덱스 위치 0(main) 과 1(branch1) 의 브랜치에서 선택되는 것을 볼 수 있습니다.
사용자 정의 커밋 색상
commitLabelColor 와 commitLabelBackground 테마 변수를 사용하여 각각 커밋 레이블의 색상과 배경색을 사용자 정의할 수 있습니다.
예: 이제 commitLabelColor 부터 commitLabelBackground 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
mermaid.grammar_mermaid_commit_label_define_label_font_big_small
commitLabelFontSize 테마 변수를 사용하여 커밋 레이블의 글꼴 크기를 사용자 정의할 수 있습니다.
예: 이제 commitLabelFontSize 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
commitLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
사용자 정의 레이블 글꼴 크기
tagLabelFontSize 테마 변수를 사용하여 레이블의 글꼴 크기를 사용자 정의할 수 있습니다.
예: 이제 tagLabelFontSize 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
tagLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
사용자 정의 레이블 색상
tagLabelColor, tagLabelBackground 및 tagLabelBorder 테마 변수를 사용하여 레이블을 사용자 정의하고, 각각 레이블 텍스트 색상, 레이블 배경색 및 레이블 테두리를 변경할 수 있습니다.
예: 이제 tagLabelColor, tagLabelBackground 및 tagLabelBorder 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
tagLabelColor: '#ff0000'
tagLabelBackground: '#00ff00'
tagLabelBorder: '#0000ff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
사용자 정의 하이라이트 커밋 색상
gitInv0 부터 gitInv7 까지의 테마 변수를 사용하여 소속 브랜치에 따라 하이라이트 커밋의 색상을 사용자 정의할 수 있습니다. Mermaid 는 최대 8개 브랜치에 대해 특정 하이라이트 커밋의 색상을 설정할 수 있도록 하며, gitInv0 변수는 첫 번째 브랜치의 하이라이트 커밋 색상을 제어하고, gitInv1 변수는 두 번째 브랜치의 하이라이트 커밋 색상을 제어하며 이런 식으로 이어집니다.
이제 git0 부터 git3 변수의 기본값을 덮어써 보겠습니다:
복사
임베드
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
