Skip to content

Commit 5aa5dd8

Browse files
cscheidcscheid
authored
quarto+mermaid theming (#2165)
* add quarto+mermaid theming. Closes #2165 See https://github.com/quarto-dev/quarto-web/blob/main/docs/prerelease/1.3.qmd
1 parent 354c580 commit 5aa5dd8

File tree

9 files changed

+548
-17
lines changed

9 files changed

+548
-17
lines changed

‎news/changelog-1.3.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222

2323
- Document `theme` format metadata option ([#3377](https://github.com/quarto-dev/quarto-cli/issues/3377))
2424

25+
## Mermaid diagrams
26+
27+
- Upgrade to mermaid 9.2.2
28+
- Add support for theming mermaid diagrams in Javascript formats ([#2165](https://github.com/quarto-dev/quarto-cli/issues/2165)). See the [prerelease documentation notes](https://quarto.org/docs/prerelease/1.3.html) for details.
29+
- Allow `%%| label` mermaid cell option that control the `id` of the resulting SVG, to facilitate CSS overrides.
30+
- Use `htmlLabels: false` in mermaid flowcharts.
31+
- Remove support for tooltips, which appear to not be working in mermaid 9.2.2.
32+
2533
## Dates
2634

2735
- Properly fall back to language only locale when a supported language-region locale isn't available. ([#3059](https://github.com/quarto-dev/quarto-cli/issues/3059))

‎src/core/handlers/mermaid.ts‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ object:
5353
properties:
5454
mermaid-format:
5555
enum: [png, svg, js]
56+
theme:
57+
anyOf:
58+
- null
59+
- string
5660
`)));
5761
},
5862

@@ -81,6 +85,21 @@ object:
8185
cell: QuartoMdCell, // this has unmerged cell options
8286
options: Record<string, unknown>, // this merges default and cell options, we have to be careful.
8387
) {
88+
const mermaidOpts: Record<string, string> = {};
89+
if (
90+
typeof handlerContext.options.format.metadata.mermaid === "object" &&
91+
handlerContext.options.format.metadata.mermaid
92+
) {
93+
const { mermaid } = handlerContext.options.format.metadata as {
94+
mermaid: Record<string, string>;
95+
};
96+
if (mermaid.theme) {
97+
mermaidOpts.theme = mermaid.theme;
98+
} else {
99+
mermaidOpts.theme = "neutral";
100+
}
101+
}
102+
84103
const cellContent = handlerContext.cellContent(cell);
85104
// TODO escaping removes MappedString information.
86105
// create puppeteer target page
@@ -91,7 +110,7 @@ object:
91110
<body>
92111
<pre class="mermaid">\n${escape(cellContent.value)}\n</pre>
93112
<script>
94-
mermaid.initialize();
113+
mermaid.initialize(${JSON.stringify(mermaidOpts)});
95114
</script>
96115
</html>`;
97116
const selector = "pre.mermaid svg";
@@ -135,6 +154,15 @@ mermaid.initialize();
135154
? "mermaid.js"
136155
: "mermaid.min.js";
137156

157+
if (mermaidOpts.theme) {
158+
const mermaidMeta: Record<string, string> = {};
159+
mermaidMeta["mermaid-theme"] = mermaidOpts.theme;
160+
handlerContext.addHtmlDependency({
161+
name: "quarto-mermaid-conf",
162+
meta: mermaidMeta,
163+
});
164+
}
165+
138166
const dep: FormatDependency = {
139167
name: "quarto-diagram",
140168
scripts: [
@@ -344,9 +372,13 @@ mermaid.initialize();
344372
"mermaid-tooltip-",
345373
"",
346374
);
375+
const preAttrs = [];
376+
if (options.label) {
377+
preAttrs.push(`label="${options.label}"`);
378+
}
347379
const preEl = pandocHtmlBlock("pre")({
348380
classes: ["mermaid", "mermaid-js"],
349-
attrs: [`tooltip-selector="#${tooltipName}"`],
381+
attrs: preAttrs,
350382
});
351383
preEl.push(pandocRawStr(escape(cell.source.value))); // TODO escaping removes MappedString information.
352384

@@ -360,7 +392,10 @@ mermaid.initialize();
360392
cell,
361393
mappedConcat([
362394
preEl.mappedString(),
363-
`\n<div id="${tooltipName}" class="mermaidTooltip"></div>`,
395+
// tooltips appear to be broken in mermaid 9.2.2?
396+
// They don't even work on their website: https://mermaid-js.github.io/mermaid/#/flowchart
397+
// we drop them for now.
398+
// `\n<div id="${tooltipName}" class="mermaidTooltip"></div>`,
364399
]),
365400
options,
366401
attrs,

‎src/resources/editor/tools/vs-code.mjs‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18936,7 +18936,11 @@ var require_yaml_intelligence_resources = __commonJS({
1893618936
},
1893718937
"If <code>true</code>, force the presence of the OJS runtime. If\n<code>false</code>, force the absence instead. If unset, the OJS runtime\nis included only if OJS cells are present in the document.",
1893818938
"Use the specified file as a style reference in producing a docx,\npptx, or odt file.",
18939-
"The Beamer theme for this presentation.",
18939+
"Theme name, theme scss file, or a mix of both.",
18940+
"The light theme name, theme scss file, or a mix of both.",
18941+
"The light theme name, theme scss file, or a mix of both.",
18942+
"The dark theme name, theme scss file, or a mix of both.",
18943+
"The dark theme name, theme scss file, or a mix of both.",
1894018944
"Disables the built in html features like theming, anchor sections,\ncode block behavior, and more.",
1894118945
"Enables inclusion of Pandoc default CSS for this document.",
1894218946
"One or more CSS style sheets.",
@@ -19879,7 +19883,9 @@ var require_yaml_intelligence_resources = __commonJS({
1987919883
long: "Title of the volume of the item or container holding the item.\nAlso use for titles of periodical special issues, special sections,\nand the like."
1988019884
},
1988119885
"Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
19882-
"internal-schema-hack"
19886+
"internal-schema-hack",
19887+
"Mermaid diagram options",
19888+
"The mermaid built-in theme to use."
1988319889
],
1988419890
"schema/external-schemas.yml": [
1988519891
{
@@ -20092,12 +20098,12 @@ var require_yaml_intelligence_resources = __commonJS({
2009220098
mermaid: "%%"
2009320099
},
2009420100
"handlers/mermaid/schema.yml": {
20095-
_internalId: 133704,
20101+
_internalId: 133586,
2009620102
type: "object",
2009720103
description: "be an object",
2009820104
properties: {
2009920105
"mermaid-format": {
20100-
_internalId: 133703,
20106+
_internalId: 133578,
2010120107
type: "enum",
2010220108
enum: [
2010320109
"png",
@@ -20111,6 +20117,25 @@ var require_yaml_intelligence_resources = __commonJS({
2011120117
"js"
2011220118
],
2011320119
exhaustiveCompletions: true
20120+
},
20121+
theme: {
20122+
_internalId: 133585,
20123+
type: "anyOf",
20124+
anyOf: [
20125+
{
20126+
type: "null",
20127+
description: "be the null value",
20128+
completions: [
20129+
"null"
20130+
],
20131+
exhaustiveCompletions: true
20132+
},
20133+
{
20134+
type: "string",
20135+
description: "be a string"
20136+
}
20137+
],
20138+
description: "be at least one of: the null value, a string"
2011420139
}
2011520140
},
2011620141
patternProperties: {},
@@ -20166,6 +20191,32 @@ var require_yaml_intelligence_resources = __commonJS({
2016620191
}
2016720192
}
2016820193
}
20194+
],
20195+
"schema/document-mermaid.yml": [
20196+
{
20197+
name: "mermaid",
20198+
tags: {
20199+
formats: [
20200+
"$html-files"
20201+
]
20202+
},
20203+
schema: {
20204+
object: {
20205+
properties: {
20206+
theme: {
20207+
enum: [
20208+
"default",
20209+
"dark",
20210+
"forest",
20211+
"neutral"
20212+
],
20213+
description: "The mermaid built-in theme to use."
20214+
}
20215+
}
20216+
}
20217+
},
20218+
description: "Mermaid diagram options"
20219+
}
2016920220
]
2017020221
};
2017120222
}

‎src/resources/editor/tools/yaml/web-worker.js‎

Lines changed: 55 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/resources/editor/tools/yaml/yaml-intelligence-resources.json‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11912,7 +11912,11 @@
1191211912
},
1191311913
"If <code>true</code>, force the presence of the OJS runtime. If\n<code>false</code>, force the absence instead. If unset, the OJS runtime\nis included only if OJS cells are present in the document.",
1191411914
"Use the specified file as a style reference in producing a docx,\npptx, or odt file.",
11915-
"The Beamer theme for this presentation.",
11915+
"Theme name, theme scss file, or a mix of both.",
11916+
"The light theme name, theme scss file, or a mix of both.",
11917+
"The light theme name, theme scss file, or a mix of both.",
11918+
"The dark theme name, theme scss file, or a mix of both.",
11919+
"The dark theme name, theme scss file, or a mix of both.",
1191611920
"Disables the built in html features like theming, anchor sections,\ncode block behavior, and more.",
1191711921
"Enables inclusion of Pandoc default CSS for this document.",
1191811922
"One or more CSS style sheets.",
@@ -12855,7 +12859,9 @@
1285512859
"long": "Title of the volume of the item or container holding the item.\nAlso use for titles of periodical special issues, special sections,\nand the like."
1285612860
},
1285712861
"Disambiguating year suffix in author-date styles (e.g.&nbsp;“a” in “Doe,\n1999a”).",
12858-
"internal-schema-hack"
12862+
"internal-schema-hack",
12863+
"Mermaid diagram options",
12864+
"The mermaid built-in theme to use."
1285912865
],
1286012866
"schema/external-schemas.yml": [
1286112867
{
@@ -13068,12 +13074,12 @@
1306813074
"mermaid": "%%"
1306913075
},
1307013076
"handlers/mermaid/schema.yml": {
13071-
"_internalId": 133704,
13077+
"_internalId": 133586,
1307213078
"type": "object",
1307313079
"description": "be an object",
1307413080
"properties": {
1307513081
"mermaid-format": {
13076-
"_internalId": 133703,
13082+
"_internalId": 133578,
1307713083
"type": "enum",
1307813084
"enum": [
1307913085
"png",
@@ -13087,6 +13093,25 @@
1308713093
"js"
1308813094
],
1308913095
"exhaustiveCompletions": true
13096+
},
13097+
"theme": {
13098+
"_internalId": 133585,
13099+
"type": "anyOf",
13100+
"anyOf": [
13101+
{
13102+
"type": "null",
13103+
"description": "be the null value",
13104+
"completions": [
13105+
"null"
13106+
],
13107+
"exhaustiveCompletions": true
13108+
},
13109+
{
13110+
"type": "string",
13111+
"description": "be a string"
13112+
}
13113+
],
13114+
"description": "be at least one of: the null value, a string"
1309013115
}
1309113116
},
1309213117
"patternProperties": {},
@@ -13142,5 +13167,31 @@
1314213167
}
1314313168
}
1314413169
}
13170+
],
13171+
"schema/document-mermaid.yml": [
13172+
{
13173+
"name": "mermaid",
13174+
"tags": {
13175+
"formats": [
13176+
"$html-files"
13177+
]
13178+
},
13179+
"schema": {
13180+
"object": {
13181+
"properties": {
13182+
"theme": {
13183+
"enum": [
13184+
"default",
13185+
"dark",
13186+
"forest",
13187+
"neutral"
13188+
],
13189+
"description": "The mermaid built-in theme to use."
13190+
}
13191+
}
13192+
}
13193+
},
13194+
"description": "Mermaid diagram options"
13195+
}
1314513196
]
1314613197
}

0 commit comments

Comments
 (0)