Previews of Mermaid Gantt charts with are now black and White Only Code
Open
@mjbvz is already working on this.
Since Jun 8, 2026.
Assessment
This issue has not been assessed yet.
Description
info-needed
mermaid
Type: Bug
I am using extension Markdown Preview Mermaid Support to preview colored Gantt charts and copy and paste them to a report.
The extension was listed as deprecated as it has been merged into VS Code 1.121.1.
After upgrading to VS Code 1.121.1 preview of Mermaid Gantt charts are only black/grey/white.
Reinstalling extension shows not empty empty preview after flashing the chart with all colors for a second.
below is an example which worked with the themeCSS in the past.
When will this be fixed?
Or do I need to go back to 1.118.1 with extension?
Markdown
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
themeCSS: " // YAML supports multiline strings using a newline markers: \n
#cadetblue { fill: cadetblue } \n
#white { fill: white} \n
#lightgrey { fill: #CCCCCC} \n
#grey { fill: grey} \n
#darkgrey { fill: darkgrey} \n
#black { fill: black} \n
#yellow { fill: yellow} \n
#purple { fill: purple} \n
#brown { fill: brown} \n
#lightgreen { fill: #BBEEBB} \n
#green { fill: green} \n
#darkgreen { fill: darkgreen} \n
#lightred { fill: #EEBBBB} \n
#lightred2 { fill: #DD8888} \n
#red { fill: red} \n
#darkred { fill: darkred} \n
#turquoise { fill: turquoise} \n
#darkturquoise { fill: darkturquoise} \n
#lightblue { fill: #BBBBEE} \n
#blue { fill: Blue} \n
#darkblue { fill: darkblue} \n
#orange { fill: orange} \n
#darkorange { fill: darkorange} \n
// Custom marker workaround CSS from forum (below) \n
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 1800
rightPadding: 0
topAxis: #true false
numberSectionStyles: 2
fontSize: 14
sectionFontSize: 20
---
%%{init: { 'gantt': {'leftPadding': 200} } }%%
%%{
init: {
'theme': 'default',
'themeVariables': {
'sectionBkgColor': '#EEEEEE',
'altSectionBkgColor': '#BBBBBB',
'sectionBkgColor2': 'blue',
'taskBkgColor': 'white',
'taskBorderColor': 'black',
'taskTextColor': 'black'
}
}
}%%
gantt
title XXX_XXXX_XXXXX
dateFormat YYYY-MM-DD
axisFormat % %
tickInterval 1month
section Tasks
2025 : lightblue,2025-06-01,2025-12-31
2026 : lightgreen,2026-01-01,2026-12-31
2027 : lightblue,2027-01-01,2027-12-31
2028 : lightgreen,2028-01-01,2028-12-31
2029 : lightblue,2029-01-01,2029-01-31
section
Jun : lightblue,2025-06-01,2025-06-30
Jul : lightblue,2025-07-01,2025-07-31
Aug : lightblue,2025-08-01,2025-08-31
Sep : lightblue,2025-09-01,2025-09-30
Okt : lightblue,2025-10-01,2025-10-31
Nov : lightblue,2025-11-01,2025-11-30
Dez : lightblue,2025-12-01,2025-12-31
Jan : lightgreen,2026-01-01,2026-01-31
Feb : lightgreen,2026-02-01,2026-02-28
Mär : lightgreen,2026-03-01,2026-03-31
Apr : lightgreen,2026-04-01,2026-04-30
Mai : lightgreen,2026-05-01,2026-05-31
Jun : lightgreen,2026-06-01,2026-06-30
Jul : lightgreen,2026-07-01,2026-07-31
Aug : lightgreen,2026-08-01,2026-08-31
Sep : lightgreen,2026-09-01,2026-09-30
Okt : lightgreen,2026-10-01,2026-10-31
Nov : lightgreen,2026-11-01,2026-11-30
Dez : lightgreen,2026-12-01,2026-12-31
Jan : lightblue,2027-01-01,2027-01-31
Feb : lightblue,2027-02-01,2027-02-28
Mär : lightblue,2027-03-01,2027-03-31
Apr : lightblue,2027-04-01,2027-04-30
Mai : lightblue,2027-05-01,2027-05-31
Jun : lightblue,2027-06-01,2027-06-30
Jul : lightblue,2027-07-01,2027-07-31
Aug : lightblue,2027-08-01,2027-08-31
Sep : lightblue,2027-09-01,2027-09-30
Okt : lightblue,2027-10-01,2027-10-31
Nov : lightblue,2027-11-01,2027-11-30
Dez : lightblue,2027-12-01,2027-12-31
Jan : lightgreen,2028-01-01,2028-01-31
Feb : lightgreen,2028-02-01,2028-02-29
Mär : lightgreen,2028-03-01,2028-03-31
Apr : lightgreen,2028-04-01,2028-04-30
Mai : lightgreen,2028-05-01,2028-05-31
Jun : lightgreen,2028-06-01,2028-06-30
Jul : lightgreen,2028-07-01,2028-07-31
Aug : lightgreen,2028-08-01,2028-08-31
Sep : lightgreen,2028-09-01,2028-09-30
Okt : lightgreen,2028-10-01,2028-10-31
Nov : lightgreen,2028-11-01,2028-11-30
Dez : lightgreen,2028-12-01,2028-12-31
Jan : lightblue,2029-01-01,2029-01-31
section TEST
. : white,2029-01-29,2029-01-31
. : white,2029-01-29,2029-01-31
section TEST 1..x
TEST 1.1 : lightred,2025-06-01,2025-11-11
TEST 1.2 : lightred,2026-01-15,2026-05-12
TEST 1.3 : lightred,2026-07-15,2026-11-10
TEST 1.4 : lightred,2027-01-15,2027-05-12
section
Jun : lightblue,2025-06-01,2025-06-30
Jul : lightblue,2025-07-01,2025-07-31
Aug : lightblue,2025-08-01,2025-08-31
Sep : lightblue,2025-09-01,2025-09-30
Okt : lightblue,2025-10-01,2025-10-31
Nov : lightblue,2025-11-01,2025-11-30
Dez : lightblue,2025-12-01,2025-12-31
Jan : lightgreen,2026-01-01,2026-01-31
Feb : lightgreen,2026-02-01,2026-02-28
Mär : lightgreen,2026-03-01,2026-03-31
Apr : lightgreen,2026-04-01,2026-04-30
Mai : lightgreen,2026-05-01,2026-05-31
Jun : lightgreen,2026-06-01,2026-06-30
Jul : lightgreen,2026-07-01,2026-07-31
Aug : lightgreen,2026-08-01,2026-08-31
Sep : lightgreen,2026-09-01,2026-09-30
Okt : lightgreen,2026-10-01,2026-10-31
Nov : lightgreen,2026-11-01,2026-11-30
Dez : lightgreen,2026-12-01,2026-12-31
Jan : lightblue,2027-01-01,2027-01-31
Feb : lightblue,2027-02-01,2027-02-28
Mär : lightblue,2027-03-01,2027-03-31
Apr : lightblue,2027-04-01,2027-04-30
Mai : lightblue,2027-05-01,2027-05-31
Jun : lightblue,2027-06-01,2027-06-30
Jul : lightblue,2027-07-01,2027-07-31
Aug : lightblue,2027-08-01,2027-08-31
Sep : lightblue,2027-09-01,2027-09-30
Okt : lightblue,2027-10-01,2027-10-31
Nov : lightblue,2027-11-01,2027-11-30
Dez : lightblue,2027-12-01,2027-12-31
Jan : lightgreen,2028-01-01,2028-01-31
Feb : lightgreen,2028-02-01,2028-02-29
Mär : lightgreen,2028-03-01,2028-03-31
Apr : lightgreen,2028-04-01,2028-04-30
Mai : lightgreen,2028-05-01,2028-05-31
Jun : lightgreen,2028-06-01,2028-06-30
Jul : lightgreen,2028-07-01,2028-07-31
Aug : lightgreen,2028-08-01,2028-08-31
Sep : lightgreen,2028-09-01,2028-09-30
Okt : lightgreen,2028-10-01,2028-10-31
Nov : lightgreen,2028-11-01,2028-11-30
Dez : lightgreen,2028-12-01,2028-12-31
Jan : lightblue,2029-01-01,2029-01-31
section
2025 : lightblue,2025-06-01,2025-12-31
2026 : lightgreen,2026-01-01,2026-12-31
2027 : lightblue,2027-01-01,2027-12-31
2028 : lightgreen,2028-01-01,2028-12-31
2029 : lightblue,2029-01-01,2029-01-31
VS Code version: Code 1.123.0 (6a44c352bd24569c417e530095901b649960f9f8, 2026-06-03T11:29:03+02:00)
OS version: Windows_NT x64 10.0.26200
Modes:
System Info
| Item | Value |
|---|---|
| CPUs | Intel(R) Core(TM) Ultra 9 185H (22 x 3072) |
| GPU Status | 2d_canvas: enabled GPU0: VENDOR= 0x8086, DEVICE=0x7d55 [Intel(R) Arc(TM) Pro Graphics], DRIVER_VENDOR=Intel, DRIVER_VERSION=32.0.101.6078 ACTIVE GPU1: VENDOR= 0x10de, DEVICE=0x28b8 [NVIDIA RTX 2000 Ada Generation Laptop GPU], DRIVER_VERSION=32.0.15.9571 GPU2: VENDOR= 0x1414, DEVICE=0x008c [Microsoft Basic Render Driver], DRIVER_VERSION=10.0.26100.8246 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) | 31.45GB (12.95GB free) |
| Process Argv | --crash-reporter-id 6beab8f2-9b61-4dd4-8a7c-69a938076af8 |
| Screen Reader | no |
| VM | 0% |
Extensions (6)
| Name | Identifier | Author | Version |
|---|---|---|---|
| Markdown Preview Mermaid Support | bierner.markdown-mermaid | bierner | 1.32.1 |
| markdownlint | davidanson.vscode-markdownlint | DavidAnson | 0.61.2 |
| GitLens — Git supercharged | eamodio.gitlens | eamodio | 18.0.0 |
| GitHub Codespaces | github.codespaces | GitHub | 1.18.13 |
| Live Share | ms-vsliveshare.vsliveshare | ms-vsliveshare | 1.1.122 |
| Markdown All in One | yzhang.markdown-all-in-one | yzhang | 3.6.3 |
A/B Experiments
vsliv368:30146709
pythonvspyt551:31249599
binariesv615:30325510
nativeloc1:31344060
dwcopilot:31170013
dwoutputs:31242946
copilot_t_ci:31333650
e5gg6876:31282496
pythonrdcb7:31342333
6518g693:31463988
aj953862:31281341
6abeh943:31336334
envsdeactivate2:31505458
cloudbuttont:31379625
3efgi100_wstrepl:31403338
55ia6109:31457054
ec5jj548:31422691
cp_cls_t_966_ss:31526232
inlinechat_v2_hd992725:31505030
4je02754:31466945
8hhj4413:31478653
cp_cls_c_1081:31454833
conptydll_true:31498968
e9c30283:31461165
test_treatment2:31471001
46204921:31447328
idci7584:31464702
e3e4d672:31494082
ei9d7968:31496641
chat:31457767
7e187181:31503455
ghj88844:31499326
ddid_c:31478207
hmra_i5g22:31518061
getcmakediagnosticson:31489824
7df3h592:31512476
cp_cls_t_1082:31516087
logging_enabled_new:31498466
j0d79568:31499440
jb_cp_cls_c_632:31524806
56dj4588:31512888
32d76977:31512328
ha629193:31508444
cdk-lw-on:31524445
31fi7170_t:31522396
jh5f2457_c:31515489
g4a0e106:31517209
61138546:31518536
d7b18187:31526828
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.9k
- PR merge metrics
- PR metrics pending
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from microsoft/vscode
-
testplan-item
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
new release
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
testplan-item
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
testplan-item
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
All issues in microsoft/vscode
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·