# What changed in mermaid

> 230 changes in mermaid 10 to 12 from its official release notes, upgrade guides and advisories: 24 breaking, 1 deprecations, 18 security, 52 new APIs and options. Each one cited. Sources checked 2026-10-18. HTML: https://unstale.sh/npm/mermaid/

To see which of these apply to a repository, run `npx @unstale/cli init` in it.

## mermaid 12

### Breaking changes

- The ELK option is enabled by default, routing edges that feed back into a subgraph downstream; set it to false to retain the previous routing. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Removed from Mermaid's public API; the layout internal exports are now bundled by @mermaid-js/layout-elk. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The CommonLayout* types are no longer part of Mermaid's public API. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Removed from Mermaid's public API; the layout internal exports are now bundled by @mermaid-js/layout-elk. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Removed from Mermaid's public API; the layout internal exports are now bundled by @mermaid-js/layout-elk. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The flowchart, class, and state config sections no longer support defaultRenderer; it is ignored. Use the top-level layout option to select the layout algorithm. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Legacy flowchart, class, and state diagram IDs are gone; detectType now returns flowchart-v2, classDiagram, and stateDiagram for that syntax. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- This dist file now contains syntax es-module-lexer used by Vite rejects; Vite users should import the mermaid package specifier or core build instead. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Stadium, circle, diamond, double-circle, Display, and Delay labels no longer wrap at this width; explicit line breaks are kept, and an explicit node width takes precedence. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Edges now attach to non-rectangular shapes on their outlines rather than being displaced by half a pixel; rendered output can move by up to a pixel where polygon shapes terminate edges. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- ELK is bundled, registered automatically, and is now the default layout for flowchart, state, class, entity-relationship, requirement, and use-case diagrams. Set layout: dagre to retain the previous layout. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- ELK replaces dagre as the default layout. Set layout to dagre during initialization or in diagram front matter to retain the previous layout. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Hops keep a straight run clear of bends and are omitted if they would shrink below 60% of the requested radius. Crossings inside a rounded bend are ignored; affected swimlane and ELK diagrams may render differently. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Removed from Mermaid's public API; the layout internal exports are now bundled by @mermaid-js/layout-elk. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Mermaid now targets ES2024 and requires Safari 17.4+; package metadata declares Node.js v22.12+. Older browsers may need polyfills or transpilation. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)

### New APIs and options

- Opt-in mindmap coloring by hierarchy depth uses the existing theme palette. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Packet diagrams add bitOrder, defaulting to ascending; descending mirrors each row so it reads from highest bit to lowest. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- A subgraph can select its own ELK algorithm with @{ algorithm: ... }; supported values include elk.layered, elk.box, elk.rectpacking, elk.stress, elk.force, elk.mrtree, elk.radial, and elk.sporeOverlap. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Layout engines can opt to measure plain cluster labels at their natural width rather than the flowchart.wrappingWidth fallback; bundled ELK uses this and labelled ELK subgraphs may change size. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- theme, look, and layout can be configured per diagram type, including in initialize() or front matter; diagram-scoped values take precedence over global values at the same layer. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Adds UML use case diagrams with actors, use cases, system boundaries, relationships, stereotypes, notes, JSON tables, class and style support, accessibility metadata, and business variants. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Use case diagrams can choose a per-element palette cycle with colorScheme: 'rotate'; otherwise the redux themes colour elements by role, and classDef/style takes precedence. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)

### Performance

- detectType and extractFrontMatter use a linear scanner instead of a polynomially backtracking regex on hot paths. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)

### Behavior and default changes

- Error diagrams now show the actual parse error below the syntax-error headline, wrapped to at most four lines. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Gantt diagrams now warn when a task references an unknown after/until task ID or has an invalid end value. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Sequence diagrams now allow whitespace between an actor name and its @{ ... } configuration object. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Actor-menu keywords can be used as participant IDs in messages; the keywords are recognized as statements only when an actor follows on the same line. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Composite blocks now use per-container colours under redux-color and redux-dark-color; opt in with an explicit theme, and classDef/style still wins. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The default ELK preset now uses balanced Brandes-Koepf placement to improve branch and composite-state entry alignment; some diagrams may become wider or taller, while depthFirst retains the previous default. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Hand-drawn hachure fills are denser and read as an even tint rather than stripes; state markers are similarly close to solid. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- ELK layouts and their listed variants work without installing or registering @mermaid-js/layout-elk; the tiny build omits ELK and falls back to dagre. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- neo replaces classic as the default look for flowchart, class, state, ER, requirement, sequence, use case, swimlane, Venn, and agentflow diagrams. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The release introduces a redux-color / neo default appearance; existing flowcharts, state, and class diagrams may be recoloured, and config can specify theme: default and look: classic to keep the old look. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Class boxes and flowchart subgraph containers receive per-item palette colours, cycling every 12; explicit classDef or style still takes precedence. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Composite states receive per-container palette colours; nested composites advance through the palette, while explicitly styled composites opt out. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Swimlane lanes receive per-lane colours cycling every 12; the lane holding ungrouped nodes gets its own slot and follows the diagram look. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The theme now defines variables previously missing from its base theme, and pie, gantt, user-journey, and Venn diagrams use its palette. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Cycle removal starts from source nodes so feedback edges are reversed instead of forward-flow edges. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Swimlane layout is now supplied by its schema default rather than forced by its init hook, so per-diagram and front matter layout settings are honored. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- redux-color replaces default as the default theme for flowchart, class, state, ER, requirement, sequence, use case, swimlane, Venn, and agentflow diagrams. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)

### Fixes and other changes

- Circle and double-circle nodes are sized from their label instead of `minNodeWidth`, and neo circle padding is trimmed. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Edges are clipped for the layout engine that drew them, so diagrams pinning their own engine still render when the configured default is another engine. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- ELK no longer straightens an edge terminal when doing so would place a label over another edge or an edge through a label. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Mindmap HTML labels remain readable in the neo look on themes that repaint node backgrounds. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Mindmap node labels are centered when `htmlLabels` is false. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Swimlane cluster DOM IDs are scoped like other cluster IDs, preventing collisions between two diagrams on one page. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Shared terminal lanes are split again after crossing cleanup, preventing a detouring edge from ending at the same attachment point as a neighboring edge. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Swimlane nodes with no edges keep their source order inside a lane instead of being sorted by ID. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- In LR diagrams, a lane's title band is moved clear of an edge crossing it when lanes have no direction of their own and the edge runs along the band's border. (12.2.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0)
- Cardinality labels are placed beside relation ends on dagre's sides with ELK, centered on dagre's ends, and no longer have clipped text. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- ELK class-diagram cardinalities are kept off namespace frames. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Edge labels are re-projected onto the straightened route so they remain centered on the edge. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Duplicate event modeling frame IDs are rejected before rendering. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Explicit source relations are preserved on event modeling reset frames. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Repeated subgraph IDs render as one merged subgraph with ELK; classes and collapsed view apply regardless of declaration order. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Hyphenated actor and participant names are allowed when a configuration object is attached. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Partial overrides of object-valued theme variables retain theme-generated values for keys omitted from the override. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- The xychart title is centered over the plot area rather than the whole chart. (12.1.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.1.0)
- Sequence diagram actor background and border palettes are indexed by their own lengths, preventing missing fills when palette lengths differ. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Block diagrams using look: neo now render node borders instead of losing them when gradient definitions were unavailable. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Labels now treat </br> as a line break in both plain SVG text and HTML-label rendering paths. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Bundling fastdom fixes issues with a global define. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Circle, double-circle, Delay, and Display nodes size themselves using label height as well as width so wrapped labels stay inside their outlines. Stacked and lined document labels clear the full depth of the wavy bottom edge. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Unregistered layouts now fall back to dagre with a warning instead of throwing; this also covers state diagrams and mindmaps. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Sequence diagram actors, notes, and participant alignment render correctly under the redux theme. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- The theme now defines variables previously missing from its base theme, and pie, gantt, user-journey, and Venn diagrams use its palette for more distinguishable colors and banding. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- redux-dark, redux-dark-color, and neo-dark now compute secondBkg correctly for railroad; their gantt done-task labels also meet improved contrast, and ER/requirement styles validate look before CSS selector interpolation. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- C4 relationships, including BiRel and Rel_* forms, can now use boundary aliases as endpoints without throwing an unknown-shape error. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Block node borders now use the theme's strokeWidth instead of a fixed 1px, correcting themes such as neo that specify a different width. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- C4 named attributes such as $tags and $sprite no longer get wrapped as text when they occupy a positional text slot after an omitted argument, preventing rendering crashes. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- An unrecognized theme name now resolves to the default theme name as well as its variables, rather than retaining an invalid name. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)
- Under ELK, ovals receive vertical padding and spread edge attachment points across their sides; the renderer accounts for end-marker offsets so short entry stubs do not flip markers. (12.0.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)

## mermaid 11

### Breaking changes

- classDiagram uses the unified (v2) renderer by default; set class.defaultRenderer to 'dagre-d3' to restore the legacy renderer. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- This function is deprecated and has no observable effect because the next render() or parse() call clears currentConfig. (11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1)
- Class diagram namespaces now support nesting via dot notation and syntactic nesting; set this option to false to retain the previous non-nested rendering behavior. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Some CSS at-rules are disallowed in custom CSS. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- In state diagrams, end note closes a note only when used on a new line. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Comments starting with one % are no longer treated as comments; use two %% to write a comment. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Internal element IDs are now prefixed with the diagram's SVG element ID to prevent duplicates when rendering multiple diagrams; CSS or JS exact ID selectors should use attribute-ending selectors instead. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- ELK layout edges now default to rounded right-angle segments instead of inheriting the global basis default; non-ELK layouts are unaffected. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Plain text labels now render as regular text rather than being treated as markdown by default; newline characters create line breaks, and markdown-like text is not misinterpreted. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)

### Security

- CSS sibling combinators are now handled in compileCSS. (10.9.8, 11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.8), [security advisory](https://github.com/advisories/GHSA-6X64-9X62-F2GX)
- Mermaid allows CSS injection applying to sibling elements of the diagram (10.9.8, 11.16.1) — [security advisory](https://github.com/advisories/GHSA-6X64-9X62-F2GX)
- Mermaid Architecture diagrams are vulnerable to prototype pollution (11.16.1) — [security advisory](https://github.com/advisories/GHSA-3RRR-JR9J-H3Q3)
- Mermaid configuration APIs allow prototype pollution (10.9.8, 11.16.1) — [security advisory](https://github.com/advisories/GHSA-C4C3-PG64-4M4V)
- Mermaid radar diagrams are vulnerable to DoS (11.16.1) — [security advisory](https://github.com/advisories/GHSA-RHH3-JPG6-66XH)
- Mermaid XY Charts are vulnerable to an infinite loop DoS (10.9.8, 11.16.1) — [security advisory](https://github.com/advisories/GHSA-2V8P-3F2J-5MP7)
- Protections against prototype pollution have been increased. (10.9.8, 11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.8)
- XY charts now support zero-width x-axis ranges. (10.9.8, 11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.8), [security advisory](https://github.com/advisories/GHSA-2V8P-3F2J-5MP7)
- Unbalanced CSS styles in classDefs are prevented. (10.9.6, 11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6), [security advisory](https://github.com/advisories/GHSA-XCJ9-5M2H-648R)
- Creates CSS styles using the CSSOM. (10.9.6, 11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6), [security advisory](https://github.com/advisories/GHSA-GHCM-XQFW-Q4VR)
- Limits loops when all dates are excluded in Gantt diagrams. (10.9.6, 11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6), [security advisory](https://github.com/advisories/GHSA-6M6C-36F7-FHXH)
- Mermaid Gantt Charts are vulnerable to an Infinite Loop DoS (10.9.6, 11.15.0) — [security advisory](https://github.com/advisories/GHSA-6M6C-36F7-FHXH)
- Mermaid: Improper sanitization of `classDef` in state diagrams leads to HTML injection (10.9.6, 11.15.0) — [security advisory](https://github.com/advisories/GHSA-GHCM-XQFW-Q4VR)
- Mermaid: Improper sanitization of `classDefs` in diagrams leads to CSS injection (10.9.6, 11.15.0) — [security advisory](https://github.com/advisories/GHSA-XCJ9-5M2H-648R)
- Mermaid: Improper sanitization of configuration leads to CSS injection (10.9.6, 11.15.0) — [security advisory](https://github.com/advisories/GHSA-87F9-HVMW-GH4P)
- Blocks stylis scope escape. (10.9.6, 11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6), [security advisory](https://github.com/advisories/GHSA-87F9-HVMW-GH4P)

### New APIs and options

- Keeps a recursive flow's entry node on top. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Adds the `elk.nodePlacementAlignment` configuration option. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- ER diagrams now support subgraphs. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Adds folder, bucket, console (terminal window), and browser shapes to flowcharts. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Adds a person shape, usable in flowcharts via `A@{ shape: person }`. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Flowchart subgraphs can be collapsed with `subgraphId@{ view: collapsed }`. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Adds legends for named line and bar series. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Architecture-beta diagrams add an align row or column directive for explicitly aligning services. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds a configuration option to make architecture diagrams render deterministically. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds the Cynefin framework as a beta diagram type for representing its five complexity domains. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- ER attribute types can be optional, indicated with a ? suffix. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Pie charts support donut charts, legend positioning, and slice highlighting. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds Railroad Diagram support using ABNF input syntax. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds Railroad Diagram support using IR input syntax. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds Railroad Diagram support using EBNF input syntax. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds Railroad Diagram support using PEG input syntax. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Adds swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Extends treeView-beta with features useful for representing file and directory structures. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- XY chart line plots support per-point text labels. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- XY charts can rotate X-axis labels. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Block diagrams support all arrow types. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Sankey diagrams support custom node colors. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Flowcharts can use a datastore shape to represent data persistence. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Architecture-beta diagrams expose this fcose layout knob so authors can tune layout density and spread overlapping siblings. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- A new Event Modeling diagram is available. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Architecture-beta diagrams expose this fcose layout knob so authors can tune layout density and spread overlapping siblings. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Sankey diagrams allow node padding to be configured. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Architecture-beta diagrams expose this fcose layout knob so authors can tune layout density and spread overlapping siblings. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Sankey diagrams allow node width to be configured. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Architecture-beta diagrams expose this fcose layout knob so authors can tune layout density and spread overlapping siblings. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Sankey diagrams support an outlined label style. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Adds the randomize config option for architecture diagrams, defaulting to false for deterministic layout. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds neo look styling across state, sequence, ER, requirement, mindmap, flowchart, class, timeline, and gitGraph diagrams; some include themes, drop shadows, or enhanced styling. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds an option to change timeline direction. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds a new TreeView diagram type. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds Wardley Maps as a beta diagram type, with component positioning, links, evolution stages, annotations, strategy markers, and theme integration. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds theme support for data label colour in xy charts. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Adds the showDataLabelOutsideBar option for xy charts. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Exports the AsyncIconLoader type for developers using icon loaders. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Adds solid and stick half-arrowheads, along with central connection support. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Exports the IconLoader type for developers using icon loaders. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Adds the Ishikawa diagram type. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Adds alias support for the new participant syntax. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Exports the SyncIconLoader type for developers using icon loaders. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Adds the venn-beta diagram type. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)

### Performance

- Uses fastdom to batch DOM measurements, with up to 25% speedup. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)

### Behavior and default changes

- C4 elements render through the unified shape system, using the new person shape. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Services are rendered in definition order, and more service IDs are supported. (11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1)
- Block padding and sanitized configuration are read dynamically instead of at module load time. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Gantt charts accept multiple excludes and includes lines, allowing long exclusion lists to be split into commented groups. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Generic classes support styling and callbacks. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- TreeView diagrams accept box-drawing character input. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Sequence diagrams now render a background box behind alt/else section title labels. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- The sequence diagram directive supports decimal start and increment values. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Class diagrams now allow notes in namespaces. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Routes label creation through createText, adding support for KaTeX and FontAwesome icons loaded via iconpacks in some older labels. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Supports edge animation when using the hand drawn look. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)

### Fixes and other changes

- Restores the edgePaths class on the rendered SVG edge group and updates flowchart, block, and user journey stylesheets to target it. (11.17.2) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.2)
- C4 element labels wrap according to c4.wrap again, keeping long descriptions within the configured c4.width. (11.17.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.1)
- Composition, aggregation, extension, dependency, and lollipop markers no longer scale with edge stroke width, keeping them outside the class box boundary. (11.17.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.1)
- With layout: elk, neo-look arrowheads and crow's-foot markers use the configured theme colours and stroke widths on the first render. (11.17.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.1)
- Fixes sibling blocks overlapping when one has a label wider than 200px. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Named attributes such as `$tags`, `$link` and `$sprite` are no longer clobbered to undefined when they arrive in an earlier positional slot of C4 statements. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Allows classdefs to update text color in block diagrams. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Stops dagre layout from spamming warn-level logs on every node, edge, and cluster. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Fixes a `RangeError: Invalid array length` crash when rendering certain edges. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Reverts the behavior change from #7672 because arrows between subgraphs are broken. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- A diagram's own nodeSpacing and rankSpacing now take effect in the unified dagre layout. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Prevents icons from disappearing after strict security sanitization. (11.17.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.17.0)
- Radar charts show at most 32 ticks, even when ticks is set higher. (11.16.1) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1)
- Fixes rendering of 3-circle Venn diagram unions. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Block label sanitization respects the current DOMPurify configuration. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- ER attribute names and types can contain special characters, such as dots, when escaped with backticks. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Prevents a crash when a flowchart node shape is undefined. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Flowchart and state self-loop edges render as a single SVG path. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Dagre layout respects the direction keyword set per subgraph. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Gantt vertical markers render without affecting row layout or chart height. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Labeled higher-arity unions render even when their underlying pairwise unions are not declared. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Supports consecutive LaTeX expressions in node text. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Radar axis labels align according to angular position to prevent clipping. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Rect backgrounds use theme-aware fallback colors. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- State diagram click tooltips render with mermaidTooltip. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Fixes invalid syntax between state and {. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Treemap labels render correctly in large nested diagrams. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Plot data is truncated to match the X-axis category count. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- YAML frontmatter delimiters can be preceded by horizontal whitespace. (11.16.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0)
- Arrow blocks now span the specified number of columns when using :n syntax. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Self-referential class multiplicity labels are no longer rendered multiple times. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Block diagram column widths no longer shrink when mixing different column spans. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Gantt diagrams now limit iteration for the excludes field. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Block diagram hexagon blocks now respect column spanning syntax. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- The messageAlign label position is corrected for right-to-left arrows in sequence diagrams. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Unquoted axis, quadrant, and point labels accept CJK, emoji, Latin-1 accented characters, and other non-ASCII text. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Unquoted Wardley map component names can contain hyphens, including multi-word names; no-space arrows still tokenize correctly. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Unnecessary sanitization of Wardley map text is fixed. (11.15.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0)
- Supports inline annotation syntax such as `class Shape <<interface>>`. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Allows :::className syntax inside composite state blocks. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Fixes parsing when `1` is used as the right-side entity identifier after a cardinality alias. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Prevents `<` and `&` from being escaped when htmlLabels is false. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Preserves the cause hierarchy when the effect is indented more than causes. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Expands the viewBox to prevent long pie chart titles from being clipped. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Prevents sequence diagrams from hanging when `as` is used without a trailing space in participant declarations. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Flowcharts now warn when a style statement targets a non-existent node. (11.14.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0)
- Allows quoted string labels in architecture-beta diagrams. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Corrects the length of architecture diagram lines. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Prevents unintended opacity on SVG AWS icons containing rect elements. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Supports ComponentQueue_Ext to prevent parsing errors. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Ensures correct edge label rendering when flowchart htmlLabels is false. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Corrects edge label positioning. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Recognizes the '1' cardinality alias before relationship operators. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Prevents syntax errors when node names contain 'u', numbers, and decimals. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Restores readable outside-text color for done tasks in dark mode. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Corrects BT orientation arc sweep flags so merge and non-merge arrows bend in the correct direction. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Passes gitGraphConfig to renderer functions so directives are applied properly. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Restores the original hexagon implementation. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Respects markdownAutoWrap: false for flowchart markdown labels when htmlLabels is enabled, preventing text auto-wrapping. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Fixes mindmap rendering in ELK layout. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Fixes mindmap rendering when the number of Level 2 nodes exceeds 11. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Corrects block positioning when nested blocks span multiple columns. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Improves participant parsing and prevents recursive loops on invalid syntax. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Restores the original roundedRect implementation. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Prevents HTML tags from being escaped when rendering labels in the sandbox. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Allows colons in transition and state description text. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Fixes parsing so direction TD is recognized within subgraphs. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Corrects viewBox casing and makes SVGs responsive. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- In dark theme, derives taskTextDarkColor from doneTaskBkgColor for readable done-task text. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Positions tooltips near the hovered element. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Fixes treemap classDef style application so user-defined styles are applied. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Prevents browser hangs when accDescr is multiline in XY charts. (11.13.0) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0)
- Validates dates and tick interval to prevent UI freezes or crashes in Gantt diagrams. (11.12.2) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.13.0), [release notes](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.12.2)

## mermaid 10

### Security

- Backports a dependency update to address CVE-2025-57347. (10.9.5) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.5)
- The v10.x branch supports newer DOMPurify versions, avoiding CVE-2025-26791. (10.9.5) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.5)

### Deprecations

- The mermaidAPI.setConfig() function is deprecated. (10.9.8) — [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.8)