Skip to content

Commit adfed1e

Browse files
sidharthv96sidharthv96
authored
Merge pull request #4750 from mermaid-js/feature/frontmatterConfig
feat: Support config in frontmatter.
2 parents 6e0f411 + 3944e9a commit adfed1e

24 files changed

+344
-166
lines changed

‎cSpell.json

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"faber",
4545
"flatmap",
4646
"foswiki",
47+
"frontmatter",
4748
"ftplugin",
4849
"gantt",
4950
"gitea",

‎cypress/integration/rendering/conf-and-directives.spec.js

+82-9
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ describe('Configuration and directives - nodes should be light blue', () => {
1414
`,
1515
{}
1616
);
17-
cy.get('svg');
1817
});
1918
it('Settings from initialize - nodes should be green', () => {
2019
imgSnapshotTest(
@@ -28,7 +27,6 @@ graph TD
2827
end `,
2928
{ theme: 'forest' }
3029
);
31-
cy.get('svg');
3230
});
3331
it('Settings from initialize overriding themeVariable - nodes should be red', () => {
3432
imgSnapshotTest(
@@ -46,7 +44,6 @@ graph TD
4644
`,
4745
{ theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
4846
);
49-
cy.get('svg');
5047
});
5148
it('Settings from directive - nodes should be grey', () => {
5249
imgSnapshotTest(
@@ -62,7 +59,24 @@ graph TD
6259
`,
6360
{}
6461
);
65-
cy.get('svg');
62+
});
63+
it('Settings from frontmatter - nodes should be grey', () => {
64+
imgSnapshotTest(
65+
`
66+
---
67+
config:
68+
theme: neutral
69+
---
70+
graph TD
71+
A(Start) --> B[/Another/]
72+
A[/Another/] --> C[End]
73+
subgraph section
74+
B
75+
C
76+
end
77+
`,
78+
{}
79+
);
6680
});
6781

6882
it('Settings from directive overriding theme variable - nodes should be red', () => {
@@ -79,7 +93,6 @@ graph TD
7993
`,
8094
{}
8195
);
82-
cy.get('svg');
8396
});
8497
it('Settings from initialize and directive - nodes should be grey', () => {
8598
imgSnapshotTest(
@@ -95,7 +108,6 @@ graph TD
95108
`,
96109
{ theme: 'forest' }
97110
);
98-
cy.get('svg');
99111
});
100112
it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
101113
imgSnapshotTest(
@@ -111,8 +123,71 @@ graph TD
111123
`,
112124
{ theme: 'base' }
113125
);
114-
cy.get('svg');
115126
});
127+
it('Theme from initialize, frontmatter overriding theme variable - nodes should be red', () => {
128+
imgSnapshotTest(
129+
`
130+
---
131+
config:
132+
theme: base
133+
themeVariables:
134+
primaryColor: '#ff0000'
135+
---
136+
graph TD
137+
A(Start) --> B[/Another/]
138+
A[/Another/] --> C[End]
139+
subgraph section
140+
B
141+
C
142+
end
143+
`,
144+
{ theme: 'forest' }
145+
);
146+
});
147+
it('Theme from initialize, frontmatter overriding theme variable, directive overriding primaryColor - nodes should be red', () => {
148+
imgSnapshotTest(
149+
`
150+
---
151+
config:
152+
theme: base
153+
themeVariables:
154+
primaryColor: '#00ff00'
155+
---
156+
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
157+
graph TD
158+
A(Start) --> B[/Another/]
159+
A[/Another/] --> C[End]
160+
subgraph section
161+
B
162+
C
163+
end
164+
`,
165+
{ theme: 'forest' }
166+
);
167+
});
168+
169+
it('should render if values are not quoted properly', () => {
170+
// #ff0000 is not quoted properly, and will evaluate to null.
171+
// This test ensures that the rendering still works.
172+
imgSnapshotTest(
173+
`---
174+
config:
175+
theme: base
176+
themeVariables:
177+
primaryColor: #ff0000
178+
---
179+
graph TD
180+
A(Start) --> B[/Another/]
181+
A[/Another/] --> C[End]
182+
subgraph section
183+
B
184+
C
185+
end
186+
`,
187+
{ theme: 'forest' }
188+
);
189+
});
190+
116191
it('Theme variable from initialize, theme from directive - nodes should be red', () => {
117192
imgSnapshotTest(
118193
`
@@ -127,13 +202,11 @@ graph TD
127202
`,
128203
{ themeVariables: { primaryColor: '#ff0000' } }
129204
);
130-
cy.get('svg');
131205
});
132206
describe('when rendering several diagrams', () => {
133207
it('diagrams should not taint later diagrams', () => {
134208
const url = 'http://localhost:9000/theme-directives.html';
135209
cy.visit(url);
136-
cy.get('svg');
137210
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
138211
});
139212
});

‎demos/er.html

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
<pre class="mermaid">
2222
---
2323
title: This is a title
24+
config:
25+
theme: forest
2426
---
2527
erDiagram
2628
%% title This is a title

‎demos/flowchart.html

+7
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,13 @@ <h3>graph</h3>
123123

124124
<h3>flowchart</h3>
125125
<pre class="mermaid">
126+
---
127+
title: This is another complicated flow
128+
config:
129+
theme: base
130+
flowchart:
131+
curve: cardinal
132+
---
126133
flowchart LR
127134
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
128135

‎docs/config/configuration.md

+32-1
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,41 @@ When mermaid starts, configuration is extracted to determine a configuration to
1010

1111
- The default configuration
1212
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
13-
- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
13+
- Frontmatter (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
14+
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
1415

1516
**The render config** is configuration that is used when rendering by applying these configurations.
1617

18+
## Frontmatter config
19+
20+
The entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.
21+
22+
```mermaid-example
23+
---
24+
title: Hello Title
25+
config:
26+
theme: base
27+
themeVariables:
28+
primaryColor: "#00ff00"
29+
---
30+
flowchart
31+
Hello --> World
32+
33+
```
34+
35+
```mermaid
36+
---
37+
title: Hello Title
38+
config:
39+
theme: base
40+
themeVariables:
41+
primaryColor: "#00ff00"
42+
---
43+
flowchart
44+
Hello --> World
45+
46+
```
47+
1748
## Theme configuration
1849

1950
## Starting mermaid

‎docs/config/directives.md

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
77
# Directives
88

9+
> **Warning**
10+
> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
11+
912
## Directives
1013

1114
Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

‎docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616

1717
#### Defined in
1818

19-
[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)
19+
[mermaidAPI.ts:78](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L78)

‎docs/config/setup/interfaces/mermaidAPI.RenderResult.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
3939
4040
#### Defined in
4141
42-
[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
42+
[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
4343
4444
---
4545
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
5151
5252
#### Defined in
5353
54-
[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)
54+
[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)

‎docs/config/setup/modules/config.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
#### Defined in
1616

17-
[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
17+
[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
1818

1919
## Functions
2020

@@ -26,17 +26,17 @@ Pushes in a directive to the configuration
2626

2727
#### Parameters
2828

29-
| Name | Type | Description |
30-
| :---------- | :---- | :----------------------- |
31-
| `directive` | `any` | The directive to push in |
29+
| Name | Type | Description |
30+
| :---------- | :-------------- | :----------------------- |
31+
| `directive` | `MermaidConfig` | The directive to push in |
3232

3333
#### Returns
3434

3535
`void`
3636

3737
#### Defined in
3838

39-
[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
39+
[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
4040

4141
---
4242

@@ -60,7 +60,7 @@ The currentConfig
6060

6161
#### Defined in
6262

63-
[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
63+
[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
6464

6565
---
6666

@@ -118,7 +118,7 @@ The siteConfig
118118

119119
#### Defined in
120120

121-
[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
121+
[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
122122

123123
---
124124

@@ -147,7 +147,7 @@ options in-place
147147

148148
#### Defined in
149149

150-
[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
150+
[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
151151

152152
---
153153

@@ -242,18 +242,18 @@ The new siteConfig
242242

243243
#### Parameters
244244

245-
| Name | Type |
246-
| :------------ | :-------------- |
247-
| `siteCfg` | `MermaidConfig` |
248-
| `_directives` | `any`\[] |
245+
| Name | Type |
246+
| :------------ | :----------------- |
247+
| `siteCfg` | `MermaidConfig` |
248+
| `_directives` | `MermaidConfig`\[] |
249249

250250
#### Returns
251251

252252
`MermaidConfig`
253253

254254
#### Defined in
255255

256-
[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
256+
[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
257257

258258
---
259259

‎docs/config/setup/modules/defaultConfig.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
### configKeys
1212

13-
• `Const` **configKeys**: `string`\[]
13+
• `Const` **configKeys**: `Set`<`string`>
1414

1515
#### Defined in
1616

0 commit comments

Comments
 (0)