mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-12 20:09:46 +02:00
Merge branch 'develop' into sidv/examples
This commit is contained in:
Sidharth Vinod
@@ -53,18 +53,6 @@ Example of `init` directive setting the `theme` to `forest`:
|
||||
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.
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
@@ -139,66 +127,6 @@ Example of modifying `themeVariables` using the `init` directive:
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
@@ -40,6 +40,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
|
||||
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
|
||||
- [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
|
||||
- [Mermaid plus for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
|
||||
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
|
||||
- [Doctave](https://www.doctave.com/) ✅
|
||||
@@ -267,7 +268,5 @@ Communication tools and platforms
|
||||
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
|
||||
- [Reveal CK](https://github.com/jedcn/reveal-ck)
|
||||
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
|
||||
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
|
||||
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
|
||||
|
||||
<!--- cspell:ignore Blazorade HueHive --->
|
||||
|
||||
@@ -1193,12 +1193,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
```
|
||||
|
||||
In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
|
||||
@@ -1229,13 +1229,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
e1@{ animation: fast }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
e1@{ animation: fast }
|
||||
```
|
||||
|
||||
@@ -1247,14 +1247,14 @@ You can also animate edges by assigning a class to them and then defining animat
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
||||
class e1 animate
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
||||
class e1 animate
|
||||
```
|
||||
|
||||
@@ -432,7 +432,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -478,7 +484,13 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -534,7 +546,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
|
||||
Usage example: Rotated commit labels
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -553,7 +571,13 @@ gitGraph
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -574,7 +598,13 @@ gitGraph
|
||||
Usage example: Horizontal commit labels
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -593,7 +623,13 @@ gitGraph
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
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:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
showCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -664,7 +707,14 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
showCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -716,7 +766,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
|
||||
Usage 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
|
||||
commit id:"NewYork"
|
||||
commit id:"Dallas"
|
||||
@@ -740,7 +798,15 @@ Usage example:
|
||||
```
|
||||
|
||||
```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
|
||||
commit id:"NewYork"
|
||||
commit id:"Dallas"
|
||||
@@ -782,7 +848,14 @@ To fully control the order of all the branches, you must define `order` for all
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -792,7 +865,14 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -806,7 +886,15 @@ Look at the diagram, all the branches are following the order defined.
|
||||
Usage 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
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -817,7 +905,15 @@ Usage example:
|
||||
```
|
||||
|
||||
```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
|
||||
commit
|
||||
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
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1092,7 +1192,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1140,7 +1244,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1186,7 +1294,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1234,7 +1346,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit type:HIGHLIGHT
|
||||
branch hotfix
|
||||
@@ -1280,7 +1396,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit type:HIGHLIGHT
|
||||
branch hotfix
|
||||
@@ -1328,7 +1448,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1374,7 +1498,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1422,7 +1550,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1468,7 +1600,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
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:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1538,7 +1678,11 @@ See how the default theme is used to set the colors for the branches:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1569,16 +1713,20 @@ Example:
|
||||
Now let's override the default values for the `git0` to `git3` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'git0': '#ff0000',
|
||||
'git1': '#00ff00',
|
||||
'git2': '#0000ff',
|
||||
'git3': '#ff00ff',
|
||||
'git4': '#00ffff',
|
||||
'git5': '#ffff00',
|
||||
'git6': '#ff00ff',
|
||||
'git7': '#00ffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'git0': '#ff0000'
|
||||
'git1': '#00ff00'
|
||||
'git2': '#0000ff'
|
||||
'git3': '#ff00ff'
|
||||
'git4': '#00ffff'
|
||||
'git5': '#ffff00'
|
||||
'git6': '#ff00ff'
|
||||
'git7': '#00ffff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1595,16 +1743,20 @@ Now let's override the default values for the `git0` to `git3` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'git0': '#ff0000',
|
||||
'git1': '#00ff00',
|
||||
'git2': '#0000ff',
|
||||
'git3': '#ff00ff',
|
||||
'git4': '#00ffff',
|
||||
'git5': '#ffff00',
|
||||
'git6': '#ff00ff',
|
||||
'git7': '#00ffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'git0': '#ff0000'
|
||||
'git1': '#00ff00'
|
||||
'git2': '#0000ff'
|
||||
'git3': '#ff00ff'
|
||||
'git4': '#00ffff'
|
||||
'git5': '#ffff00'
|
||||
'git6': '#ff00ff'
|
||||
'git7': '#00ffff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -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:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitBranchLabel0': '#ffffff',
|
||||
'gitBranchLabel1': '#ffffff',
|
||||
'gitBranchLabel2': '#ffffff',
|
||||
'gitBranchLabel3': '#ffffff',
|
||||
'gitBranchLabel4': '#ffffff',
|
||||
'gitBranchLabel5': '#ffffff',
|
||||
'gitBranchLabel6': '#ffffff',
|
||||
'gitBranchLabel7': '#ffffff',
|
||||
'gitBranchLabel8': '#ffffff',
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitBranchLabel0': '#ffffff'
|
||||
'gitBranchLabel1': '#ffffff'
|
||||
'gitBranchLabel2': '#ffffff'
|
||||
'gitBranchLabel3': '#ffffff'
|
||||
'gitBranchLabel4': '#ffffff'
|
||||
'gitBranchLabel5': '#ffffff'
|
||||
'gitBranchLabel6': '#ffffff'
|
||||
'gitBranchLabel7': '#ffffff'
|
||||
'gitBranchLabel8': '#ffffff'
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
---
|
||||
gitGraph
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1659,18 +1815,22 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitBranchLabel0': '#ffffff',
|
||||
'gitBranchLabel1': '#ffffff',
|
||||
'gitBranchLabel2': '#ffffff',
|
||||
'gitBranchLabel3': '#ffffff',
|
||||
'gitBranchLabel4': '#ffffff',
|
||||
'gitBranchLabel5': '#ffffff',
|
||||
'gitBranchLabel6': '#ffffff',
|
||||
'gitBranchLabel7': '#ffffff',
|
||||
'gitBranchLabel8': '#ffffff',
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitBranchLabel0': '#ffffff'
|
||||
'gitBranchLabel1': '#ffffff'
|
||||
'gitBranchLabel2': '#ffffff'
|
||||
'gitBranchLabel3': '#ffffff'
|
||||
'gitBranchLabel4': '#ffffff'
|
||||
'gitBranchLabel5': '#ffffff'
|
||||
'gitBranchLabel6': '#ffffff'
|
||||
'gitBranchLabel7': '#ffffff'
|
||||
'gitBranchLabel8': '#ffffff'
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
---
|
||||
gitGraph
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1696,10 +1856,14 @@ Example:
|
||||
Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1716,10 +1880,14 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1745,11 +1913,15 @@ Example:
|
||||
Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'commitLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
commitLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1766,11 +1938,15 @@ Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'commitLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
commitLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1796,11 +1972,15 @@ Example:
|
||||
Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'tagLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
tagLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1817,11 +1997,15 @@ Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'tagLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
tagLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1846,11 +2030,15 @@ Example:
|
||||
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'tagLabelColor': '#ff0000',
|
||||
'tagLabelBackground': '#00ff00',
|
||||
'tagLabelBorder': '#0000ff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
tagLabelColor: '#ff0000'
|
||||
tagLabelBackground: '#00ff00'
|
||||
tagLabelBorder: '#0000ff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1867,11 +2055,15 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'tagLabelColor': '#ff0000',
|
||||
'tagLabelBackground': '#00ff00',
|
||||
'tagLabelBorder': '#0000ff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
tagLabelColor: '#ff0000'
|
||||
tagLabelBackground: '#00ff00'
|
||||
tagLabelBorder: '#0000ff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1898,9 +2090,13 @@ Example:
|
||||
Now let's override the default values for the `git0` to `git3` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitInv0': '#ff0000'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitInv0': '#ff0000'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1917,9 +2113,13 @@ Now let's override the default values for the `git0` to `git3` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitInv0': '#ff0000'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitInv0': '#ff0000'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
|
||||
@@ -107,17 +107,18 @@ xychart-beta
|
||||
|
||||
## Chart Configurations
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| ------------------------ | ---------------------------------------------- | :-----------: |
|
||||
| width | Width of the chart | 700 |
|
||||
| height | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| showTitle | Title to be shown or not | true |
|
||||
| xAxis | xAxis configuration | AxisConfig |
|
||||
| yAxis | yAxis configuration | AxisConfig |
|
||||
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
|
||||
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
|
||||
| Parameter | Description | Default value |
|
||||
| ------------------------ | ------------------------------------------------------------- | :-----------: |
|
||||
| width | Width of the chart | 700 |
|
||||
| height | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| showTitle | Title to be shown or not | true |
|
||||
| xAxis | xAxis configuration | AxisConfig |
|
||||
| yAxis | yAxis configuration | AxisConfig |
|
||||
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
|
||||
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
|
||||
| showDataLabel | Should show the value corresponding to the bar within the bar | false |
|
||||
|
||||
### AxisConfig
|
||||
|
||||
@@ -163,6 +164,7 @@ config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
@@ -181,6 +183,7 @@ config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
|
||||
Reference in New Issue
Block a user