marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-20 20:54:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Switch from %%{init to config:

Browse Source 
Use format which works reliably...
This commit is contained in:
Josh Soref
2025-04-16 16:31:54 -04:00
parent 12b6371abf
commit 8975a1907a
1 changed files with 157 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
packages/mermaid/src/docs/syntax/gitgraph.md
View File

@@ -290,7 +290,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
Usage example: Usage example:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -346,7 +352,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
Usage example: Rotated commit labels Usage example: Rotated commit labels
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: true
---
gitGraph gitGraph
commit id: "feat(api): ..." commit id: "feat(api): ..."
commit id: "a" commit id: "a"
@@ -367,7 +379,13 @@ gitGraph
Usage example: Horizontal commit labels Usage example: Horizontal commit labels
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: false
---
gitGraph gitGraph
commit id: "feat(api): ..." commit id: "feat(api): ..."
commit id: "a" commit id: "a"
@@ -392,7 +410,14 @@ Sometimes you may want to hide the commit labels from the diagram. You can do th
Usage example: Usage example:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
showCommitLabel: false
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -444,7 +469,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
Usage example: Usage example:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchName: 'MetroLine1'
---
gitGraph gitGraph
commit id:"NewYork" commit id:"NewYork"
commit id:"Dallas" commit id:"Dallas"
@@ -486,7 +519,14 @@ To fully control the order of all the branches, you must define `order` for all
Usage example: Usage example:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph gitGraph
commit commit
branch test1 order: 3 branch test1 order: 3
@@ -500,7 +540,15 @@ Look at the diagram, all the branches are following the order defined.
Usage example: Usage example:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchOrder: 2
---
gitGraph gitGraph
commit commit
branch test1 order: 3 branch test1 order: 3
@@ -652,7 +700,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
### Base Theme ### Base Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% ---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -700,7 +752,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
### Forest Theme ### Forest Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% ---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -748,7 +804,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
### Default Theme ### Default Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% ---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph gitGraph
commit type:HIGHLIGHT commit type:HIGHLIGHT
branch hotfix branch hotfix
@@ -796,7 +856,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
### Dark Theme ### Dark Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% ---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -844,7 +908,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
### Neutral Theme ### Neutral Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% ---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -898,7 +966,11 @@ For understanding let us take a sample diagram with theme `default`, the default
See how the default theme is used to set the colors for the branches: See how the default theme is used to set the colors for the branches:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% ---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -929,16 +1001,20 @@ Example:
Now let's override the default values for the `git0` to `git3` variables: Now let's override the default values for the `git0` to `git3` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'git0': '#ff0000', config:
'git1': '#00ff00', logLevel: 'debug'
'git2': '#0000ff', theme: 'default'
'git3': '#ff00ff', themeVariables:
'git4': '#00ffff', 'git0': '#ff0000'
'git5': '#ffff00', 'git1': '#00ff00'
'git6': '#ff00ff', 'git2': '#0000ff'
'git7': '#00ffff' 'git3': '#ff00ff'
} } }%% 'git4': '#00ffff'
'git5': '#ffff00'
'git6': '#ff00ff'
'git7': '#00ffff'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -965,18 +1041,22 @@ Lets see how the default theme is used to set the colors for the branch labels:
Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables: Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'gitBranchLabel0': '#ffffff', config:
'gitBranchLabel1': '#ffffff', logLevel: 'debug'
'gitBranchLabel2': '#ffffff', theme: 'default'
'gitBranchLabel3': '#ffffff', themeVariables:
'gitBranchLabel4': '#ffffff', 'gitBranchLabel0': '#ffffff'
'gitBranchLabel5': '#ffffff', 'gitBranchLabel1': '#ffffff'
'gitBranchLabel6': '#ffffff', 'gitBranchLabel2': '#ffffff'
'gitBranchLabel7': '#ffffff', 'gitBranchLabel3': '#ffffff'
'gitBranchLabel8': '#ffffff', 'gitBranchLabel4': '#ffffff'
'gitBranchLabel9': '#ffffff' 'gitBranchLabel5': '#ffffff'
} } }%% 'gitBranchLabel6': '#ffffff'
'gitBranchLabel7': '#ffffff'
'gitBranchLabel8': '#ffffff'
'gitBranchLabel9': '#ffffff'
---
gitGraph gitGraph
checkout main checkout main
branch branch1 branch branch1
@@ -1002,10 +1082,14 @@ Example:
Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables: Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'commitLabelColor': '#ff0000', config:
'commitLabelBackground': '#00ff00' logLevel: 'debug'
} } }%% theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -1031,11 +1115,15 @@ Example:
Now let's override the default values for the `commitLabelFontSize` variable: Now let's override the default values for the `commitLabelFontSize` variable:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'commitLabelColor': '#ff0000', config:
'commitLabelBackground': '#00ff00', logLevel: 'debug'
'commitLabelFontSize': '16px' theme: 'default'
} } }%% themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
commitLabelFontSize: '16px'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -1061,11 +1149,15 @@ Example:
Now let's override the default values for the `tagLabelFontSize` variable: Now let's override the default values for the `tagLabelFontSize` variable:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'commitLabelColor': '#ff0000', config:
'commitLabelBackground': '#00ff00', logLevel: 'debug'
'tagLabelFontSize': '16px' theme: 'default'
} } }%% themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
tagLabelFontSize: '16px'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -1090,11 +1182,15 @@ Example:
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables: Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'tagLabelColor': '#ff0000', config:
'tagLabelBackground': '#00ff00', logLevel: 'debug'
'tagLabelBorder': '#0000ff' theme: 'default'
} } }%% themeVariables:
tagLabelColor: '#ff0000'
tagLabelBackground: '#00ff00'
tagLabelBorder: '#0000ff'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -1121,9 +1217,13 @@ Example:
Now let's override the default values for the `git0` to `git3` variables: Now let's override the default values for the `git0` to `git3` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'gitInv0': '#ff0000' config:
} } }%% logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph gitGraph
commit commit
branch develop branch develop