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-операциям вы можете очень легко и быстро строить диаграммы Git в Mermaid. Имена сущностей обычно начинаются с заглавной буквы, хотя общепринятого стандарта на этот счёт нет, и в Mermaid это не обязательно.
Примечание: checkout и switch можно использовать взаимозаменяемо.
Синтаксис
Синтаксис Mermaid для диаграмм Git очень прямой и простой. Он использует декларативный подход: каждый коммит отрисовывается на временной шкале диаграммы Git в порядке его появления в коде. По сути, он следует порядку вставки каждой команды.
Сначала объявите тип диаграммы с помощью синтаксиса gitGraph. Синтаксис gitGraph сообщает Mermaid, что вы хотите построить диаграмму Git, и соответствующим образом разбирает код диаграммы.
Каждая диаграмма Git инициализируется веткой main. Если вы не создадите другие ветки, по умолчанию коммиты попадают в главную ветку. Это обусловлено тем, как работает git: в начале вы всегда начинаете с главной ветки. По умолчанию ветка main устанавливается как текущая.
Вы можете зарегистрировать коммит в текущей ветке с помощью синтаксиса commit; давайте посмотрим, как это работает:
Простая диаграмма git, показывающая три коммита в ветке по умолчанию main:
Копировать
Встраивание
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 при объявлении коммита.
Добавление метки
Для заданного коммита вы можете украсить его с помощью tag, подобно понятию метки или релиза в git. Вы можете прикрепить пользовательскую метку с помощью свойства 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, так как она становится текущей.
Переключение на существующую ветку
В Mermaid для переключения на существующую ветку можно использовать синтаксис checkout, при этом также нужно указать имя существующей ветки. Если ветка с указанным именем не найдена, это приведёт к ошибке в консоли. Пример использования: checkout develop
Когда Mermaid читает синтаксис checkout, она находит ветку с указанным именем и устанавливает её как текущую. Это эквивалентно переключению на ветку в Git.
Копировать
Встраивание
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
В этом примере мы сначала начинаем с ветки по умолчанию main и отправляем в неё два коммита. Затем мы создаём ветку 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 для объявления коммита.
- Заданный коммит не должен существовать в текущей ветке; выбранный коммит всегда должен происходить из ветки, отличной от текущей.
- В текущей ветке должен быть хотя бы один коммит, прежде чем можно будет выполнить cherry-pick, иначе возникнет ошибка.
- При выборе коммита слияния необходимо указать ID родительского коммита. Если опустить свойство parent или указать недействительный 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"
Особые параметры конфигурации
В диаграмме Git Mermaid можно настроить следующие параметры:
- 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. (Если только её порядок не был изменён с 0 с помощью синтаксиса mainBranchOrder в конфигурации.)
- Далее все ветки без 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 направление по умолчанию — слева направо, а ветки накладываются друг на друга.
Однако вы можете явно задать это значение с помощью LR: после синтаксиса gitGraph.
Копировать
Встраивание
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Сверху вниз (TB:)
В направлении сверху вниз коммиты идут от верхней части диаграммы к нижней, а ветки располагаются рядом.
Чтобы ориентировать диаграмму таким образом, вам нужно добавить TB: после синтаксиса gitGraph.
Копировать
Встраивание
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Снизу вверх (BT:)
В направлении снизу вверх коммиты идут от нижней части диаграммы к верхней, а ветки располагаются рядом.
Чтобы ориентировать диаграмму таким образом, вам нужно добавить BT: после синтаксиса gitGraph.
Копировать
Встраивание
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
