From 2ff6de11dc9bf58d473d94ef0d695b6c875f84b2 Mon Sep 17 00:00:00 2001 From: Josh Soref <2119212+jsoref@users.noreply.github.com> Date: Thu, 17 Apr 2025 07:27:43 -0400 Subject: [PATCH] chore: Change `%%{init...}%%` to `config:` --- docs/config/theming.md | 74 ++++++------ docs/syntax/flowchart.md | 26 ++++- docs/syntax/pie.md | 16 ++- docs/syntax/quadrantChart.md | 20 +++- docs/syntax/radar.md | 20 +++- docs/syntax/timeline.md | 108 ++++++++++++++---- packages/mermaid/src/docs/config/theming.md | 45 ++++---- packages/mermaid/src/docs/syntax/flowchart.md | 15 ++- packages/mermaid/src/docs/syntax/pie.md | 8 +- .../mermaid/src/docs/syntax/quadrantChart.md | 9 +- packages/mermaid/src/docs/syntax/radar.md | 16 ++- packages/mermaid/src/docs/syntax/timeline.md | 54 +++++++-- 12 files changed, 301 insertions(+), 110 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index f510a114a..22734fa1e 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -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} diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 20808c765..943627e33 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -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** diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md index 2a47f18d4..b8f452b66 100644 --- a/docs/syntax/pie.md +++ b/docs/syntax/pie.md @@ -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 diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index ba8063845..160d70bf5 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -148,7 +148,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is ` ## 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 ``` diff --git a/docs/syntax/radar.md b/docs/syntax/radar.md index f8eabf3e6..bc19d85da 100644 --- a/docs/syntax/radar.md +++ b/docs/syntax/radar.md @@ -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 | | -------------------- | ---------------------------- | ------------- | diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 4f055a56d..6a2e40fec 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -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 diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index f9afb15b8..79bc0a415 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -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} diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index f13dafba4..fa10dcee6 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -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 diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md index 81ec720c4..2e7a1799a 100644 --- a/packages/mermaid/src/docs/syntax/pie.md +++ b/packages/mermaid/src/docs/syntax/pie.md @@ -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 diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 7459f70de..8c83360f1 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -127,7 +127,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is ` ## 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 ❤" diff --git a/packages/mermaid/src/docs/syntax/radar.md b/packages/mermaid/src/docs/syntax/radar.md index 9112bd84b..124cebb24 100644 --- a/packages/mermaid/src/docs/syntax/radar.md +++ b/packages/mermaid/src/docs/syntax/radar.md @@ -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 | diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index abd320355..149d83746 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -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