marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into patch-1

Browse Source
This commit is contained in:
generrosity
2025-04-17 23:02:53 +12:00
committed by GitHub
parent ceef0558be f5d27bf7ef
commit dbbe014c5b
3 changed files with 523 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
cypress/timings.json
View File

@@ -2,211 +2,211 @@
"durations": [ "durations": [
{ {
"spec": "cypress/integration/other/configuration.spec.js", "spec": "cypress/integration/other/configuration.spec.js",
"duration": 5475 "duration": 5450
}, },
{ {
"spec": "cypress/integration/other/external-diagrams.spec.js", "spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 2037 "duration": 2004
}, },
{ {
"spec": "cypress/integration/other/ghsa.spec.js", "spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3207 "duration": 3183
}, },
{ {
"spec": "cypress/integration/other/iife.spec.js", "spec": "cypress/integration/other/iife.spec.js",
"duration": 1915 "duration": 1913
}, },
{ {
"spec": "cypress/integration/other/interaction.spec.js", "spec": "cypress/integration/other/interaction.spec.js",
"duration": 10952 "duration": 10944
}, },
{ {
"spec": "cypress/integration/other/rerender.spec.js", "spec": "cypress/integration/other/rerender.spec.js",
"duration": 1872 "duration": 1938
}, },
{ {
"spec": "cypress/integration/other/xss.spec.js", "spec": "cypress/integration/other/xss.spec.js",
"duration": 26686 "duration": 26753
}, },
{ {
"spec": "cypress/integration/rendering/appli.spec.js", "spec": "cypress/integration/rendering/appli.spec.js",
"duration": 2629 "duration": 2571
}, },
{ {
"spec": "cypress/integration/rendering/architecture.spec.ts", "spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 104 "duration": 110
}, },
{ {
"spec": "cypress/integration/rendering/block.spec.js", "spec": "cypress/integration/rendering/block.spec.js",
"duration": 14765 "duration": 14697
}, },
{ {
"spec": "cypress/integration/rendering/c4.spec.js", "spec": "cypress/integration/rendering/c4.spec.js",
"duration": 4913 "duration": 4705
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 36667 "duration": 35841
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 33813 "duration": 34279
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js", "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 20441 "duration": 20641
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 32504 "duration": 33020
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram.spec.js", "spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 13772 "duration": 13546
}, },
{ {
"spec": "cypress/integration/rendering/conf-and-directives.spec.js", "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 7978 "duration": 8072
}, },
{ {
"spec": "cypress/integration/rendering/current.spec.js", "spec": "cypress/integration/rendering/current.spec.js",
"duration": 2101 "duration": 2083
}, },
{ {
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js", "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 76556 "duration": 78269
}, },
{ {
"spec": "cypress/integration/rendering/erDiagram.spec.js", "spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 12756 "duration": 12578
}, },
{ {
"spec": "cypress/integration/rendering/errorDiagram.spec.js", "spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 2766 "duration": 2784
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-elk.spec.js", "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 35641 "duration": 36205
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js", "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 26915 "duration": 26627
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts", "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 21171 "duration": 21332
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-v2.spec.js", "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 37844 "duration": 37328
}, },
{ {
"spec": "cypress/integration/rendering/flowchart.spec.js", "spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 26254 "duration": 25914
}, },
{ {
"spec": "cypress/integration/rendering/gantt.spec.js", "spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 15149 "duration": 15383
}, },
{ {
"spec": "cypress/integration/rendering/gitGraph.spec.js", "spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 45049 "duration": 45226
}, },
{ {
"spec": "cypress/integration/rendering/iconShape.spec.ts", "spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 250225 "duration": 251094
}, },
{ {
"spec": "cypress/integration/rendering/imageShape.spec.ts", "spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 51531 "duration": 50916
}, },
{ {
"spec": "cypress/integration/rendering/info.spec.ts", "spec": "cypress/integration/rendering/info.spec.ts",
"duration": 2455 "duration": 2489
}, },
{ {
"spec": "cypress/integration/rendering/journey.spec.js", "spec": "cypress/integration/rendering/journey.spec.js",
"duration": 3181 "duration": 5988
}, },
{ {
"spec": "cypress/integration/rendering/kanban.spec.ts", "spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 6298 "duration": 6225
}, },
{ {
"spec": "cypress/integration/rendering/katex.spec.js", "spec": "cypress/integration/rendering/katex.spec.js",
"duration": 3065 "duration": 3009
}, },
{ {
"spec": "cypress/integration/rendering/marker_unique_id.spec.js", "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2521 "duration": 2426
}, },
{ {
"spec": "cypress/integration/rendering/mindmap.spec.ts", "spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 9341 "duration": 9306
}, },
{ {
"spec": "cypress/integration/rendering/newShapes.spec.ts", "spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 132809 "duration": 134419
}, },
{ {
"spec": "cypress/integration/rendering/oldShapes.spec.ts", "spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 101299 "duration": 102434
}, },
{ {
"spec": "cypress/integration/rendering/packet.spec.ts", "spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 3481 "duration": 3373
}, },
{ {
"spec": "cypress/integration/rendering/pie.spec.ts", "spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 4878 "duration": 4898
}, },
{ {
"spec": "cypress/integration/rendering/quadrantChart.spec.js", "spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 7416 "duration": 7578
}, },
{ {
"spec": "cypress/integration/rendering/radar.spec.js", "spec": "cypress/integration/rendering/radar.spec.js",
"duration": 4554 "duration": 4526
}, },
{ {
"spec": "cypress/integration/rendering/requirement.spec.js", "spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2068 "duration": 2172
}, },
{ {
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js", "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 47583 "duration": 47175
}, },
{ {
"spec": "cypress/integration/rendering/sankey.spec.ts", "spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 5792 "duration": 5717
}, },
{ {
"spec": "cypress/integration/rendering/sequencediagram.spec.js", "spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 33035 "duration": 32556
}, },
{ {
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js", "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 22716 "duration": 22572
}, },
{ {
"spec": "cypress/integration/rendering/stateDiagram.spec.js", "spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 13868 "duration": 14064
}, },
{ {
"spec": "cypress/integration/rendering/theme.spec.js", "spec": "cypress/integration/rendering/theme.spec.js",
"duration": 26376 "duration": 26565
}, },
{ {
"spec": "cypress/integration/rendering/timeline.spec.ts", "spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 5872 "duration": 6233
}, },
{ {
"spec": "cypress/integration/rendering/xyChart.spec.js", "spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 9469 "duration": 17750
}, },
{ {
"spec": "cypress/integration/rendering/zenuml.spec.js", "spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 2742 "duration": 2696
} }
] ]
} }

428
docs/syntax/gitgraph.md
View File

@@ -432,7 +432,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
@@ -478,7 +484,13 @@ Usage example:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%% ---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -534,7 +546,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"
@@ -553,7 +571,13 @@ gitGraph
``` ```
```mermaid ```mermaid
%%{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"
@@ -574,7 +598,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"
@@ -593,7 +623,13 @@ gitGraph
``` ```
```mermaid ```mermaid
%%{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"
@@ -618,7 +654,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
@@ -664,7 +707,14 @@ Usage example:
``` ```
```mermaid ```mermaid
%%{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
@@ -716,7 +766,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"
@@ -740,7 +798,15 @@ Usage example:
``` ```
```mermaid ```mermaid
%%{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"
@@ -782,7 +848,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
@@ -792,7 +865,14 @@ Usage example:
``` ```
```mermaid ```mermaid
%%{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
@@ -806,7 +886,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
@@ -817,7 +905,15 @@ Usage example:
``` ```
```mermaid ```mermaid
%%{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
@@ -1046,7 +1142,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
@@ -1092,7 +1192,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% ---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -1140,7 +1244,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
@@ -1186,7 +1294,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% ---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -1234,7 +1346,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
@@ -1280,7 +1396,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% ---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph gitGraph
commit type:HIGHLIGHT commit type:HIGHLIGHT
branch hotfix branch hotfix
@@ -1328,7 +1448,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
@@ -1374,7 +1498,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% ---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -1422,7 +1550,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
@@ -1468,7 +1600,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% ---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -1522,7 +1658,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
@@ -1538,7 +1678,11 @@ See how the default theme is used to set the colors for the branches:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% ---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph gitGraph
commit commit
branch develop branch develop
@@ -1569,16 +1713,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
@@ -1595,16 +1743,20 @@ Now let's override the default values for the `git0` to `git3` variables:
``` ```
```mermaid ```mermaid
%%{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
@@ -1631,18 +1783,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
@@ -1659,18 +1815,22 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
``` ```
```mermaid ```mermaid
%%{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
@@ -1696,10 +1856,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
@@ -1716,10 +1880,14 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
``` ```
```mermaid ```mermaid
%%{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
@@ -1745,11 +1913,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
@@ -1766,11 +1938,15 @@ Now let's override the default values for the `commitLabelFontSize` variable:
``` ```
```mermaid ```mermaid
%%{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
@@ -1796,11 +1972,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
@@ -1817,11 +1997,15 @@ Now let's override the default values for the `tagLabelFontSize` variable:
``` ```
```mermaid ```mermaid
%%{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
@@ -1846,11 +2030,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
@@ -1867,11 +2055,15 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
``` ```
```mermaid ```mermaid
%%{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
@@ -1898,9 +2090,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
@@ -1917,9 +2113,13 @@ Now let's override the default values for the `git0` to `git3` variables:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'gitInv0': '#ff0000' config:
} } }%% logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph gitGraph
commit commit
branch develop branch develop

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