Starstruk Logo MarkStarstruk

mermaid@11.16.0

mermaid-js/mermaidmermaid@11.16.0Jun 25, 2026by github-actions[bot]

AI Summary

This minor release introduces the Cynefin framework as a new diagram type and enhances existing diagrams like Pie charts, Gantt charts, and Xycharts. It also adds standalone Swimlane diagrams and support for multiple Railroad diagram syntaxes. Numerous bug fixes were implemented across various diagram types.

Key Highlights

  • New Cynefin beta diagram for decision-making frameworks
  • Enhanced Pie charts with donut mode and customizable legends
  • Standalone Swimlane diagrams with dedicated layout algorithms
  • Railroad diagram support for IR, EBNF, ABNF, and PEG syntaxes

New Features

  • Cynefin diagram type (beta)
  • Enhanced Pie chart with donut and legend features
  • Standalone Swimlane diagrams
  • Railroad diagram syntax support
  • Xychart label rotation and per-point text labels
  • Architecture alignment directives
  • TreeView enhancements for file structures

Full Release Notes

### Minor Changes

-   [#7535](https://github.com/mermaid-js/mermaid/pull/7535) [`ea1c48f`](https://github.com/mermaid-js/mermaid/commit/ea1c48f53fce5d025388d386c90da8743ee25b13) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design.

-   [#7721](https://github.com/mermaid-js/mermaid/pull/7721) [`f45cc2c`](https://github.com/mermaid-js/mermaid/commit/f45cc2cc5683b90990e374a463b7bcad0fd68a38) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams

-   [#7550](https://github.com/mermaid-js/mermaid/pull/7550) [`f1f4d45`](https://github.com/mermaid-js/mermaid/commit/f1f4d45ee0513b64a2bd280087d31656f9d2c786) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots

-   [#7527](https://github.com/mermaid-js/mermaid/pull/7527) [`b4d0442`](https://github.com/mermaid-js/mermaid/commit/b4d0442dd1628acb3f71681519e7f47fc8bacf55) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures.

-   [#7793](https://github.com/mermaid-js/mermaid/pull/7793) [`a6f097d`](https://github.com/mermaid-js/mermaid/commit/a6f097d580d459dfc3ade3e21030037341f79940) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix

-   [#7772](https://github.com/mermaid-js/mermaid/pull/7772) [`37f2e36`](https://github.com/mermaid-js/mermaid/commit/37f2e36fa017698b66093ac5518396523a7a3241) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270)

-   [#7708](https://github.com/mermaid-js/mermaid/pull/7708) [`4e63e9d`](https://github.com/mermaid-js/mermaid/commit/4e63e9d338b6476df283afd4a002072945bc4563) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly.

-   [#7760](https://github.com/mermaid-js/mermaid/pull/7760) [`05223be`](https://github.com/mermaid-js/mermaid/commit/05223bee47a424be3ba7805e753b96861d342765) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice

-   [#7251](https://github.com/mermaid-js/mermaid/pull/7251) [`216e4e9`](https://github.com/mermaid-js/mermaid/commit/216e4e9a61afceae885b00854f79e17373ccad31) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta).

-   [#7774](https://github.com/mermaid-js/mermaid/pull/7774) [`e5c75e6`](https://github.com/mermaid-js/mermaid/commit/e5c75e6b797f84f8f652d8771eb1ce6161dd8f89) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis

-   [#7791](https://github.com/mermaid-js/mermaid/pull/7791) [`974fa7b`](https://github.com/mermaid-js/mermaid/commit/974fa7b7e791b442ad5f7862f1cbecd53d982485) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm

### Patch Changes

-   [#7744](https://github.com/mermaid-js/mermaid/pull/7744) [`633c261`](https://github.com/mermaid-js/mermaid/commit/633c261dadbaa20ee0cf9a0299e2269abe4ca573) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729.

-   [#7732](https://github.com/mermaid-js/mermaid/pull/7732) [`c8ba156`](https://github.com/mermaid-js/mermaid/commit/c8ba156f551e94dd9a5c30b4971fe83ef3538634) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613

-   [#7314](https://github.com/mermaid-js/mermaid/pull/7314) [`4e4e6c4`](https://github.com/mermaid-js/mermaid/commit/4e4e6c4a108d834dd0f643b08deb89159e0eca94) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined

-   [#7762](https://github.com/mermaid-js/mermaid/pull/7762) [`cfd2391`](https://github.com/mermaid-js/mermaid/commit/cfd23916f3c6b3ceafc4c0cfaf4078f6442bbc4f) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes

-   [#7284](https://github.com/mermaid-js/mermaid/pull/7284) [`c1f116d`](https://github.com/mermaid-js/mermaid/commit/c1f116d36646786326c596a5f25e519bdaac7748) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height

-   [#7786](https://github.com/mermaid-js/mermaid/pull/7786) [`72fbab1`](https://github.com/mermaid-js/mermaid/commit/72fbab1a4d6efbfa219b13c1639dabcadc754ad8) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks

-   [#7672](https://github.com/mermaid-js/mermaid/pull/7672) [`4887e97`](https://github.com/mermaid-js/mermaid/commit/4887e9721c33b5d771306a4e7ab768d78908a157) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648

-   [#7734](https://github.com/mermaid-js/mermaid/pull/7734) [`a4c1e50`](https://github.com/mermaid-js/mermaid/commit/a4c1e507a347256f1f3a42be3feb5b6ddc7257f2) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time

-   [#7674](https://github.com/mermaid-js/mermaid/pull/7674) [`cc75089`](https://github.com/mermaid-js/mermaid/commit/cc750896b21a2715256ac0de486bafe0351c40c4) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels

-   [#7711](https://github.com/mermaid-js/mermaid/pull/7711) [`be2e282`](https://github.com/mermaid-js/mermaid/commit/be2e28201445505ec68b1ebf6e3e6813fb6a6898) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path.

-   [#7781](https://github.com/mermaid-js/mermaid/pull/7781) [`d945968`](https://github.com/mermaid-js/mermaid/commit/d945968c13b154dcf2c89ad1e6ed5104458d32fe) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping

-   [#7661](https://github.com/mermaid-js/mermaid/pull/7661) [`2f5e9e8`](https://github.com/mermaid-js/mermaid/commit/2f5e9e8c9aabb74e61e43428e91217e9585c8d05) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering

-   [#7780](https://github.com/mermaid-js/mermaid/pull/7780) [`8dcdce4`](https://github.com/mermaid-js/mermaid/commit/8dcdce40ee091aafd546aa842aca8b4da1e49c1b) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count

-   [#7235](https://github.com/mermaid-js/mermaid/pull/7235) [`1bbc189`](https://github.com/mermaid-js/mermaid/commit/1bbc189b69be4c50a08ba74501567123769f30bb) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text

-   [#7247](https://github.com/mermaid-js/mermaid/pull/7247) [`365c1b1`](https://github.com/mermaid-js/mermaid/commit/365c1b1062dd6b5b7c59682f7df6b5c9ed40cd16) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams

-   [#7754](https://github.com/mermaid-js/mermaid/pull/7754) [`06a32b7`](https://github.com/mermaid-js/mermaid/commit/06a32b74fbe574ba36fb77ffd9743a8b884b2f55) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors

-   [#7693](https://github.com/mermaid-js/mermaid/pull/7693) [`afaf306`](https://github.com/mermaid-js/mermaid/commit/afaf3062381d115d66744413151b642f124dd9ba) 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. Fixes #7120.

-   [#7751](https://github.com/mermaid-js/mermaid/pull/7751) [`79e97cd`](https://github.com/mermaid-js/mermaid/commit/79e97cd7b9cb8f2d9bf6ba6d04de5cdeb4223d1b) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip

-   [#7570](https://github.com/mermaid-js/mermaid/pull/7570) [`c2305df`](https://github.com/mermaid-js/mermaid/commit/c2305df424963c0263d1c75804248db2969ee17e) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{'

-   [#7758](https://github.com/mermaid-js/mermaid/pull/7758) [`a4a250b`](https://github.com/mermaid-js/mermaid/commit/a4a250b96321e0648eecfbadbfb17b1537dff691) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656.

-   Updated dependencies \[[`ea1c48f`](https://github.com/mermaid-js/mermaid/commit/ea1c48f53fce5d025388d386c90da8743ee25b13), [`b4d0442`](https://github.com/mermaid-js/mermaid/commit/b4d0442dd1628acb3f71681519e7f47fc8bacf55), [`4e63e9d`](https://github.com/mermaid-js/mermaid/commit/4e63e9d338b6476df283afd4a002072945bc4563), [`216e4e9`](https://github.com/mermaid-js/mermaid/commit/216e4e9a61afceae885b00854f79e17373ccad31)]:
    -   @mermaid-js/parser@1.2.0