Bug reportOct 21, 2026· 0:27· 8 views
Mermaid 12: nested bold+italic loses outer style with htmlLabels: false
0:27 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumMarkdown label rendering in the non-HTML (SVG text) path. Likely nested strong/emphasis handling where markdown tokens are converted to tspan styles: font-style and font-weight are not combined for ***x*** or for *x* nested inside **...**.
os: macOSapp: Mermaid Live Editordpr: 1url: /editlocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720mermaid_version: v12.2.0 (label shown at 0.0s)
Repro steps
- 1.Open the Mermaid Live Editor at /edit and click 'Close banner'.
- 2.In the Code tab, enter: flowchart LR, A["`**Bold** / *Italic* / ***Both***`"], B["`**Bold *Both* Bold**`"]. The user title says the failing case uses htmlLabels: false. The config for this case is not visible in the keyframes.
- 3.Look at the word 'Both' in node A and node B.
- 4.Click 'Zoom in' twice to inspect the labels more closely.
- 5.Control: open the Config tab, which shows htmlLabels: true at top level and under flowchart, and look at the same two nodes.
- 6.Click 'Zoom in' twice on the control render.
Expected
In node A, '***Both***' renders bold and italic. In node B, the nested '*Both*' renders italic and also keeps the outer bold style. The control render with htmlLabels: true shows this.
Actual
In the failing render, node A shows 'Both' bold but not italic. Node B shows 'Both' italic but not bold, so the outer bold style is lost on the nested word. In both nodes one of the two styles is dropped.
Evidence
visualFailing case: the Code tab shows node A as "`**Bold** / *Italic* / ***Both***`". The rendered node A shows 'Both' in upright bold with no italic.
visualFailing case: node B "`**Bold *Both* Bold**`" renders 'Both' in italic at a lighter weight than the surrounding bold 'Bold' words. The outer bold is lost.
visualFailing case after 'Zoom in' clicks: node A 'Both' is still upright bold only.
visualFailing case: the cursor hovers over node B 'Both', which is italic and non-bold, between the bold 'Bold' words.
visualControl (working): the Config tab shows "htmlLabels": true at top level and under "flowchart". Node A 'Both' renders bold and italic. Node B 'Both' renders bold and italic.
visualControl (working): after more 'Zoom in' clicks, node A 'Both' is still bold italic with htmlLabels: true.
visualVersion label v12.2.0 is shown in the bottom right.
Issue markdown (copy-paste ready)
## Summary
In Mermaid v12.2.0 (Live Editor), nested bold plus italic markdown in flowchart node labels loses one of the two styles. The user title says this happens with `htmlLabels: false`. The same diagram renders correctly with `htmlLabels: true` (control).
## Environment
- Mermaid Live Editor, v12.2.0 (label visible at 0.0s)
- Chromium 151.0.7922.34, macOS
- Viewport 1280x720, DPR 1
## Diagram
```
flowchart LR
A["`**Bold** / *Italic* / ***Both***`"]
B["`**Bold *Both* Bold**`"]
```
## Steps to reproduce
1. Open `/edit` and close the banner (0.0s).
2. Enter the diagram above (visible at 0.0s). Per the report title, use `htmlLabels: false`. The config for this case is not shown in the recording.
3. Inspect the word `Both` in both nodes (0.0s). Zoom in for detail (3.8s, 4.5s).
4. Control: set `htmlLabels: true` at top level and under `flowchart` (Config tab visible at 15.0s) and compare.
## Expected
- Node A: `***Both***` is bold and italic.
- Node B: `*Both*` inside `**...**` is italic and still bold.
## Actual (failing case)
- Node A: `Both` is bold only, not italic (0.0s, 7.0s).
- Node B: `Both` is italic only. The outer bold is lost (0.0s, 13.0s).
## Control (works)
With `htmlLabels: true` (Config tab at 15.0s), both nodes render `Both` as bold italic (15.0s, 17.0s, 23.0s).
## Evidence
- 0.0s: Failing render. Node A `Both` is upright bold. Node B `Both` is italic and non-bold.
- 13.0s: Cursor over node B `Both`, which is clearly lighter than the surrounding bold text.
- 15.0s: Config shows `"htmlLabels": true`. Both nodes render correctly.
- No console or network data was captured.
## Suggested area
The SVG text (non-HTML) markdown label path. Look at how nested strong/emphasis tokens map to tspan `font-weight` and `font-style`. They should combine, not replace each other.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →