marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-31 22:26:53 +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. 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 ## Available Themes
@@ -37,18 +37,24 @@ mermaid.initialize({
## Diagram-specific Themes ## 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 ```mermaid-example
%%{init: {'theme':'forest'}}%% ---
config:
theme: 'forest'
---
graph TD graph TD
a --> b a --> b
``` ```
```mermaid ```mermaid
%%{init: {'theme':'forest'}}%% ---
config:
theme: 'forest'
---
graph TD graph TD
a --> b a --> b
``` ```
@@ -57,30 +63,28 @@ Example of `init` directive setting the `theme` to `forest`:
## Customizing Themes with `themeVariables` ## 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. You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
| Parameter | Description | Type | Properties | | 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 ```mermaid-example
%%{ ---
init: { config:
'theme': 'base', theme: 'base'
'themeVariables': { themeVariables:
'primaryColor': '#BB2528', primaryColor: '#BB2528'
'primaryTextColor': '#fff', primaryTextColor: '#fff'
'primaryBorderColor': '#7C0000', primaryBorderColor: '#7C0000'
'lineColor': '#F8B229', lineColor: '#F8B229'
'secondaryColor': '#006100', secondaryColor: '#006100'
'tertiaryColor': '#fff' tertiaryColor: '#fff'
} ---
}
}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -98,19 +102,17 @@ Example of modifying `themeVariables` using the `init` directive:
``` ```
```mermaid ```mermaid
%%{ ---
init: { config:
'theme': 'base', theme: 'base'
'themeVariables': { themeVariables:
'primaryColor': '#BB2528', primaryColor: '#BB2528'
'primaryTextColor': '#fff', primaryTextColor: '#fff'
'primaryBorderColor': '#7C0000', primaryBorderColor: '#7C0000'
'lineColor': '#F8B229', lineColor: '#F8B229'
'secondaryColor': '#006100', secondaryColor: '#006100'
'tertiaryColor': '#fff' tertiaryColor: '#fff'
} ---
}
}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} 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. Use double quotes and backticks "\` text \`" to enclose the markdown text.
```mermaid-example ```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%% ---
config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
markdown["`This **is** _Markdown_`"] markdown["`This **is** _Markdown_`"]
newLines["`Line1 newLines["`Line1
@@ -93,7 +97,11 @@ flowchart LR
``` ```
```mermaid ```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%% ---
config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
markdown["`This **is** _Markdown_`"] markdown["`This **is** _Markdown_`"]
newLines["`Line1 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. 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 ```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%% config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
subgraph "One" subgraph "One"
a("`The **cat** a("`The **cat**
@@ -1605,7 +1616,10 @@ end
``` ```
```mermaid ```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%% config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
subgraph "One" subgraph "One"
a("`The **cat** 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: You can change the renderer to elk by adding this directive:
``` ```
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% config:
flowchart:
defaultRenderer: "elk"
``` ```
> **Note** > **Note**

16
docs/syntax/pie.md
View File

@@ -48,7 +48,13 @@ Drawing a pie chart is really simple in mermaid.
## Example ## Example
```mermaid-example ```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% ---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
@@ -58,7 +64,13 @@ pie showData
``` ```
```mermaid ```mermaid
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% ---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "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 ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% ---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤" y-axis Not Important --> "Important ❤"
@@ -159,7 +166,14 @@ quadrantChart
``` ```
```mermaid ```mermaid
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% ---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤" 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** > **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: > 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`. 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** > **Note**
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax. > 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 | | 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. let us look at same example, where we have disabled the multiColor option.
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% ---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -245,7 +251,13 @@ let us look at same example, where we have disabled the multiColor option.
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% ---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -269,11 +281,17 @@ Example:
Now let's override the default values for the `cScale0` to `cScale2` variables: Now let's override the default values for the `cScale0` to `cScale2` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', config:
'cScale1': '#00ff00', logLevel: 'debug'
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' theme: 'default'
} } }%% themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -287,11 +305,17 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', config:
'cScale1': '#00ff00', logLevel: 'debug'
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' theme: 'default'
} } }%% themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -324,7 +348,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -337,7 +365,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -352,7 +384,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -365,7 +401,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -380,7 +420,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -393,7 +437,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -408,7 +456,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -421,7 +473,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -436,7 +492,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -449,7 +509,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 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. 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 ## Available Themes
@@ -31,12 +31,15 @@ mermaid.initialize({
## Diagram-specific Themes ## 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 ```mermaid-example
%%{init: {'theme':'forest'}}%% ---
config:
theme: 'forest'
---
graph TD graph TD
a --> b a --> b
``` ```
@@ -45,30 +48,28 @@ Example of `init` directive setting the `theme` to `forest`:
## Customizing Themes with `themeVariables` ## 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. You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
| Parameter | Description | Type | Properties | | 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 ```mermaid-example
%%{ ---
init: { config:
'theme': 'base', theme: 'base'
'themeVariables': { themeVariables:
'primaryColor': '#BB2528', primaryColor: '#BB2528'
'primaryTextColor': '#fff', primaryTextColor: '#fff'
'primaryBorderColor': '#7C0000', primaryBorderColor: '#7C0000'
'lineColor': '#F8B229', lineColor: '#F8B229'
'secondaryColor': '#006100', secondaryColor: '#006100'
'tertiaryColor': '#fff' tertiaryColor: '#fff'
} ---
}
}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} 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. Use double quotes and backticks "\` text \`" to enclose the markdown text.
```mermaid-example ```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%% ---
config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
markdown["`This **is** _Markdown_`"] markdown["`This **is** _Markdown_`"]
newLines["`Line1 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. 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 ```mermaid-example
%%{init: {"flowchart": {"htmlLabels": false}} }%% config:
flowchart:
htmlLabels: false
---
flowchart LR flowchart LR
subgraph "One" subgraph "One"
a("`The **cat** 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: You can change the renderer to elk by adding this directive:
``` ```
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% config:
flowchart:
defaultRenderer: "elk"
``` ```
```note ```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 ## Example
```mermaid-example ```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% ---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "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 ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% ---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤" 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 ```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: 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`. 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 ```note
Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax. 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 | | 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. let us look at same example, where we have disabled the multiColor option.
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% ---
config:
logLevel: 'debug'
theme: 'base'
timeline:
disableMulticolor: true
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -184,11 +190,17 @@ Example:
Now let's override the default values for the `cScale0` to `cScale2` variables: Now let's override the default values for the `cScale0` to `cScale2` variables:
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { ---
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', config:
'cScale1': '#00ff00', logLevel: 'debug'
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' theme: 'default'
} } }%% themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -221,7 +233,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -236,7 +252,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -251,7 +271,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -266,7 +290,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
@@ -281,7 +309,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'
---
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn