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

Merge branch 'develop' into feature/3250/add_vertline_to_gantt_plot

Browse Source
This commit is contained in:
Udval E.
2025-04-17 12:21:17 -04:00
committed by GitHub
parent 62b4228df4 a3fed10d55
commit e49911e748
15 changed files with 535 additions and 343 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
} }
] ]
} }

72
docs/config/theming.md
View File

@@ -53,18 +53,6 @@ Example of `init` directive setting the `theme` to `forest`:
a --> b a --> b
``` ```
```mermaid-example
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
## Customizing Themes with `themeVariables` ## Customizing Themes with `themeVariables`
@@ -139,66 +127,6 @@ Example of modifying `themeVariables` using the `init` directive:
end end
``` ```
```mermaid-example
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
## Color and Color Calculation ## Color and Color Calculation
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc. To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

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

2
packages/mermaid/src/docs/config/8.6.0_docs.md
View File

@@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description.
**for example**: **for example**:
```mermaid ```mermaid-example
%%{init: {"theme": "default", "logLevel": 1 }}%% %%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR graph LR
a-->b a-->b

2
packages/mermaid/src/docs/config/directives.md
View File

@@ -88,7 +88,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
```mermaid ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
... ...

4
packages/mermaid/src/docs/config/math.md
View File

@@ -10,7 +10,7 @@ Note that at the moment, the only supported diagrams are below:
### Flowcharts ### Flowcharts
```mermaid ```mermaid-example
graph LR graph LR
A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$") A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$") A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
@@ -20,7 +20,7 @@ Note that at the moment, the only supported diagrams are below:
### Sequence ### Sequence
```mermaid ```mermaid-example
sequenceDiagram sequenceDiagram
autonumber autonumber
participant 1 as $$\alpha$$ participant 1 as $$\alpha$$

36
packages/mermaid/src/docs/config/theming.md
View File

@@ -41,12 +41,6 @@ Example of `init` directive setting the `theme` to `forest`:
a --> b a --> b
``` ```
```mermaid
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
## Customizing Themes with `themeVariables` ## Customizing Themes with `themeVariables`
@@ -91,36 +85,6 @@ Example of modifying `themeVariables` using the `init` directive:
end end
``` ```
```mermaid
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
## Color and Color Calculation ## Color and Color Calculation
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc. To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

2
packages/mermaid/src/docs/intro/getting-started.md
View File

@@ -41,7 +41,7 @@ In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the ren
Here is an example of Mermaid code and its rendered result: Here is an example of Mermaid code and its rendered result:
```mermaid ```mermaid-example
graph TD graph TD
A[Enter Chart Definition] --> B(Preview) A[Enter Chart Definition] --> B(Preview)
B --> C{decide} B --> C{decide}

4
packages/mermaid/src/docs/intro/syntax-reference.md
View File

@@ -83,7 +83,7 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo
You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example: You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
```mermaid ```mermaid-example
--- ---
config: config:
look: handDrawn look: handDrawn
@@ -108,7 +108,7 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y
You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example: You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
```mermaid ```mermaid-example
--- ---
config: config:
layout: elk layout: elk

2
packages/mermaid/src/docs/syntax/block.md
View File

@@ -7,7 +7,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
## Introduction to Block Diagrams ## Introduction to Block Diagrams
```mermaid ```mermaid-example
block-beta block-beta
columns 1 columns 1
db(("DB")) db(("DB"))

2
packages/mermaid/src/docs/syntax/classDiagram.md
View File

@@ -248,7 +248,7 @@ classE o-- classF : aggregation
Relations can logically represent an N:M association: Relations can logically represent an N:M association:
```mermaid ```mermaid-example
classDiagram classDiagram
Animal <|--|> Zebra Animal <|--|> Zebra
``` ```

2
packages/mermaid/src/docs/syntax/examples.md
View File

@@ -141,7 +141,7 @@ sequenceDiagram
## A commit flow diagram. ## A commit flow diagram.
```mermaid ```mermaid-example
gitGraph: gitGraph:
commit "Ashish" commit "Ashish"
branch newbranch branch newbranch

2
packages/mermaid/src/docs/syntax/gantt.md
View File

@@ -273,7 +273,7 @@ gantt
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings. The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
```mermaid ```mermaid-example
--- ---
displayMode: compact displayMode: compact
--- ---

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

2
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -442,7 +442,7 @@ sequenceDiagram
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```mermaid ```mermaid-example
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
%% this is a comment %% this is a comment