Repository navigation
Releases: mermaid-js/mermaid
Release list
mermaid@12.2.0
Minor Changes
- #8394
6ac38cbThanks @jackroberts236! - feat: Add opt-in mindmap coloring by hierarchy depth usingmindmap.colorBy: depthand the existing theme palette.
Patch Changes
-
#8409
419ee68Thanks @ashishjain0512! - fix: size circle and double-circle nodes from their label instead ofminNodeWidth, and trim neo circle padding -
#8395
2fb3ff1Thanks @ashishjain0512! - fix: ELK no longer straightens an edge terminal when that would put a label over another edge, or an edge through a label -
#8394
cbf89abThanks @jackroberts236! - fix: Keep mindmap HTML labels readable in the neo look on themes that repaint node backgrounds -
#8390
430ac9bThanks @ashishjain0512! - fix: Centre mindmap node labels whenhtmlLabelsis false -
#8161
d7532edThanks @filipsajdak! - fix: scope a swimlane cluster's DOM id like every other cluster, so two diagrams on one page do not collide -
#8270
ad8d61aThanks @filipsajdak! - fix(rendering): clip an edge for the layout engine that drew it, so a diagram pinning its own engine (bpmn, swimlanes) still renders when the configured default is another one -
#8383
9d41c0fThanks @filipsajdak! - fix(swimlanes): split shared terminal lanes again after crossing cleanup, so an edge that detours around another lane no longer ends on the same attachment point as a neighbouring edge -
#8384
6c67397Thanks @filipsajdak! - fix(swimlanes): move a lane's title band clear of an edge that crosses it, in LR diagrams whose lanes carry no direction of their own and when the edge runs along the band's border -
#8366
40124c3Thanks @SwastikTripathi! - fix: swimlane nodes with no edges keep their source order inside a lane instead of being sorted by ID
@mermaid-js/tiny@12.2.0
Minor Changes
- #8394
6ac38cbThanks @jackroberts236! - feat: Add opt-in mindmap coloring by hierarchy depth usingmindmap.colorBy: depthand the existing theme palette.
Patch Changes
-
#8409
419ee68Thanks @ashishjain0512! - fix: size circle and double-circle nodes from their label instead ofminNodeWidth, and trim neo circle padding -
#8395
2fb3ff1Thanks @ashishjain0512! - fix: ELK no longer straightens an edge terminal when that would put a label over another edge, or an edge through a label -
#8394
cbf89abThanks @jackroberts236! - fix: Keep mindmap HTML labels readable in the neo look on themes that repaint node backgrounds -
#8390
430ac9bThanks @ashishjain0512! - fix: Centre mindmap node labels whenhtmlLabelsis false -
#8161
d7532edThanks @filipsajdak! - fix: scope a swimlane cluster's DOM id like every other cluster, so two diagrams on one page do not collide -
#8270
ad8d61aThanks @filipsajdak! - fix(rendering): clip an edge for the layout engine that drew it, so a diagram pinning its own engine (bpmn, swimlanes) still renders when the configured default is another one -
#8383
9d41c0fThanks @filipsajdak! - fix(swimlanes): split shared terminal lanes again after crossing cleanup, so an edge that detours around another lane no longer ends on the same attachment point as a neighbouring edge -
#8384
6c67397Thanks @filipsajdak! - fix(swimlanes): move a lane's title band clear of an edge that crosses it, in LR diagrams whose lanes carry no direction of their own and when the edge runs along the band's border -
#8366
40124c3Thanks @SwastikTripathi! - fix: swimlane nodes with no edges keep their source order inside a lane instead of being sorted by ID
mermaid@12.1.0
Minor Changes
-
#8303
9140716Thanks @filipsajdak! - feat: add theelk.orientFeedbackEdgesoption, enabled by default. With the ELK layout, an edge from a node that a subgraph feeds back into that subgraph is now routed downstream instead of around the subgraph. This changes the layout of existing ELK diagrams that contain such edges; setelk.orientFeedbackEdges: falseto keep the previous routing. -
#8250
fd4f5f2Thanks @kartben! - feat: add abitOrderoption to packet diagrams. It defaults toascending, which is the current
behaviour, anddescendingmirrors every row so it reads from that row's highest bit down to its
lowest. Fields are still declared lowest bit first and keep their width, so switching a diagram
between the two conventions only means changingbitOrder.
Patch Changes
-
#8330
50c9e55Thanks @ashishjain0512! - fix: upgrade chevrotain to 13 so mermaid no longer pulls in vulnerablelodash-es@4.17.23 -
#8259
4c90f5cThanks @afonsojanu! - fix(sequence): allow whitespace between an actor name and its@{ ... }config objectparticipant Bob@{ "type" : "database" }parsed fine, but adding a single space before the
config object (participant Bob @{ "type" : "database" }) failed with a confusing parse error,
even though the plain form without a config object tolerates trailing whitespace just fine. -
#8339
c7fa1a5Thanks @ashishjain0512! - fix: keep ELK class-diagram cardinalities off namespace frames -
#8334
d67331dThanks @ashishjain0512! - fix(class): place cardinality labels beside their relation ends on dagre's sides with ELK, centre dagre's end labels, and stop clipping their text -
#8344
99a050bThanks @pbrolin47! - fix: with the ELK layout, an edge label could sit up to 16px beside its edge instead of centred on it, when the edge's terminal jog was straightened after the label's position was computed. The label is now re-projected onto the straightened route -
#8276
3101c7dThanks @mir-ashiq! - fix(error): show the actual error message in the error diagramWhen a diagram fails to parse, the error diagram now draws the real error message below the
"Syntax error in text" headline, wrapped to at most four lines. Hosts that only show the SVG
(GitHub, GitLab, Obsidian, exported images) no longer hide what actually went wrong, e.g. that the
flowchart edge limit was exceeded andmaxEdgesneeds raising viamermaid.initialize. -
#8296
aa29345Thanks @pentaoa! - fix: preserve explicit source relations on event modeling reset frames -
#8297
967bbdeThanks @pentaoa! - fix: reject duplicate event modeling frame IDs before rendering -
#8337
147f343Thanks @knsv-bot! - fix: a flowchart that declares the same subgraph id more than once now renders as one merged subgraph with the ELK layout instead of producing NaN geometry. Classes andview: collapsedset on a repeated subgraph now apply to it, whichever declaration they follow. -
#8203
40ef7b4Thanks @MFA-G! - perf(frontmatter): replace the quadratic front matter regex on hot pathsfrontMatterRegexbacktracks polynomially on whitespace-heavy input, so a
diagram well inside the defaultmaxTextSizecould stall parsing for over a
second.detectTypeandextractFrontMatternow use a linear scanner that
matches the regex result exactly, leaving no document stripped differently. -
#8254
351d7d2Thanks @galshir! - fix: warn when a gantt task references an unknownafter/untiltask id, or when its end value is neither a valid date nor a valid duration -
#8249
b657a2cThanks @mir-ashiq! - fix(sequence): allow hyphenated actor and participant names when a config object is attached -
#8300
c38a565Thanks @filipsajdak! - fix: A partial override of an object-valued theme variable such asxyChart,radarorcynefinkeeps the values the theme generates for the keys it leaves out -
#8333
8afd83cThanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer includelodash-es@4.17.23 -
#8285
859f1f8Thanks @mir-ashiq! - fix(sequence): allow actor-menu keywords as participant ids in messagesA participant declared as
Link(orLinks,Properties,Details) could not be used as a
message endpoint: the lexer matched the name as thelinkstatement keyword and the parse failed.
Thelink,links,propertiesanddetailskeywords are now only recognized when an actor
follows them on the same line, so participant ids that happen to spell these words work in
messages, while the statements themselves keep parsing as before. -
#8282
b6d952dThanks @belomaxorka! - fix(sequence): allowLinkas a participant ID in messages and actor menusPreserve the ID's case and alias while keeping the
linkandlinksmenu commands supported. -
#8345
7917c1aThanks @knsv-bot! - fix: xychart measures text in SVG units so legends no longer clip on wide charts scaled to fit their container, and the chart title is dropped instead of overflowing when the chart is too short for it -
#8338
4a722fbThanks @ashishjain0512! - fix: Centre the xychart title over the plot area instead of the whole chart -
Updated dependencies [
8afd83c]:- @mermaid-js/parser@2.0.1
@mermaid-js/tiny@12.1.0
Minor Changes
-
#8303
9140716Thanks @filipsajdak! - feat: add theelk.orientFeedbackEdgesoption, enabled by default. With the ELK layout, an edge from a node that a subgraph feeds back into that subgraph is now routed downstream instead of around the subgraph. This changes the layout of existing ELK diagrams that contain such edges; setelk.orientFeedbackEdges: falseto keep the previous routing. -
#8250
fd4f5f2Thanks @kartben! - feat: add abitOrderoption to packet diagrams. It defaults toascending, which is the current
behaviour, anddescendingmirrors every row so it reads from that row's highest bit down to its
lowest. Fields are still declared lowest bit first and keep their width, so switching a diagram
between the two conventions only means changingbitOrder.
Patch Changes
-
#8330
50c9e55Thanks @ashishjain0512! - fix: upgrade chevrotain to 13 so mermaid no longer pulls in vulnerablelodash-es@4.17.23 -
#8259
4c90f5cThanks @afonsojanu! - fix(sequence): allow whitespace between an actor name and its@{ ... }config objectparticipant Bob@{ "type" : "database" }parsed fine, but adding a single space before the
config object (participant Bob @{ "type" : "database" }) failed with a confusing parse error,
even though the plain form without a config object tolerates trailing whitespace just fine. -
#8339
c7fa1a5Thanks @ashishjain0512! - fix: keep ELK class-diagram cardinalities off namespace frames -
#8334
d67331dThanks @ashishjain0512! - fix(class): place cardinality labels beside their relation ends on dagre's sides with ELK, centre dagre's end labels, and stop clipping their text -
#8344
99a050bThanks @pbrolin47! - fix: with the ELK layout, an edge label could sit up to 16px beside its edge instead of centred on it, when the edge's terminal jog was straightened after the label's position was computed. The label is now re-projected onto the straightened route -
#8276
3101c7dThanks @mir-ashiq! - fix(error): show the actual error message in the error diagramWhen a diagram fails to parse, the error diagram now draws the real error message below the
"Syntax error in text" headline, wrapped to at most four lines. Hosts that only show the SVG
(GitHub, GitLab, Obsidian, exported images) no longer hide what actually went wrong, e.g. that the
flowchart edge limit was exceeded andmaxEdgesneeds raising viamermaid.initialize. -
#8296
aa29345Thanks @pentaoa! - fix: preserve explicit source relations on event modeling reset frames -
#8297
967bbdeThanks @pentaoa! - fix: reject duplicate event modeling frame IDs before rendering -
#8337
147f343Thanks @knsv-bot! - fix: a flowchart that declares the same subgraph id more than once now renders as one merged subgraph with the ELK layout instead of producing NaN geometry. Classes andview: collapsedset on a repeated subgraph now apply to it, whichever declaration they follow. -
#8203
40ef7b4Thanks @MFA-G! - perf(frontmatter): replace the quadratic front matter regex on hot pathsfrontMatterRegexbacktracks polynomially on whitespace-heavy input, so a
diagram well inside the defaultmaxTextSizecould stall parsing for over a
second.detectTypeandextractFrontMatternow use a linear scanner that
matches the regex result exactly, leaving no document stripped differently. -
#8254
351d7d2Thanks @galshir! - fix: warn when a gantt task references an unknownafter/untiltask id, or when its end value is neither a valid date nor a valid duration -
#8249
b657a2cThanks @mir-ashiq! - fix(sequence): allow hyphenated actor and participant names when a config object is attached -
#8300
c38a565Thanks @filipsajdak! - fix: A partial override of an object-valued theme variable such asxyChart,radarorcynefinkeeps the values the theme generates for the keys it leaves out -
#8333
8afd83cThanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer includelodash-es@4.17.23 -
#8285
859f1f8Thanks @mir-ashiq! - fix(sequence): allow actor-menu keywords as participant ids in messagesA participant declared as
Link(orLinks,Properties,Details) could not be used as a
message endpoint: the lexer matched the name as thelinkstatement keyword and the parse failed.
Thelink,links,propertiesanddetailskeywords are now only recognized when an actor
follows them on the same line, so participant ids that happen to spell these words work in
messages, while the statements themselves keep parsing as before. -
#8282
b6d952dThanks @belomaxorka! - fix(sequence): allowLinkas a participant ID in messages and actor menusPreserve the ID's case and alias while keeping the
linkandlinksmenu commands supported. -
#8345
7917c1aThanks @knsv-bot! - fix: xychart measures text in SVG units so legends no longer clip on wide charts scaled to fit their container, and the chart title is dropped instead of overflowing when the chart is too short for it -
#8338
4a722fbThanks @ashishjain0512! - fix: Centre the xychart title over the plot area instead of the whole chart -
Updated dependencies [
8afd83c]:- @mermaid-js/parser@2.0.1
@mermaid-js/parser@2.0.1
Patch Changes
- #8333
8afd83cThanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer includelodash-es@4.17.23
@mermaid-js/layout-elk@1.0.1
Patch Changes
-
#8334
d67331dThanks @ashishjain0512! - fix(class): place cardinality labels beside their relation ends on dagre's sides with ELK, centre dagre's end labels, and stop clipping their text -
Updated dependencies [
50c9e55,4c90f5c,c7fa1a5,d67331d,99a050b,9140716,3101c7d,aa29345,967bbde,147f343,40ef7b4,351d7d2,b657a2c,c38a565,fd4f5f2,8afd83c,859f1f8,b6d952d,7917c1a,4a722fb]:- mermaid@12.1.0
@mermaid-js/mermaid-zenuml@1.0.1
Patch Changes
- #8248
3e9f40bThanks @sidharthv96! - Support Mermaid 12 in the ZenUML plugin while retaining Mermaid 10 and 11 compatibility.
@mermaid-js/layout-tidy-tree@1.0.1
Patch Changes
- #8248
3e9f40bThanks @sidharthv96! - Support Mermaid 12 in the tidy-tree layout package while retaining Mermaid 11 compatibility.
mermaid@12.0.0
Mermaid 12.0.0 ships ELK as the bundled default layout engine, a new redux-color / neo default appearance, and two new diagram types: UML use case diagrams.
This is a breaking release (ES2024, Safari 17.4+, Node 22.12+). Existing flowcharts, state and class diagrams will re-lay out and recolour; add layout: dagre, theme: default and look: classic to your config to keep the old look. Full changelog below.
Major Changes
-
#8213
33442fdThanks @aloisklink! - chore!: require ES2024, Safari 17.4+, Node.JS v22.12+Mermaid is now built to target Safari 17.4+ and ES2024. If you need to support
older browsers, you may need to polyfill or transpile mermaid.Safari 17.4+ has been chosen as the floor, as unlike Firefox/Chrome,
older iOS devices don't get major Safari updates.Node.JS v22.12+ is also declared as requirement in our
package.jsonfiles,
but as mermaid requires a browser, this is mainly so we can use dependencies that
also declare a Node.JS v22.12+ requirement, without causing issues for users when
runningnpm install. -
#8155
810893cThanks @ashishjain0512! - feat!: ELK is now bundled with mermaid and is the default layout algorithm.ELK previously shipped as a separate
@mermaid-js/layout-elkpackage that sites had to install and register. It is now part of mermaid itself and registered automatically, solayout: elk— and theelk.stress,elk.force,elk.mrtree,elk.sporeOverlap,elk.boxandelk.rectpackingvariants — work with no setup.This changes how existing diagrams look. Flowchart, state, class, entity-relationship, requirement, use-case diagrams that do not specify a
layoutare now laid out by ELK instead of dagre. To keep the previous layout, set dagre explicitly:--- config: layout: dagre ---
or globally,
mermaid.initialize({ layout: 'dagre' }).Mindmap is unchanged: it keeps laying out with cose-bilkent unless a layout is explicitly requested (in the tiny build, which ships neither ELK nor cose-bilkent, it falls back to dagre).
Other notes:
- ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (
mermaid.min.js) inlines it and grows by roughly 500 kB gzipped. - The tiny build deliberately omits ELK to stay small, and falls back to dagre for diagrams that ask for an ELK layout. Its size is unchanged.
@mermaid-js/layout-elkis no longer needed on normal builds — existingmermaid.registerLayoutLoaders(elkLayouts)calls keep working and can be removed. It is still published, and remains the way to add ELK to the tiny build.dist/mermaid.esm.min.mjsnow contains syntax thates-module-lexer(used by Vite) rejects withcontent contains invalid JS syntax. Bundler users are unaffected as long as they import themermaidpackage specifier, which resolves to the core build; only builds that point Vite directly at that dist file need to switch to the package specifier or the core build.- State diagrams now resolve their layout through the same registration check as every other diagram, so an unavailable layout falls back instead of failing to render.
An unrecognised
themename now resolves to the default theme in name as well as in variables; previously the invalid name stayed in place while the default's variables were loaded, and every palette-aware stylesheet gates on the name.theme: 'null', the documented way to disable the pre-defined themes, is unaffected. Note thatneopaints node strokes with a gradient when the theme setsuseGradient, whichbasedoes; setting a customnodeBorderonbaseturns the gradient off. - ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (
-
#8211
a19bd08Thanks @ashishjain0512! - Removed: thedefaultRendereroption of theflowchart,classandstateconfig sections.Use the top-level
layoutoption instead:--- config: layout: dagre # or elk ---
Why
defaultRenderernamed a rendering engine back when there was more than one. There is not.
All of its accepted values —dagre,dagre-wrapper,dagre-d3— had come to select the
same unified renderer, and itselkvalue did nothing but setlayout: elkon your behalf.
The option's documented purpose no longer existed.What it still did was stranger than doing nothing. The detectors branched on whether the
value was recognised, so a valid value routed a diagram to the modern renderer and an
invalid one silently routed it to the legacy renderer. Since the default was always a
valid value, the legacyclassandstaterenderers were unreachable except by
misconfiguring the option.What changes for you
layoutselects the layout algorithm, as it already did. Nothing else does.graph,classDiagramandstateDiagramalways render with the unified diagram. This
was already true for every valid configuration.- The legacy
flowchart,classandstatediagram ids are gone.flowchart-v2,
classDiagramandstateDiagramare whatdetectTypenow returns for that syntax. flowchart-elkas an explicit diagram keyword still works.
Configuration that still sets
defaultRendereris ignored rather than rejected, so nothing
throws — but it no longer has any effect, and diagrams that relied on
flowchart: { defaultRenderer: 'elk' }to get an ELK layout should setlayout: elk. -
#8223
6df1149Thanks @aloisklink! - refactor!: remove layout internal exportsRemove the
clearLayoutRenderState,createCommonLayoutRenderer,defaultMeasureLayout,paintLayoutDatafunctions,
and theCommonLayout*types from Mermaid's public API.These functions were only used by the
@mermaid-js/layout-elkpackage,
which now bundles them. Removing them makes it easier to avoid major versions
of mermaid.
Minor Changes
-
#8048
7a3c1a8Thanks @knsv-bot! - feat: add UML use case diagrams with actors, use cases, system boundaries, relationships, stereotypes, notes, JSON tables, class and style support, accessibility metadata, and business variants. -
#8073
cd48a64Thanks @knsv-bot! - feat:defaultMeasureLayoutaccepts aunwrapGroupLabelsoption so a layout engine can ask for cluster labels to be measured at their natural width instead of theflowchart.wrappingWidthfallback.insertClusterpaints a plain cluster label with an infinite width while the measurement pass wrapped it at 200px, so a layout that sizes compound nodes from the measured label sized them too narrow. Layouts now opt in explicitly; core no longer inspects the layout's name. Markdown cluster labels stay wrapped, since those are painted wrapped.The bundled ELK layout opts in, which changes the size of labelled subgraphs in ELK-laid-out diagrams. Diagrams laid out with dagre are unaffected.
-
#8073
0cf3797Thanks @knsv-bot! - feat: let a container pick its own ELK algorithm with@{ algorithm: … }, and addelk.boxandelk.rectpackingto the selectablelayoutvalues.A subgraph carrying
@{ algorithm: elk.box }is laid out with that algorithm in its own coordinate system instead of inheriting the diagram's. Supported values areelk.layered,elk.box,elk.rectpacking,elk.stress,elk.force,elk.mrtree,elk.radial, andelk.sporeOverlap; anything else is ignored with a warning rather than handed to ELK, where an unknown id would abort the layout. Containers with edges crossing their boundary fall back to the inherited algorithm, since isolated layout and cross-boundary edges are incompatible.Also in this release:
- ELK cluster labels are measured unwrapped, so a compound node is sized to fit its label instead of to a 200px wrapping width. This changes the size — and therefore the layout — of existing ELK diagrams that have labelled subgraphs.
elk.boxandelk.rectpackingplace nodes but never route edges. Edges they leave unrouted now fall back to a straight line between the two node centres instead of failing the render.keepEntryNodeOnToppins a cycle's true entry rather than the first-declared node when a back-edge feeds the entry, so recursive flows read from where they actually start.
@mermaid-js/tiny@12.0.0
Major Changes
-
#8213
33442fdThanks @aloisklink! - chore!: require ES2024, Safari 17.4+, Node.JS v22.12+Mermaid is now built to target Safari 17.4+ and ES2024. If you need to support
older browsers, you may need to polyfill or transpile mermaid.Safari 17.4+ has been chosen as the floor, as unlike Firefox/Chrome,
older iOS devices don't get major Safari updates.Node.JS v22.12+ is also declared as requirement in our
package.jsonfiles,
but as mermaid requires a browser, this is mainly so we can use dependencies that
also declare a Node.JS v22.12+ requirement, without causing issues for users when
runningnpm install. -
#8155
810893cThanks @ashishjain0512! - feat!: ELK is now bundled with mermaid and is the default layout algorithm.ELK previously shipped as a separate
@mermaid-js/layout-elkpackage that sites had to install and register. It is now part of mermaid itself and registered automatically, solayout: elk— and theelk.stress,elk.force,elk.mrtree,elk.sporeOverlap,elk.boxandelk.rectpackingvariants — work with no setup.This changes how existing diagrams look. Flowchart, state, class, entity-relationship, requirement, use-case and agentflow diagrams that do not specify a
layoutare now laid out by ELK instead of dagre. To keep the previous layout, set dagre explicitly:--- config: layout: dagre ---
or globally,
mermaid.initialize({ layout: 'dagre' }).Mindmap is unchanged: it keeps laying out with cose-bilkent unless a layout is explicitly requested (in the tiny build, which ships neither ELK nor cose-bilkent, it falls back to dagre).
Other notes:
- ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (
mermaid.min.js) inlines it and grows by roughly 500 kB gzipped. - The tiny build deliberately omits ELK to stay small, and falls back to dagre for diagrams that ask for an ELK layout. Its size is unchanged.
@mermaid-js/layout-elkis no longer needed on normal builds — existingmermaid.registerLayoutLoaders(elkLayouts)calls keep working and can be removed. It is still published, and remains the way to add ELK to the tiny build.dist/mermaid.esm.min.mjsnow contains syntax thates-module-lexer(used by Vite) rejects withcontent contains invalid JS syntax. Bundler users are unaffected as long as they import themermaidpackage specifier, which resolves to the core build; only builds that point Vite directly at that dist file need to switch to the package specifier or the core build.- State diagrams now resolve their layout through the same registration check as every other diagram, so an unavailable layout falls back instead of failing to render.
- ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (
-
#8148
8603bddThanks @ashishjain0512! -redux-coloris now the default theme andneothe default look for ten diagram types — flowchart, swimlane, class, ER, requirement, sequence, state, use case, Venn and agentflow. Those rendered without an explicitthemeandlookchange appearance; every other diagram type keepsdefaultandclassic. To keep the previous appearance, set both explicitly —mermaid.initialize({ theme: 'default', look: 'classic' }), or the same two keys underconfigin front matter.An unrecognised
themename now resolves to the default theme in name as well as in variables; previously the invalid name stayed in place while the default's variables were loaded, and every palette-aware stylesheet gates on the name.theme: 'null', the documented way to disable the pre-defined themes, is unaffected. Note thatneopaints node strokes with a gradient when the theme setsuseGradient, whichbasedoes; setting a customnodeBorderonbaseturns the gradient off. -
#8211
a19bd08Thanks @ashishjain0512! - Removed: thedefaultRendereroption of theflowchart,classandstateconfig sections.Use the top-level
layoutoption instead:--- config: layout: dagre # or elk ---
Why
defaultRenderernamed a rendering engine back when there was more than one. There is not.
All of its accepted values —dagre,dagre-wrapper,dagre-d3— had come to select the
same unified renderer, and itselkvalue did nothing but setlayout: elkon your behalf.
The option's documented purpose no longer existed.What it still did was stranger than doing nothing. The detectors branched on whether the
value was recognised, so a valid value routed a diagram to the modern renderer and an
invalid one silently routed it to the legacy renderer. Since the default was always a
valid value, the legacyclassandstaterenderers were unreachable except by
misconfiguring the option.What changes for you
layoutselects the layout algorithm, as it already did. Nothing else does.graph,classDiagramandstateDiagramalways render with the unified diagram. This
was already true for every valid configuration.- The legacy
flowchart,classandstatediagram ids are gone.flowchart-v2,
classDiagramandstateDiagramare whatdetectTypenow returns for that syntax. flowchart-elkas an explicit diagram keyword still works.
Configuration that still sets
defaultRendereris ignored rather than rejected, so nothing
throws — but it no longer has any effect, and diagrams that relied on
flowchart: { defaultRenderer: 'elk' }to get an ELK layout should setlayout: elk. -
#8223
6df1149Thanks @aloisklink! - refactor!: remove layout internal exportsRemove the
clearLayoutRenderState,createCommonLayoutRenderer,defaultMeasureLayout,paintLayoutDatafunctions,
and theCommonLayout*types from Mermaid's public API.These functions were only used by the
@mermaid-js/layout-elkpackage,
which now bundles them. Removing them makes it easier to avoid major versions
of mermaid.
Minor Changes
-
#8048
7a3c1a8Thanks @knsv-bot! - feat: add UML use case diagrams with actors, use cases, system boundaries, relationships, stereotypes, notes, JSON tables, class and style support, accessibility metadata, and business variants. -
#8073
0cf3797Thanks @knsv-bot! - feat: add theagentflow-betadiagram type for describing agentic workflows — agents, the flows they run, the tasks and tools inside them, and how control and data move between them.agentflow-beta TB flow reviewer["Review Agent"] changes["Gather changes"]@{ shape: input } analyse["Analyse"]@{ shape: task } lint["run_linter"]@{ shape: tool } changes --> analyse --> lint endflow … endcontainers, aglobal … endscope block for nodes that must stay outside their referencing flow, andconnectordeclarations for external systems.- Node shapes addressed by domain-facing aliases (
task,tool,input,decision,refdoc,action) via inline@{ … }metadata, and@{ view: collapsed }to fold a container down to a summary node. - Edge operators carry semantics:
-->sequence,-.-reference,--xfailure, plus the labelled-branch form. getSemanticModel()projects the parsed diagram into a presentation-free semantic view for downstream consumers, andgetDiagnostics()reports structured warnings with source positions.- A
flowContainerStroketheme variable across all built-in themes, and anagentflowconfig namespace for spacing, padding, and title margin.
The diagram is beta: the syntax may still change before it is declared stable.
-
#8197
846fd65Thanks @knsv-bot! - feat(agentflow): take the redux colour palette. Underredux-colorandredux-dark-color, every agentflow node kind — tool, task, decision, input, refdoc, connector, action — gets its own colour from a fixed palette slot, so colour says what an element is and stays put when the diagram is edited around it. Containers cycle a counter in declaration order, the way flowchart subgraphs do, from the slots above the kind range so a container frame never matches a node inside it. A collapsed container keeps its slot.redux-dark-colorcarries borders but no fills, so nodes there take palette strokes over the theme's own background. Agentflow also takesredux-colorandneoas its own per-diagram de...