marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-31 02:44:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6499 from jsoref/docs/6498_remove-deprecated-init-config

Browse Source 
chore: Remove deprecated init config
This commit is contained in:
Sidharth Vinod
2025-04-18 08:06:08 +00:00
committed by GitHub
parent a3fed10d55 8a34154efa
commit b3ff80f211
14 changed files with 321 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
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)) |
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
| 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

18
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 ❤"

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

13
docs/syntax/xyChart.md
View File

@@ -138,9 +138,16 @@ xychart-beta
## Chart Theme Variables
> **Note**
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
```yaml
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
```
| Parameter | Description |
| ---------------- | --------------------------------------------------------- |

43
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)) |
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
| 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

12
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -126,9 +126,15 @@ xychart-beta
## Chart Theme Variables
```note
Themes for xychart resides inside xychart attribute so to set the variables use this syntax
%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
```yaml
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
```
| Parameter | Description |