fix(sequence): add label box background for alt/else section titles by knsv-bot · Pull Request #7592 · mermaid-js/mermaid

knsv-bot · 2026-04-08T14:52:25Z

Summary

Resolves #7546

Section titles like "else" in alt/else blocks were rendered without a .labelBox background polygon, unlike the main loop label (e.g., "alt"). When custom CSS set .loopText fill to white, section title text became invisible against the white SVG background.
Added drawLabel() call for each section title in drawLoop(), creating a .labelBox polygon background consistent with the main label.

Classification

Change type: Renderer (sequence diagram only)
Breaking change: No — additive fix that adds missing background elements
Shared code touched: No — changes confined to packages/mermaid/src/diagrams/sequence/svgDraw.js

Verification

TDD: test failed before fix, passes after
Lint: passed
Unit tests: passed (vitest run packages/mermaid/src/diagrams/sequence/)
E2E snapshot test: added in cypress/integration/rendering/sequencediagram.spec.js
comp-review-changes: passed (0 blockers)
Visual spot-check: N/A (dev server not running; E2E snapshot covers the scenario)
Full e2e: not run locally (requires Cypress + dev server; E2E spec added for CI)
Changeset: generated (patch)

🤖 Generated with Claude Code

Section titles like "else" in alt/else blocks were rendered without a .labelBox background polygon, unlike the main loop label. When custom CSS set .loopText to white, section titles became invisible against the white SVG background. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

netlify · 2026-04-08T14:52:31Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`ce743ee`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69d681bbdd44150008ee7014
😎 Deploy Preview	https://deploy-preview-7592--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

changeset-bot · 2026-04-08T14:52:48Z

🦋 Changeset detected

Latest commit: ce743ee

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2026-04-08T14:53:52Z

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7592

mermaid

npm i https://pkg.pr.new/mermaid@7592

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7592

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7592

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7592

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7592

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7592

commit: ce743ee

codecov · 2026-04-08T14:55:58Z

Codecov Report

❌ Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.33%. Comparing base (b4d7dcf) to head (ce743ee).
⚠️ Report is 33 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/sequence/styles.js	0.00%	4 Missing ⚠️
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7592      +/-   ##
==========================================
- Coverage     3.33%   3.33%   -0.01%     
==========================================
  Files          535     536       +1     
  Lines        56229   56244      +15     
  Branches       820     820              
==========================================
- Hits          1877    1876       -1     
- Misses       54352   54368      +16

Flag	Coverage Δ
unit	`3.33% <0.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/sequence/svgDraw.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/diagrams/sequence/styles.js	`0.00% <0.00%> (ø)`

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Section titles like "else" in alt/else blocks used the loopText CSS class, which meant custom themeCSS targeting .loopText (e.g. setting fill to white) would make section titles invisible. Changed to labelText class so section title styling is independent of loopText overrides. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

argos-ci · 2026-04-08T15:03:54Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	1 changed, 1 added	Apr 8, 2026, 4:39 PM

Section titles like "else" used the loopText CSS class, which meant custom themeCSS targeting .loopText or .labelText (e.g. setting fill to white) would make section titles invisible. Introduced a dedicated .sectionTitle class styled with loopTextColor, isolating section title text from unrelated CSS overrides. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Clear the inline fontWeight for section titles so the .sectionTitle CSS class rule (font-weight: bold) is not overridden by the inline element.style font-weight. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Argos screenshots confirm section titles should not be bold. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…531) This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [mermaid](https://github.com/mermaid-js/mermaid) | [`11.13.0` → `11.15.0`](https://renovatebot.com/diffs/npm/mermaid/11.13.0/11.15.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/11.15.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/11.13.0/11.15.0?slim=true) | --- ### Mermaid Gantt Charts are vulnerable to an Infinite Loop DoS [CVE-2026-41150](https://nvd.nist.gov/vuln/detail/CVE-2026-41150) / [GHSA-6m6c-36f7-fhxh](GHSA-6m6c-36f7-fhxh) <details> <summary>More information</summary> #### Details ##### Impact Mermaid v11.14.0 and earlier are vulnerable to a denial-of-service attack when rendering gantt charts, if they use the [`excludes` attribute](https://mermaid.js.org/syntax/gantt.html?#excludes) to exclude all dates. Example: ``` gantt excludes monday,tuesday,wednesday,thursday,friday,saturday,sunday DoS :2025-01-01, 1d ``` `mermaid.parse` is unaffected, unless you then call the `ganttDb.getTasks()` (which is called when rendering a diagram). ##### Patches This has been patched in: - [v11.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) (see [faafb5d49106dd32c367f3882505f2dd625aa30e](mermaid-js/mermaid@faafb5d)) - [v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) (see [a59ea56174712ee5430dfd5bc877cb5151f501a6](mermaid-js/mermaid@a59ea56)) ##### Workarounds There are no workarounds available without updating to a newer version of mermaid. #### Severity - CVSS Score: 5.3 / 10 (Medium) - Vector String: `CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:P/VC:N/VI:N/VA:L/SC:N/SI:N/SA:L` #### References - [https://github.com/mermaid-js/mermaid/security/advisories/GHSA-6m6c-36f7-fhxh](https://github.com/mermaid-js/mermaid/security/advisories/GHSA-6m6c-36f7-fhxh) - [https://github.com/mermaid-js/mermaid/commit/a59ea56174712ee5430dfd5bc877cb5151f501a6](https://github.com/mermaid-js/mermaid/commit/a59ea56174712ee5430dfd5bc877cb5151f501a6) - [https://github.com/mermaid-js/mermaid/commit/faafb5d49106dd32c367f3882505f2dd625aa30e](https://github.com/mermaid-js/mermaid/commit/faafb5d49106dd32c367f3882505f2dd625aa30e) - [https://github.com/mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) - [https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) - [https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) This data is provided by [OSV](https://osv.dev/vulnerability/GHSA-6m6c-36f7-fhxh) and the [GitHub Advisory Database](https://github.com/github/advisory-database) ([CC-BY 4.0](https://github.com/github/advisory-database/blob/main/LICENSE.md)). </details> --- ### Mermaid: Improper sanitization of configuration leads to CSS injection [CVE-2026-41159](https://nvd.nist.gov/vuln/detail/CVE-2026-41159) / [GHSA-87f9-hvmw-gh4p](GHSA-87f9-hvmw-gh4p) <details> <summary>More information</summary> #### Details ##### Impact Mermaid's default configuration allows injecting CSS that applies outside of the Mermaid diagram via the `fontFamily`, `themeCSS`, and `altFontFamily` configuration options. Live demo: [mermaid.live](https://mermaid.live/edit#pako:eNpNjktLxDAUhf9KvFBR6JS-60QQfODKlUvJ5k6TtsEmKTHFGUP-u-mI6Nmdy3fOPR56wwVQSBIvtXSUeAaD0e4ZlZxPDChhcLxFfwiEauOuLq_9Afv30ZpVczpaITS5kGox1qF2gfSeBwYhJAnThAyz-ewntI68vG5-0z3Z7e7IA9OQwmglB-rsKlJQwircLPgNZeAmocTPAi4GXGfHgOkQYwvqN2PUbzJuGSegA84f0a0LRyeeJI4W_xChubCPcbQD2pwbgHo4Aq2aKmvbqq3zoiu7pizqFE6RybN9VFfFY1HWXRVS-Dr_zLObrt7_V_gGGXZlGg) Example code: ``` %%{init: {"fontFamily": "x;a{b} :not(&){background:green !important} c{d}"}}%% flowchart LR A --> B ``` The injected CSS exploits stylis's `&` (scope reference) handling. `:not(&)` escapes the `#mermaid-xxx` automatic scoping, applying styles to all page elements. Global at-rules (`@font-face`, `@keyframes`, `@counter-style`) are also injectable as stylis hoists them to top level. This allows page defacement and DOM attribute exfiltration via CSS `:has()` selectors. ##### Patches - [v11.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) (see [64769738d5b59211e1decb471ffbaca8afec51aa](mermaid-js/mermaid@6476973)) - [v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) (see [a9d9f0d8eb790349121508688cd338253fd80d76](mermaid-js/mermaid@a9d9f0d)) ##### Workarounds If you can't upgrade mermaid, you can set the [`secure`](https://mermaid.js.org/config/schema-docs/config.html#secure) config value in the mermaid config to avoid allowing diagrams to modify `fontFamily`, `themeCSS`, `altFontFamily`, and `themeVariables`. Setting [`"securityLevel": "sandbox"`](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) will also prevent this. ##### Credits Reported by @zsxsoft on behalf of @KeenSecurityLab #### Severity - CVSS Score: 5.3 / 10 (Medium) - Vector String: `CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:P/VC:N/VI:L/VA:N/SC:L/SI:L/SA:L` #### References - [https://github.com/mermaid-js/mermaid/security/advisories/GHSA-87f9-hvmw-gh4p](https://github.com/mermaid-js/mermaid/security/advisories/GHSA-87f9-hvmw-gh4p) - [https://github.com/mermaid-js/mermaid/commit/64769738d5b59211e1decb471ffbaca8afec51aa](https://github.com/mermaid-js/mermaid/commit/64769738d5b59211e1decb471ffbaca8afec51aa) - [https://github.com/mermaid-js/mermaid/commit/a9d9f0d8eb790349121508688cd338253fd80d76](https://github.com/mermaid-js/mermaid/commit/a9d9f0d8eb790349121508688cd338253fd80d76) - [https://github.com/mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) - [https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) - [https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) This data is provided by [OSV](https://osv.dev/vulnerability/GHSA-87f9-hvmw-gh4p) and the [GitHub Advisory Database](https://github.com/github/advisory-database) ([CC-BY 4.0](https://github.com/github/advisory-database/blob/main/LICENSE.md)). </details> --- ### Mermaid: Improper sanitization of `classDef` in state diagrams leads to HTML injection [CVE-2026-41149](https://nvd.nist.gov/vuln/detail/CVE-2026-41149) / [GHSA-ghcm-xqfw-q4vr](GHSA-ghcm-xqfw-q4vr) <details> <summary>More information</summary> #### Details ##### Impact Under the default configuration, Mermaid state diagram's `classDef` allow DOM injection that escapes the SVG, although `<script>` tags are removed, preventing XSS. ##### Proof-of-concept ``` stateDiagram-v2 classDef xss fill:red</style></svg><style>*{x:x;y:y;overflow:visible!important;contain:none!important;transform:none!important;filter:none!important;clip-path:none!important}</style><div style="x:x;y:y;color:red;font:5em/1 monospace;display:grid;place-items:center;z-index:2147483647;width:100vw;height:100vh;position:fixed;top:0;left:0;background:black">HACKED</div><svg><style>a:b [*] --> A:::xss ``` ##### Patches - [v11.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) (see [37ff937f1da2e19f882fd1db01235db4d01f4056](mermaid-js/mermaid@37ff937)) - [v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) (see [4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3](mermaid-js/mermaid@4e2d512)) ##### Workarounds If you can not update to a patched version, setting [`"securityLevel": "sandbox"`](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) will prevent this, by rendering the mermaid diagram in a sandboxed `<iframe>`. ##### Credits Thanks to @zsxsoft from @KeenSecurityLab for reporting this vulnerability. #### Severity - CVSS Score: 5.3 / 10 (Medium) - Vector String: `CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:P/VC:N/VI:L/VA:N/SC:L/SI:L/SA:L` #### References - [https://github.com/mermaid-js/mermaid/security/advisories/GHSA-ghcm-xqfw-q4vr](https://github.com/mermaid-js/mermaid/security/advisories/GHSA-ghcm-xqfw-q4vr) - [https://github.com/mermaid-js/mermaid/commit/37ff937f1da2e19f882fd1db01235db4d01f4056](https://github.com/mermaid-js/mermaid/commit/37ff937f1da2e19f882fd1db01235db4d01f4056) - [https://github.com/mermaid-js/mermaid/commit/4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3](https://github.com/mermaid-js/mermaid/commit/4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3) - [https://github.com/mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) - [https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) - [https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) - [https://mermaid.js.org/config/schema-docs/config.html#securitylevel](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) This data is provided by [OSV](https://osv.dev/vulnerability/GHSA-ghcm-xqfw-q4vr) and the [GitHub Advisory Database](https://github.com/github/advisory-database) ([CC-BY 4.0](https://github.com/github/advisory-database/blob/main/LICENSE.md)). </details> --- ### Mermaid: Improper sanitization of `classDefs` in diagrams leads to CSS injection [CVE-2026-41148](https://nvd.nist.gov/vuln/detail/CVE-2026-41148) / [GHSA-xcj9-5m2h-648r](GHSA-xcj9-5m2h-648r) <details> <summary>More information</summary> #### Details ##### Details The state diagram and any other diagram type that routes user-controlled style strings through createCssStyles parser for Mermaid v11.14.0 and earlier captures `classDef` values with an unrestricted regex: ```jison // packages/mermaid/src/diagrams/state/parser/stateDiagram.jison:83 <CLASSDEFID>[^\n]* { this.popState(); return 'CLASSDEF_STYLEOPTS' } ``` The value passes unsanitized through `addStyleClass()` -> `createCssStyles()` -> `style.innerHTML` (mermaidAPI.ts:418). A `}` in the value closes the generated CSS selector, and everything after becomes a new CSS rule on the page. ##### PoC ``` stateDiagram-v2 classDef x }*{ background-image: url("http://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif")} ``` Live demo: <https://mermaid.live/edit#pako:eNpFjzFvgzAQhf-KdVNbEcBgMHhtlkqtOnSJKi8ONsYKBmRMlRTx3-skanvTfbp7996t0IxSAYPZC6_2Rmgn7O4rQ00v5nmvWnRG29OKjqI5aTcug9wZK7RiaHH9A4fO-4kliVXSiFibqbvEzWjvnHxo_fI6vR3e6cGXyX2qTcvhcYMItDMSmHeLisAqZ8UVYeUDQhx8p6ziwEIrhTtx4MNVM4nhcxztrywE0h2wVvRzoGWS_z_8rahBKvcckntgmN5OAFvhDIzUNCZZQXCR5nVaZkUEF2BVFpOcEkoxxhUuyRbB980yjStapKHqoKFlhvPtB7BFZEU> ##### Patches This has been patched in: - [v11.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) (see [e9b0f34d8d82a6260077764ee45e1d7d90957a0f](mermaid-js/mermaid@e9b0f34)) - [v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) (see [8fead23c59166b7bab6a39eac81acebee2859102](mermaid-js/mermaid@8fead23)) ##### Workarounds Setting [`"securityLevel": "sandbox"`](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) will prevent this, by rendering the mermaid diagram in a sandboxed `<iframe>`. ##### Impact Enables page defacement, user tracking via `url()` callbacks, and DOM attribute exfiltration via CSS `:has()` selectors. #### Severity - CVSS Score: 5.3 / 10 (Medium) - Vector String: `CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:P/VC:N/VI:L/VA:N/SC:L/SI:L/SA:L` #### References - [https://github.com/mermaid-js/mermaid/security/advisories/GHSA-xcj9-5m2h-648r](https://github.com/mermaid-js/mermaid/security/advisories/GHSA-xcj9-5m2h-648r) - [https://github.com/mermaid-js/mermaid/commit/8fead23c59166b7bab6a39eac81acebee2859102](https://github.com/mermaid-js/mermaid/commit/8fead23c59166b7bab6a39eac81acebee2859102) - [https://github.com/mermaid-js/mermaid/commit/e9b0f34d8d82a6260077764ee45e1d7d90957a0f](https://github.com/mermaid-js/mermaid/commit/e9b0f34d8d82a6260077764ee45e1d7d90957a0f) - [https://github.com/mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) - [https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) - [https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) - [https://mermaid.js.org/config/schema-docs/config.html#securitylevel](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) This data is provided by [OSV](https://osv.dev/vulnerability/GHSA-xcj9-5m2h-648r) and the [GitHub Advisory Database](https://github.com/github/advisory-database) ([CC-BY 4.0](https://github.com/github/advisory-database/blob/main/LICENSE.md)). </details> --- ### Release Notes <details> <summary>mermaid-js/mermaid (mermaid)</summary> ### [`v11.15.0`](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) [Compare Source](https://github.com/mermaid-js/mermaid/compare/mermaid@11.14.0...mermaid@11.15.0) ##### Minor Changes - [#7174](mermaid-js/mermaid#7174) [`0aca217`](mermaid-js/mermaid@0aca217) Thanks [@milesspencer35](https://github.com/milesspencer35)! - feat(sequence): Add support for decimal start and increment values in the `autonumber` directive - [#7512](mermaid-js/mermaid#7512) [`8e17492`](mermaid-js/mermaid@8e17492) Thanks [@aruncveli](https://github.com/aruncveli)! - feat(flowchart): add datastore shape In Data flow diagrams, a datastore/warehouse/file/database is used to represent data persistence. It is denoted by a rectangle with only top and bottom borders, and can be used in flowcharts with `A@{ shape: datastore, label: "Datastore" }`. - [#6440](mermaid-js/mermaid#6440) [`9ad8dde`](mermaid-js/mermaid@9ad8dde) Thanks [@yordis](https://github.com/yordis), [@lgazo](https://github.com/lgazo)! - feat: add Event Modeling diagram - [#7707](mermaid-js/mermaid#7707) [`27db774`](mermaid-js/mermaid@27db774) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): expose four fcose layout knobs for `architecture-beta` diagrams (`nodeSeparation`, `idealEdgeLengthMultiplier`, `edgeElasticity`, `numIter`) so authors can tune layout density and spread overlapping siblings without changing diagram source - [#7604](mermaid-js/mermaid#7604) [`bf9502f`](mermaid-js/mermaid@bf9502f) Thanks [@M-a-c](https://github.com/M-a-c)! - feat(class): add nested namespace support for class diagrams via dot notation and syntactic nesting If you have namespaces in class diagrams that use `.`s already and want to render them without nesting (≤v11.14.0 behaviour), you can use set `class.hierarchicalNamespaces=false` in your mermaid config: ```yaml config: class: hierarchicalNamespaces: false ``` - [#7272](mermaid-js/mermaid#7272) [`88cdd3d`](mermaid-js/mermaid@88cdd3d) Thanks [@xinbenlv](https://github.com/xinbenlv)! - feat(sankey): add outlined label style, configurable nodeWidth/nodePadding, and custom node colors ##### Patch Changes - [#7737](mermaid-js/mermaid#7737) [`e9b0f34`](mermaid-js/mermaid@e9b0f34) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: prevent unbalanced CSS styles in classDefs - [#7737](mermaid-js/mermaid#7737) [`37ff937`](mermaid-js/mermaid@37ff937) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: create CSS styles using the CSSOM This removes some invalid CSS and normalizes some CSS formatting. - [#7508](mermaid-js/mermaid#7508) [`bfe60cc`](mermaid-js/mermaid@bfe60cc) Thanks [@biiab](https://github.com/biiab)! - fix(stateDiagram): `end note` now only closes a note when used on a new line - [#7737](mermaid-js/mermaid#7737) [`faafb5d`](mermaid-js/mermaid@faafb5d) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(gantt): add iteration limit for `excludes` field - [#7737](mermaid-js/mermaid#7737) [`65f8be2`](mermaid-js/mermaid@65f8be2) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: disallow some CSS at-rules in custom CSS - [#7726](mermaid-js/mermaid#7726) [`1502f32`](mermaid-js/mermaid@1502f32) Thanks [@aloisklink](https://github.com/aloisklink)! - fix(wardley): fix unnecessary sanitization of text - [#7578](mermaid-js/mermaid#7578) [`1f98db8`](mermaid-js/mermaid@1f98db8) Thanks [@Gaston202](https://github.com/Gaston202)! - fix(class): self-referential class multiplicity labels no longer rendered multiple times Fixes [#7560](mermaid-js/mermaid#7560). Resolves an issue where cardinality labels on self-referential class relationships were rendered three times due to edge splitting in the dagre layout. The fix ensures that each sub-edge only carries its relevant label positions. - [#7592](mermaid-js/mermaid#7592) [`2343e38`](mermaid-js/mermaid@2343e38) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(sequence): add background box behind alt/else section title labels in sequence diagrams - [#7589](mermaid-js/mermaid#7589) [`7fb9509`](mermaid-js/mermaid@7fb9509) Thanks [@NYCU-Chung](https://github.com/NYCU-Chung)! - fix(block): prevent column widths from shrinking when mixing different column spans - [#7632](mermaid-js/mermaid#7632) [`3f9e0f1`](mermaid-js/mermaid@3f9e0f1) Thanks [@ekiauhce](https://github.com/ekiauhce)! - fix(sequence): correct messageAlign label position for right-to-left arrows in sequence diagrams - [#7642](mermaid-js/mermaid#7642) [`7a8fb85`](mermaid-js/mermaid@7a8fb85) Thanks [@tractorjuice](https://github.com/tractorjuice)! - fix(wardley): allow hyphens in unquoted component names Multi-word names containing hyphens — e.g. `real-time processing`, `end-user`, `on-call engineer` — now parse without quoting, bringing the grammar in line with the OnlineWardleyMaps (OWM) convention. `A->B` (no-space arrow) still tokenises correctly. - [#7523](mermaid-js/mermaid#7523) [`5144ed4`](mermaid-js/mermaid@5144ed4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Arrow blocks in block-beta diagrams not spanning the specified number of columns when using `:n` syntax. - [#7262](mermaid-js/mermaid#7262) [`13d9bfa`](mermaid-js/mermaid@13d9bfa) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Ensure block diagram hexagon blocks respect column spanning syntax - [#7684](mermaid-js/mermaid#7684) [`e14bb88`](mermaid-js/mermaid@e14bb88) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: loosen `uuid` dependency range to allow v14 Mermaid does not use any of the vulnerable code in CVE-2026-41907, but this allows users to silence any `npm audit` alerts on it. - [#7633](mermaid-js/mermaid#7633) [`9217c0d`](mermaid-js/mermaid@9217c0d) Thanks [@Felix-Garci](https://github.com/Felix-Garci)! - fix(block): add support for all arrow types in block diagrams - [#7587](mermaid-js/mermaid#7587) [`5e7eb62`](mermaid-js/mermaid@5e7eb62) Thanks [@MaddyGuthridge](https://github.com/MaddyGuthridge)! - chore: drop lodash-es in favour of es-toolkit - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Previously the lexer only matched ASCII `[A-Za-z]+` for text tokens, even though the grammar referenced `UNICODE_TEXT`. Bare Chinese, Japanese, Korean, emoji, and accented Latin characters in labels caused a parse error. Added a `[^\x00-\x7F]+` lexer rule to emit `UNICODE_TEXT` and included it in the `alphaNumToken` grammar rule. Fixes [#7120](mermaid-js/mermaid#7120). - [#7737](mermaid-js/mermaid#7737) [`4755553`](mermaid-js/mermaid@4755553) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: improve D3 types for mermaidAPI funcs - [#7737](mermaid-js/mermaid#7737) [`6476973`](mermaid-js/mermaid@6476973) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: handle `&` when namespacing CSS rules - [#7520](mermaid-js/mermaid#7520) [`8c1a0c1`](mermaid-js/mermaid@8c1a0c1) Thanks [@RodrigojndSantos](https://github.com/RodrigojndSantos)! - fix(stateDiagram): comments starting with one `%` are no longer treated as comments Switch to using two `%%` if you want to write a comment. - Updated dependencies \[[`7a8fb85`](mermaid-js/mermaid@7a8fb85), [`675a64c`](mermaid-js/mermaid@675a64c)]: - [@mermaid-js/parser](https://github.com/mermaid-js/parser)@1.1.1 ### [`v11.14.0`](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0) [Compare Source](https://github.com/mermaid-js/mermaid/compare/mermaid@11.13.0...mermaid@11.14.0) Thanks to our awesome mermaid community that contributed to this release: [@ashishjain0512](https://github.com/ashishjain0512), [@tractorjuice](https://github.com/tractorjuice), [@autofix-ci\[bot\]](https://github.com/autofix-ci%5Bbot%5D), [@aloisklink](https://github.com/aloisklink), [@knsv](https://github.com/knsv), [@kibanana](https://github.com/kibanana), [@chandershekhar22](https://github.com/chandershekhar22), [@khalil](https://github.com/khalil), [@ytatsuno](https://github.com/ytatsuno), [@sidharthv96](https://github.com/sidharthv96), [@github-actions\[bot\]](https://github.com/github-actions%5Bbot%5D), [@dripcoding](https://github.com/dripcoding), [@knsv-bot](https://github.com/knsv-bot), [@jeroensmink98](https://github.com/jeroensmink98), [@Alex9583](https://github.com/Alex9583), [@GhassenS](https://github.com/GhassenS), [@omkarht](https://github.com/omkarht), [@darshanr0107](https://github.com/darshanr0107), [@leentaylor](https://github.com/leentaylor), [@lee-treehouse](https://github.com/lee-treehouse), [@veeceey](https://github.com/veeceey), [@turntrout](https://github.com/turntrout), [@Mermaid-Chart](https://github.com/Mermaid-Chart), [@BambioGaming](https://github.com/BambioGaming), Claude ### Releases #### [@mermaid-js/examples](https://github.com/mermaid-js/examples)@1.2.0 ##### Minor Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add new TreeView diagram #### mermaid\@11.14.0 ##### Minor Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - Add Wardley Maps diagram type (beta) Adds Wardley Maps as a new diagram type to Mermaid (available as `wardley-beta`). Wardley Maps are visual representations of business strategy that help map value chains and component evolution. Features: - Component positioning with \[visibility, evolution] coordinates (OWM format) - Anchors for users/customers - Multiple link types: dependencies, flows, labeled links - Evolution arrows and trend indicators - Custom evolution stages with optional dual labels - Custom stage widths using [@boundary](https://github.com/boundary) notation - Pipeline components with visibility inheritance - Annotations, notes, and visual elements - Source strategy markers: build, buy, outsource, market - Inertia indicators - Theme integration Implementation includes parser, D3.js renderer, unit tests, E2E tests, and comprehensive documentation. - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for state diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look support for sequence diagrams with drop shadows, and enhanced styling - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add `randomize` config option for architecture diagrams, defaulting to `false` for deterministic layout - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: Add option to change timeline direction - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - Fix duplicate SVG element IDs when rendering multiple diagrams on the same page. Internal element IDs (nodes, edges, markers, clusters) are now prefixed with the diagram's SVG element ID across all diagram types. Custom CSS or JS using exact ID selectors like `#arrowhead` should use attribute-ending selectors like `[id$="-arrowhead"]` instead. - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for ER diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for requirement diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add theme support for data label colour in xy chart - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for mindmap diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look for mermaid flowchart diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look and themes for class diagram - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add showDataLabelOutsideBar option for xy chart - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look support for timeline diagram with drop shadows, additoinal redux themes and enhanced styling - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look and themes for gitGraph diagram - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add new TreeView diagram ##### Patch Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add link to ishikawa diagram on mermaid.js.org - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - docs: document valid duration token formats in gantt.md - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: ER diagram parsing when using "1" as entity identifier on right side The parser was incorrectly tokenizing the second "1" in patterns like `a many to 1 1:` because the lookahead rule only checked for alphabetic characters after whitespace, not digits. Added a new lookahead pattern `"1"(?=\s+[0-9])` to correctly identify the cardinality alias before a numeric entity name. Fixes [#7472](mermaid-js/mermaid#7472) - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: scope cytoscape label style mapping to edges with labels to prevent console warnings - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: support inline annotation syntax in class diagrams (class Shape <<interface>>) - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Align branch label background with text for multi-line labels in LR GitGraph layout - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: preserve cause hierarchy when ishikawa effect is indented more than causes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - refactor: remove unused createGraphWithElements function and add regression test for open edge arrowheads - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Prevent long pie chart titles from being clipped by expanding the viewBox - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: prevent sequence diagram hang when "as" is used without a trailing space in participant declarations - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: warn when `style` statement targets a non-existent node in flowcharts - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: group state diagram SVG children under single root <g> element - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Allow :::className syntax inside composite state blocks - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) Thanks [@aloisklink](https://github.com/aloisklink), [@BambioGaming](https://github.com/BambioGaming)! - fix: prevent escaping `<` and `&` when `htmlLabels: false` - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: treemap title and labels use theme-aware colors for dark backgrounds - Updated dependencies \[[`efe218a`](mermaid-js/mermaid@efe218a)]: - [@mermaid-js/parser](https://github.com/mermaid-js/parser)@1.1.0 #### [@mermaid-js/parser](https://github.com/mermaid-js/parser)@1.1.0 ##### Minor Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add new TreeView diagram #### [@mermaid-js/tiny](https://github.com/mermaid-js/tiny)@11.14.0 ##### Minor Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - Add Wardley Maps diagram type (beta) Adds Wardley Maps as a new diagram type to Mermaid (available as `wardley-beta`). Wardley Maps are visual representations of business strategy that help map value chains and component evolution. Features: - Component positioning with \[visibility, evolution] coordinates (OWM format) - Anchors for users/customers - Multiple link types: dependencies, flows, labeled links - Evolution arrows and trend indicators - Custom evolution stages with optional dual labels - Custom stage widths using [@boundary](https://github.com/boundary) notation - Pipeline components with visibility inheritance - Annotations, notes, and visual elements - Source strategy markers: build, buy, outsource, market - Inertia indicators - Theme integration Implementation includes parser, D3.js renderer, unit tests, E2E tests, and comprehensive documentation. - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for state diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look support for sequence diagrams with drop shadows, and enhanced styling - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add `randomize` config option for architecture diagrams, defaulting to `false` for deterministic layout - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: Add option to change timeline direction - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - Fix duplicate SVG element IDs when rendering multiple diagrams on the same page. Internal element IDs (nodes, edges, markers, clusters) are now prefixed with the diagram's SVG element ID across all diagram types. Custom CSS or JS using exact ID selectors like `#arrowhead` should use attribute-ending selectors like `[id$="-arrowhead"]` instead. - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for ER diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for requirement diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add theme support for data label colour in xy chart - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look styling for mindmap diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look for mermaid flowchart diagrams - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look and themes for class diagram - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: add showDataLabelOutsideBar option for xy chart - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look support for timeline diagram with drop shadows, additoinal redux themes and enhanced styling - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - feat: implement neo look and themes for gitGraph diagram - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add new TreeView diagram ##### Patch Changes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - add link to ishikawa diagram on mermaid.js.org - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - docs: document valid duration token formats in gantt.md - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: ER diagram parsing when using "1" as entity identifier on right side The parser was incorrectly tokenizing the second "1" in patterns like `a many to 1 1:` because the lookahead rule only checked for alphabetic characters after whitespace, not digits. Added a new lookahead pattern `"1"(?=\s+[0-9])` to correctly identify the cardinality alias before a numeric entity name. Fixes [#7472](mermaid-js/mermaid#7472) - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: scope cytoscape label style mapping to edges with labels to prevent console warnings - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: support inline annotation syntax in class diagrams (class Shape <<interface>>) - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Align branch label background with text for multi-line labels in LR GitGraph layout - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: preserve cause hierarchy when ishikawa effect is indented more than causes - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - refactor: remove unused createGraphWithElements function and add regression test for open edge arrowheads - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Prevent long pie chart titles from being clipped by expanding the viewBox - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: prevent sequence diagram hang when "as" is used without a trailing space in participant declarations - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: warn when `style` statement targets a non-existent node in flowcharts - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: group state diagram SVG children under single root <g> element - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: Allow :::className syntax inside composite state blocks - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) Thanks [@aloisklink](https://github.com/aloisklink), [@BambioGaming](https://github.com/BambioGaming)! - fix: prevent escaping `<` and `&` when `htmlLabels: false` - [#7526](mermaid-js/mermaid#7526) [`efe218a`](mermaid-js/mermaid@efe218a) - fix: treemap title and labels use theme-aware colors for dark backgrounds - Updated dependencies \[[`efe218a`](mermaid-js/mermaid@efe218a)]: - [@mermaid-js/parser](https://github.com/mermaid-js/parser)@1.1.0 </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - "" - Automerge - Between 12:00 AM and 03:59 AM (`* 0-3 * * *`) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).  Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12531 Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>

@milesspencer35

Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0 Release notes: ### Minor Changes - [#7174](mermaid-js/mermaid#7174) [`0aca217`](mermaid-js/mermaid@0aca217) Thanks [@milesspencer35](https://github.com/milesspencer35)! - feat(sequence): Add support for decimal start and increment values in the `autonumber` directive - [#7512](mermaid-js/mermaid#7512) [`8e17492`](mermaid-js/mermaid@8e17492) Thanks [@aruncveli](https://github.com/aruncveli)! - feat(flowchart): add datastore shape In Data flow diagrams, a datastore/warehouse/file/database is used to represent data persistence. It is denoted by a rectangle with only top and bottom borders, and can be used in flowcharts with `A@{ shape: datastore, label: "Datastore" }`. - [#6440](mermaid-js/mermaid#6440) [`9ad8dde`](mermaid-js/mermaid@9ad8dde) Thanks [@yordis](https://github.com/yordis), [@lgazo](https://github.com/lgazo)! - feat: add Event Modeling diagram - [#7707](mermaid-js/mermaid#7707) [`27db774`](mermaid-js/mermaid@27db774) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): expose four fcose layout knobs for `architecture-beta` diagrams (`nodeSeparation`, `idealEdgeLengthMultiplier`, `edgeElasticity`, `numIter`) so authors can tune layout density and spread overlapping siblings without changing diagram source - [#7604](mermaid-js/mermaid#7604) [`bf9502f`](mermaid-js/mermaid@bf9502f) Thanks [@M-a-c](https://github.com/M-a-c)! - feat(class): add nested namespace support for class diagrams via dot notation and syntactic nesting If you have namespaces in class diagrams that use `.`s already and want to render them without nesting (≤v11.14.0 behaviour), you can use set `class.hierarchicalNamespaces=false` in your mermaid config: ```yaml config: class: hierarchicalNamespaces: false ``` - [#7272](mermaid-js/mermaid#7272) [`88cdd3d`](mermaid-js/mermaid@88cdd3d) Thanks [@xinbenlv](https://github.com/xinbenlv)! - feat(sankey): add outlined label style, configurable nodeWidth/nodePadding, and custom node colors ### Patch Changes - [#7737](mermaid-js/mermaid#7737) [`e9b0f34`](mermaid-js/mermaid@e9b0f34) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: prevent unbalanced CSS styles in classDefs - [#7737](mermaid-js/mermaid#7737) [`37ff937`](mermaid-js/mermaid@37ff937) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: create CSS styles using the CSSOM This removes some invalid CSS and normalizes some CSS formatting. - [#7508](mermaid-js/mermaid#7508) [`bfe60cc`](mermaid-js/mermaid@bfe60cc) Thanks [@biiab](https://github.com/biiab)! - fix(stateDiagram): `end note` now only closes a note when used on a new line - [#7737](mermaid-js/mermaid#7737) [`faafb5d`](mermaid-js/mermaid@faafb5d) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(gantt): add iteration limit for `excludes` field - [#7737](mermaid-js/mermaid#7737) [`65f8be2`](mermaid-js/mermaid@65f8be2) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: disallow some CSS at-rules in custom CSS - [#7726](mermaid-js/mermaid#7726) [`1502f32`](mermaid-js/mermaid@1502f32) Thanks [@aloisklink](https://github.com/aloisklink)! - fix(wardley): fix unnecessary sanitization of text - [#7578](mermaid-js/mermaid#7578) [`1f98db8`](mermaid-js/mermaid@1f98db8) Thanks [@Gaston202](https://github.com/Gaston202)! - fix(class): self-referential class multiplicity labels no longer rendered multiple times Fixes #7560. Resolves an issue where cardinality labels on self-referential class relationships were rendered three times due to edge splitting in the dagre layout. The fix ensures that each sub-edge only carries its relevant label positions. - [#7592](mermaid-js/mermaid#7592) [`2343e38`](mermaid-js/mermaid@2343e38) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(sequence): add background box behind alt/else section title labels in sequence diagrams - [#7589](mermaid-js/mermaid#7589) [`7fb9509`](mermaid-js/mermaid@7fb9509) Thanks [@NYCU-Chung](https://github.com/NYCU-Chung)! - fix(block): prevent column widths from shrinking when mixing different column spans - [#7632](mermaid-js/mermaid#7632) [`3f9e0f1`](mermaid-js/mermaid@3f9e0f1) Thanks [@ekiauhce](https://github.com/ekiauhce)! - fix(sequence): correct messageAlign label position for right-to-left arrows in sequence diagrams - [#7642](mermaid-js/mermaid#7642) [`7a8fb85`](mermaid-js/mermaid@7a8fb85) Thanks [@tractorjuice](https://github.com/tractorjuice)! - fix(wardley): allow hyphens in unquoted component names Multi-word names containing hyphens — e.g. `real-time processing`, `end-user`, `on-call engineer` — now parse without quoting, bringing the grammar in line with the OnlineWardleyMaps (OWM) convention. `A->B` (no-space arrow) still tokenises correctly. - [#7523](mermaid-js/mermaid#7523) [`5144ed4`](mermaid-js/mermaid@5144ed4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Arrow blocks in block-beta diagrams not spanning the specified number of columns when using `:n` syntax. - [#7262](mermaid-js/mermaid#7262) [`13d9bfa`](mermaid-js/mermaid@13d9bfa) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Ensure block diagram hexagon blocks respect column spanning syntax - [#7684](mermaid-js/mermaid#7684) [`e14bb88`](mermaid-js/mermaid@e14bb88) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: loosen `uuid` dependency range to allow v14 Mermaid does not use any of the vulnerable code in CVE-2026-41907, but this allows users to silence any `npm audit` alerts on it. - [#7633](mermaid-js/mermaid#7633) [`9217c0d`](mermaid-js/mermaid@9217c0d) Thanks [@Felix-Garci](https://github.com/Felix-Garci)! - fix(block): add support for all arrow types in block diagrams - [#7587](mermaid-js/mermaid#7587) [`5e7eb62`](mermaid-js/mermaid@5e7eb62) Thanks [@MaddyGuthridge](https://github.com/MaddyGuthridge)! - chore: drop lodash-es in favour of es-toolkit - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Previously the lexer only matched ASCII `[A-Za-z]+` for text tokens, even though the grammar referenced `UNICODE_TEXT`. Bare Chinese, Japanese, Korean, emoji, and accented Latin characters in labels caused a parse error. Added a `[^\x00-\x7F]+` lexer rule to emit `UNICODE_TEXT` and included it in the `alphaNumToken` grammar rule. Fixes #7120. - [#7737](mermaid-js/mermaid#7737) [`4755553`](mermaid-js/mermaid@4755553) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: improve D3 types for mermaidAPI funcs - [#7737](mermaid-js/mermaid#7737) [`6476973`](mermaid-js/mermaid@6476973) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: handle `&` when namespacing CSS rules - [#7520](mermaid-js/mermaid#7520) [`8c1a0c1`](mermaid-js/mermaid@8c1a0c1) Thanks [@RodrigojndSantos](https://github.com/RodrigojndSantos)! - fix(stateDiagram): comments starting with one `%` are no longer treated as comments Switch to using two `%%` if you want to write a comment. - Updated dependencies \[[`7a8fb85`](mermaid-js/mermaid@7a8fb85), [`675a64c`](mermaid-js/mermaid@675a64c)]: - @mermaid-js/parser@1.1.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>

@milesspencer35

Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0 Release notes: ### Minor Changes - [#7174](mermaid-js/mermaid#7174) [`0aca217`](mermaid-js/mermaid@0aca217) Thanks [@milesspencer35](https://github.com/milesspencer35)! - feat(sequence): Add support for decimal start and increment values in the `autonumber` directive - [#7512](mermaid-js/mermaid#7512) [`8e17492`](mermaid-js/mermaid@8e17492) Thanks [@aruncveli](https://github.com/aruncveli)! - feat(flowchart): add datastore shape In Data flow diagrams, a datastore/warehouse/file/database is used to represent data persistence. It is denoted by a rectangle with only top and bottom borders, and can be used in flowcharts with `A@{ shape: datastore, label: "Datastore" }`. - [#6440](mermaid-js/mermaid#6440) [`9ad8dde`](mermaid-js/mermaid@9ad8dde) Thanks [@yordis](https://github.com/yordis), [@lgazo](https://github.com/lgazo)! - feat: add Event Modeling diagram - [#7707](mermaid-js/mermaid#7707) [`27db774`](mermaid-js/mermaid@27db774) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): expose four fcose layout knobs for `architecture-beta` diagrams (`nodeSeparation`, `idealEdgeLengthMultiplier`, `edgeElasticity`, `numIter`) so authors can tune layout density and spread overlapping siblings without changing diagram source - [#7604](mermaid-js/mermaid#7604) [`bf9502f`](mermaid-js/mermaid@bf9502f) Thanks [@M-a-c](https://github.com/M-a-c)! - feat(class): add nested namespace support for class diagrams via dot notation and syntactic nesting If you have namespaces in class diagrams that use `.`s already and want to render them without nesting (≤v11.14.0 behaviour), you can use set `class.hierarchicalNamespaces=false` in your mermaid config: ```yaml config: class: hierarchicalNamespaces: false ``` - [#7272](mermaid-js/mermaid#7272) [`88cdd3d`](mermaid-js/mermaid@88cdd3d) Thanks [@xinbenlv](https://github.com/xinbenlv)! - feat(sankey): add outlined label style, configurable nodeWidth/nodePadding, and custom node colors ### Patch Changes - [#7737](mermaid-js/mermaid#7737) [`e9b0f34`](mermaid-js/mermaid@e9b0f34) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: prevent unbalanced CSS styles in classDefs - [#7737](mermaid-js/mermaid#7737) [`37ff937`](mermaid-js/mermaid@37ff937) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: create CSS styles using the CSSOM This removes some invalid CSS and normalizes some CSS formatting. - [#7508](mermaid-js/mermaid#7508) [`bfe60cc`](mermaid-js/mermaid@bfe60cc) Thanks [@biiab](https://github.com/biiab)! - fix(stateDiagram): `end note` now only closes a note when used on a new line - [#7737](mermaid-js/mermaid#7737) [`faafb5d`](mermaid-js/mermaid@faafb5d) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(gantt): add iteration limit for `excludes` field - [#7737](mermaid-js/mermaid#7737) [`65f8be2`](mermaid-js/mermaid@65f8be2) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: disallow some CSS at-rules in custom CSS - [#7726](mermaid-js/mermaid#7726) [`1502f32`](mermaid-js/mermaid@1502f32) Thanks [@aloisklink](https://github.com/aloisklink)! - fix(wardley): fix unnecessary sanitization of text - [#7578](mermaid-js/mermaid#7578) [`1f98db8`](mermaid-js/mermaid@1f98db8) Thanks [@Gaston202](https://github.com/Gaston202)! - fix(class): self-referential class multiplicity labels no longer rendered multiple times Fixes #7560. Resolves an issue where cardinality labels on self-referential class relationships were rendered three times due to edge splitting in the dagre layout. The fix ensures that each sub-edge only carries its relevant label positions. - [#7592](mermaid-js/mermaid#7592) [`2343e38`](mermaid-js/mermaid@2343e38) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(sequence): add background box behind alt/else section title labels in sequence diagrams - [#7589](mermaid-js/mermaid#7589) [`7fb9509`](mermaid-js/mermaid@7fb9509) Thanks [@NYCU-Chung](https://github.com/NYCU-Chung)! - fix(block): prevent column widths from shrinking when mixing different column spans - [#7632](mermaid-js/mermaid#7632) [`3f9e0f1`](mermaid-js/mermaid@3f9e0f1) Thanks [@ekiauhce](https://github.com/ekiauhce)! - fix(sequence): correct messageAlign label position for right-to-left arrows in sequence diagrams - [#7642](mermaid-js/mermaid#7642) [`7a8fb85`](mermaid-js/mermaid@7a8fb85) Thanks [@tractorjuice](https://github.com/tractorjuice)! - fix(wardley): allow hyphens in unquoted component names Multi-word names containing hyphens — e.g. `real-time processing`, `end-user`, `on-call engineer` — now parse without quoting, bringing the grammar in line with the OnlineWardleyMaps (OWM) convention. `A->B` (no-space arrow) still tokenises correctly. - [#7523](mermaid-js/mermaid#7523) [`5144ed4`](mermaid-js/mermaid@5144ed4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Arrow blocks in block-beta diagrams not spanning the specified number of columns when using `:n` syntax. - [#7262](mermaid-js/mermaid#7262) [`13d9bfa`](mermaid-js/mermaid@13d9bfa) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(block): Ensure block diagram hexagon blocks respect column spanning syntax - [#7684](mermaid-js/mermaid#7684) [`e14bb88`](mermaid-js/mermaid@e14bb88) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: loosen `uuid` dependency range to allow v14 Mermaid does not use any of the vulnerable code in CVE-2026-41907, but this allows users to silence any `npm audit` alerts on it. - [#7633](mermaid-js/mermaid#7633) [`9217c0d`](mermaid-js/mermaid@9217c0d) Thanks [@Felix-Garci](https://github.com/Felix-Garci)! - fix(block): add support for all arrow types in block diagrams - [#7587](mermaid-js/mermaid#7587) [`5e7eb62`](mermaid-js/mermaid@5e7eb62) Thanks [@MaddyGuthridge](https://github.com/MaddyGuthridge)! - chore: drop lodash-es in favour of es-toolkit - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Previously the lexer only matched ASCII `[A-Za-z]+` for text tokens, even though the grammar referenced `UNICODE_TEXT`. Bare Chinese, Japanese, Korean, emoji, and accented Latin characters in labels caused a parse error. Added a `[^\x00-\x7F]+` lexer rule to emit `UNICODE_TEXT` and included it in the `alphaNumToken` grammar rule. Fixes #7120. - [#7737](mermaid-js/mermaid#7737) [`4755553`](mermaid-js/mermaid@4755553) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: improve D3 types for mermaidAPI funcs - [#7737](mermaid-js/mermaid#7737) [`6476973`](mermaid-js/mermaid@6476973) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: handle `&` when namespacing CSS rules - [#7520](mermaid-js/mermaid#7520) [`8c1a0c1`](mermaid-js/mermaid@8c1a0c1) Thanks [@RodrigojndSantos](https://github.com/RodrigojndSantos)! - fix(stateDiagram): comments starting with one `%` are no longer treated as comments Switch to using two `%%` if you want to write a comment. - Updated dependencies \[[`7a8fb85`](mermaid-js/mermaid@7a8fb85), [`675a64c`](mermaid-js/mermaid@675a64c)]: - @mermaid-js/parser@1.1.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>

github-actions Bot added Type: Bug / Error Something isn't working or is incorrect Sponsored by MermaidChart labels Apr 8, 2026

knsv-bot and others added 3 commits April 8, 2026 15:24

fix(sequence): add font-weight bold to sectionTitle class

f448d7f

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

knsv marked this pull request as ready for review April 8, 2026 15:49

knsv approved these changes Apr 8, 2026

View reviewed changes

revert: remove font-weight bold from sectionTitle

ce743ee

Argos screenshots confirm section titles should not be bold. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

knsv added this pull request to the merge queue Apr 8, 2026

Merged via the queue into develop with commit c4c5c5a Apr 8, 2026
26 checks passed

knsv deleted the bug/7546_alt-else-label-box branch April 8, 2026 16:57

github-actions Bot mentioned this pull request May 11, 2026

Version Packages #7738

Merged

This was referenced May 12, 2026

chore: sync Mermaid runtime to 11.15.0 zhongmiao-org/mermaid-markdown-bridge#30

Closed

chore: sync Mermaid runtime to 11.15.0 zhongmiao-org/mermaid-markdown-bridge#33

Closed

ark-65 mentioned this pull request May 12, 2026

chore: sync Mermaid runtime to 11.15.0 zhongmiao-org/mermaid-markdown-bridge#36

Merged

Navigation Menu

Repository navigation

fix(sequence): add label box background for alt/else section titles - #7592

fix(sequence): add label box background for alt/else section titles#7592
knsv merged 6 commits into
developfrom
bug/7546_alt-else-label-box

knsv-bot commented Apr 8, 2026

Uh oh!

netlify Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

argos-ci Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

knsv-bot commented Apr 8, 2026

Summary

Classification

Verification

Uh oh!

netlify Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

changeset-bot Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

argos-ci Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Apr 8, 2026 •

edited

Loading

changeset-bot Bot commented Apr 8, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 8, 2026 •

edited

Loading

codecov Bot commented Apr 8, 2026 •

edited

Loading

argos-ci Bot commented Apr 8, 2026 •

edited

Loading