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

chore: Change %%{init...}%% to config:

Browse Source
This commit is contained in:
Josh Soref
2025-04-17 07:27:43 -04:00
parent 385fab8c67
commit 2ff6de11dc
12 changed files with 301 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/config/theming.md
View File

@@ -8,7 +8,7 @@
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, Frontmatter config is used.
## Available Themes
@@ -37,18 +37,24 @@ mermaid.initialize({
## Diagram-specific Themes
To customize the theme of an individual diagram, use the `init` directive.
To customize the theme of an individual diagram, use Frontmatter config.
Example of `init` directive setting the `theme` to `forest`:
Example of Frontmatter config setting the `theme` to `forest`:
```mermaid-example
%%{init: {'theme':'forest'}}%%
---
config:
theme: 'forest'
---
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'forest'}}%%
---
config:
theme: 'forest'
---
graph TD
a --> b
```
@@ -57,30 +63,28 @@ Example of `init` directive setting the `theme` to `forest`:
## Customizing Themes with `themeVariables`
To make a custom theme, modify `themeVariables` via `init`.
To make a custom theme, modify `themeVariables` via Frontmatter config.
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
| Parameter | Description | Type | Properties |
| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
| Parameter | Description | Type | Properties |
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
| themeVariables | Modifiable with Frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
Example of modifying `themeVariables` using the `init` directive:
Example of modifying `themeVariables` using Frontmatter config:
```mermaid-example
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
---
config:
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}
@@ -98,19 +102,17 @@ Example of modifying `themeVariables` using the `init` directive:
```
```mermaid
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
---
config:
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}

26
docs/syntax/flowchart.md
View File

@@ -83,7 +83,11 @@ flowchart LR
Use double quotes and backticks "\` text \`" to enclose the markdown text.
```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%%
---
config:
flowchart:
htmlLabels: false
---
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
@@ -93,7 +97,11 @@ flowchart LR
```
```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
---
config:
flowchart:
htmlLabels: false
---
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
@@ -1592,7 +1600,10 @@ flowchart LR
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%%
config:
flowchart:
htmlLabels: false
---
flowchart LR
subgraph "One"
a("`The **cat**
@@ -1605,7 +1616,10 @@ end
```
```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
config:
flowchart:
htmlLabels: false
---
flowchart LR
subgraph "One"
a("`The **cat**
@@ -2016,7 +2030,9 @@ The _elk_ renderer is an experimental feature.
You can change the renderer to elk by adding this directive:
```
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
config:
flowchart:
defaultRenderer: "elk"
```
> **Note**

16
docs/syntax/pie.md
View File

@@ -48,7 +48,13 @@ Drawing a pie chart is really simple in mermaid.
## Example
```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
@@ -58,7 +64,13 @@ pie showData
```
```mermaid
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96

20
docs/syntax/quadrantChart.md
View File

@@ -148,7 +148,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
## Example on config and theme
```mermaid-example
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
@@ -159,7 +166,14 @@ quadrantChart
```
```mermaid
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
@@ -178,7 +192,7 @@ Points can either be styled directly or with defined shared classes
```md
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
```

20
docs/syntax/radar.md
View File

@@ -177,7 +177,15 @@ Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagra
> **Note**
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
>
> ---
>
> config:
> themeVariables:
> cScale0: "#FF0000"
> cScale1: "#00FF00"
>
> ---
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
@@ -191,7 +199,15 @@ Radar charts support the color scales `cScale${i}` where `i` is a number from `0
> **Note**
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
>
> ---
>
> config:
> themeVariables:
> radar:
> axisColor: "#FF0000"
>
> ---
| Property | Description | Default Value |
| -------------------- | ---------------------------- | ------------- |

108
docs/syntax/timeline.md
View File

@@ -234,7 +234,13 @@ mermaid.initialize({
let us look at same example, where we have disabled the multiColor option.
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -245,7 +251,13 @@ let us look at same example, where we have disabled the multiColor option.
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -269,11 +281,17 @@ Example:
Now let's override the default values for the `cScale0` to `cScale2` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
'cScale1': '#00ff00',
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
} } }%%
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -287,11 +305,17 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
'cScale1': '#00ff00',
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
} } }%%
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -324,7 +348,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -337,7 +365,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -352,7 +384,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -365,7 +401,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -380,7 +420,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -393,7 +437,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -408,7 +456,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -421,7 +473,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -436,7 +492,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -449,7 +509,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn

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

@@ -2,7 +2,7 @@
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, Frontmatter config is used.
## Available Themes
@@ -31,12 +31,15 @@ mermaid.initialize({
## Diagram-specific Themes
To customize the theme of an individual diagram, use the `init` directive.
To customize the theme of an individual diagram, use Frontmatter config.
Example of `init` directive setting the `theme` to `forest`:
Example of Frontmatter config setting the `theme` to `forest`:
```mermaid-example
%%{init: {'theme':'forest'}}%%
---
config:
theme: 'forest'
---
graph TD
a --> b
```
@@ -45,30 +48,28 @@ Example of `init` directive setting the `theme` to `forest`:
## Customizing Themes with `themeVariables`
To make a custom theme, modify `themeVariables` via `init`.
To make a custom theme, modify `themeVariables` via Frontmatter config.
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
| Parameter | Description | Type | Properties |
| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
| Parameter | Description | Type | Properties |
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
| themeVariables | Modifiable with Frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
Example of modifying `themeVariables` using the `init` directive:
Example of modifying `themeVariables` using Frontmatter config:
```mermaid-example
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
---
config:
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}

15
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -64,7 +64,11 @@ flowchart LR
Use double quotes and backticks "\` text \`" to enclose the markdown text.
```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%%
---
config:
flowchart:
htmlLabels: false
---
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
@@ -976,7 +980,10 @@ flowchart LR
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%%
config:
flowchart:
htmlLabels: false
---
flowchart LR
subgraph "One"
a("`The **cat**
@@ -1309,7 +1316,9 @@ The _elk_ renderer is an experimental feature.
You can change the renderer to elk by adding this directive:
```
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
config:
flowchart:
defaultRenderer: "elk"
```
```note

8
packages/mermaid/src/docs/syntax/pie.md
View File

@@ -35,7 +35,13 @@ Drawing a pie chart is really simple in mermaid.
## Example
```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96

9
packages/mermaid/src/docs/syntax/quadrantChart.md
View File

@@ -127,7 +127,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
## Example on config and theme
```mermaid-example
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"

16
packages/mermaid/src/docs/syntax/radar.md
View File

@@ -141,7 +141,13 @@ Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagra
```note
The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
%%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
---
config:
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
---
```
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
@@ -156,7 +162,13 @@ Radar charts support the color scales `cScale${i}` where `i` is a number from `0
```note
Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
%%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
---
config:
themeVariables:
radar:
axisColor: "#FF0000"
---
```
| Property | Description | Default Value |

54
packages/mermaid/src/docs/syntax/timeline.md
View File

@@ -160,7 +160,13 @@ mermaid.initialize({
let us look at same example, where we have disabled the multiColor option.
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -184,11 +190,17 @@ Example:
Now let's override the default values for the `cScale0` to `cScale2` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
'cScale1': '#00ff00',
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
} } }%%
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -221,7 +233,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -236,7 +252,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -251,7 +271,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -266,7 +290,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -281,7 +309,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'
---
timeline
title History of Social Media Platform
2002 : LinkedIn