Mermaid Diagram Markdown Preview ignores theme-related config properties
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Type: Bug
Does this issue occur when all extensions are disabled?: **Yes**
- VS Code Version: 1.128.0-insider (commit 3fbc14e)
- OS Version: Windows_NT x64 10.0.26200
# Description
As described on [Mermaid's website](https://mermaid.js.org/config/configuration.html#frontmatter-config
), one can use YAML frontmatter inside mermaid files to alter the display and format of the produced graph.
While some options are indeed supported (such as `class.hideEmptyMemberVariables`), `theme` and `themeVariables` are completely ignored by the built-in Markdown preview.
> [!NOTE]
> I _suspect_ that this behaviour also applies to other theme and color-related config properties, but lack the time to do a comprehensive sweep over the YAML config's fields.
> If someone else would like to take up the task, this issue could be expanded further and possibly used as a "todo list" of unsupported properties.
## Reproduction
````md
```mermaid
---
config:
theme: 'forest'
class:
hideEmptyMembersBox: true
---
classDiagram
direction BT
class Duck
```
````
Note that the members box is indeed removed (`hideEmptyMembersBox` was respected), but the theme change was completely ignored.
System Info
|Item|Value|
|---|---|
|CPUs|AMD Ryzen 5 7520U with Radeon Graphics (8 x 2795)|
|GPU Status|2d_canvas: enabled
GPU0: VENDOR= 0x1002, DEVICE=0x1506 [AMD Radeon(TM) Graphics], DRIVER_VENDOR=AMD, DRIVER_VERSION=32.0.21043.19003 *ACTIVE*
GPU1: VENDOR= 0x1414, DEVICE=0x008c [Microsoft Basic Render Driver], DRIVER_VERSION=10.0.26100.8521
Machine model name:
Machine model version:
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
trees_in_viz: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgpu: enabled
webnn: disabled_off|
|Load (avg)|undefined|
|Memory (System)|15.24GB (1.13GB free)|
|Process Argv|--disable-extensions --crash-reporter-id 39573a72-9466-4384-875b-3724d8b65997|
|Screen Reader|no|
|VM|0%|
Extensions disabled
A/B Experiments
```
vsliv368:30146709
pythonvspyt551:31249597
nativeloc1:31118317
dwcopilot:31158714
dwoutputs:31242946
copilot_t_ci:31333650
g012b348:31231168
pythonrdcb7:31268811
pythonpcpt1cf:31399617
6518g693:31302842
6abeh943:31336334
envsactivate1:31349248
editstats-enabled:31346256
cloudbuttont:31366566
3efgi100_wstrepl:31403338
ddidtcf:31398485
cp_cls_t_966_ss:31526232
4je02754:31455664
c3h7c220:31478652
38bie571_auto:31426784
cp_cls_c_1081:31454833
conptydll_true:31485575
ia-use-proxy-models-svc:31446143
e9c30283:31453065
test_treatment2:31471001
c9b86496:31447327
idci7584:31454084
e3e4d672:31454087
ei9d7968:31462942
nes-extended-on:31455475
89g7j272:31506658
hhf17803:31462392
7e187181:31482583
i2gc6536:31472020
52612955:31508042
h08i8180:31475367
23c7c724:31520045
ddid_t:31478204
hmra_i5g22:31518061
bjc72774_agent_sandbox:31538428
7df3h592:31491241
cp_cls_t_1082:31535311
logging_enabled_new:31490725
jb_cp_cls_t_632:31543129
b1g4i769:31503653
ha629193:31508444
cdk-lw-on:31524445
f9bf7985:31541111
31fi7170_t:31517328
a1ije391_t:31533808
api_cot_off:31509852
41836166:31537719
jbcp_cls_pctr_t:31531130
cp_intellij_t_nes:31533504
jf4hg949:31526829
hide-eh-duplicates:31543293
h561g132:31534507
replace-eh-with-ah:31544220
ihg5j128:31534457
f412h606:31543414
max-result-100:31544848
```
Contributor guide
Research direction
No file or test is named. Start by reproducing the supplied Mermaid YAML frontmatter in VS Code's built-in Markdown preview, then trace how the preview handles theme and themeVariables versus class.hideEmptyMembersBox. Done means the theme settings affect the rendered graph and the behavior is covered by a regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- markdown, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 57/100