Skip to content

Releases: mermaid-js/mermaid

mermaid@12.2.0

Choose a tag to compare

@github-actions github-actions released this 13 Oct 08:32
Immutable release. Only release title and notes can be modified.
1fb7869

Minor Changes

  • #8394 6ac38cb Thanks @jackroberts236! - feat: Add opt-in mindmap coloring by hierarchy depth using mindmap.colorBy: depth and the existing theme palette.

Patch Changes

  • #8409 419ee68 Thanks @ashishjain0512! - fix: size circle and double-circle nodes from their label instead of minNodeWidth, and trim neo circle padding

  • #8395 2fb3ff1 Thanks @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 cbf89ab Thanks @jackroberts236! - fix: Keep mindmap HTML labels readable in the neo look on themes that repaint node backgrounds

  • #8390 430ac9b Thanks @ashishjain0512! - fix: Centre mindmap node labels when htmlLabels is false

  • #8161 d7532ed Thanks @filipsajdak! - fix: scope a swimlane cluster's DOM id like every other cluster, so two diagrams on one page do not collide

  • #8270 ad8d61a Thanks @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 9d41c0f Thanks @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 6c67397 Thanks @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 40124c3 Thanks @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

Choose a tag to compare

@github-actions github-actions released this 13 Oct 08:32
Immutable release. Only release title and notes can be modified.
1fb7869

Minor Changes

  • #8394 6ac38cb Thanks @jackroberts236! - feat: Add opt-in mindmap coloring by hierarchy depth using mindmap.colorBy: depth and the existing theme palette.

Patch Changes

  • #8409 419ee68 Thanks @ashishjain0512! - fix: size circle and double-circle nodes from their label instead of minNodeWidth, and trim neo circle padding

  • #8395 2fb3ff1 Thanks @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 cbf89ab Thanks @jackroberts236! - fix: Keep mindmap HTML labels readable in the neo look on themes that repaint node backgrounds

  • #8390 430ac9b Thanks @ashishjain0512! - fix: Centre mindmap node labels when htmlLabels is false

  • #8161 d7532ed Thanks @filipsajdak! - fix: scope a swimlane cluster's DOM id like every other cluster, so two diagrams on one page do not collide

  • #8270 ad8d61a Thanks @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 9d41c0f Thanks @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 6c67397 Thanks @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 40124c3 Thanks @SwastikTripathi! - fix: swimlane nodes with no edges keep their source order inside a lane instead of being sorted by ID

mermaid@12.1.0

Choose a tag to compare

@github-actions github-actions released this 02 Oct 11:05
Immutable release. Only release title and notes can be modified.
21f72f0

Minor Changes

  • #8303 9140716 Thanks @filipsajdak! - feat: add the elk.orientFeedbackEdges option, 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; set elk.orientFeedbackEdges: false to keep the previous routing.

  • #8250 fd4f5f2 Thanks @kartben! - feat: add a bitOrder option to packet diagrams. It defaults to ascending, which is the current
    behaviour, and descending mirrors 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 changing bitOrder.

Patch Changes

  • #8330 50c9e55 Thanks @ashishjain0512! - fix: upgrade chevrotain to 13 so mermaid no longer pulls in vulnerable lodash-es@4.17.23

  • #8259 4c90f5c Thanks @afonsojanu! - fix(sequence): allow whitespace between an actor name and its @{ ... } config object

    participant 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 c7fa1a5 Thanks @ashishjain0512! - fix: keep ELK class-diagram cardinalities off namespace frames

  • #8334 d67331d Thanks @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 99a050b Thanks @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 3101c7d Thanks @mir-ashiq! - fix(error): show the actual error message in the error diagram

    When 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 and maxEdges needs raising via mermaid.initialize.

  • #8296 aa29345 Thanks @pentaoa! - fix: preserve explicit source relations on event modeling reset frames

  • #8297 967bbde Thanks @pentaoa! - fix: reject duplicate event modeling frame IDs before rendering

  • #8337 147f343 Thanks @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 and view: collapsed set on a repeated subgraph now apply to it, whichever declaration they follow.

  • #8203 40ef7b4 Thanks @MFA-G! - perf(frontmatter): replace the quadratic front matter regex on hot paths

    frontMatterRegex backtracks polynomially on whitespace-heavy input, so a
    diagram well inside the default maxTextSize could stall parsing for over a
    second. detectType and extractFrontMatter now use a linear scanner that
    matches the regex result exactly, leaving no document stripped differently.

  • #8254 351d7d2 Thanks @galshir! - fix: warn when a gantt task references an unknown after/until task id, or when its end value is neither a valid date nor a valid duration

  • #8249 b657a2c Thanks @mir-ashiq! - fix(sequence): allow hyphenated actor and participant names when a config object is attached

  • #8300 c38a565 Thanks @filipsajdak! - fix: A partial override of an object-valued theme variable such as xyChart, radar or cynefin keeps the values the theme generates for the keys it leaves out

  • #8333 8afd83c Thanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer include lodash-es@4.17.23

  • #8285 859f1f8 Thanks @mir-ashiq! - fix(sequence): allow actor-menu keywords as participant ids in messages

    A participant declared as Link (or Links, Properties, Details) could not be used as a
    message endpoint: the lexer matched the name as the link statement keyword and the parse failed.
    The link, links, properties and details keywords 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 b6d952d Thanks @belomaxorka! - fix(sequence): allow Link as a participant ID in messages and actor menus

    Preserve the ID's case and alias while keeping the link and links menu commands supported.

  • #8345 7917c1a Thanks @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 4a722fb Thanks @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

Choose a tag to compare

@github-actions github-actions released this 02 Oct 11:05
Immutable release. Only release title and notes can be modified.
21f72f0

Minor Changes

  • #8303 9140716 Thanks @filipsajdak! - feat: add the elk.orientFeedbackEdges option, 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; set elk.orientFeedbackEdges: false to keep the previous routing.

  • #8250 fd4f5f2 Thanks @kartben! - feat: add a bitOrder option to packet diagrams. It defaults to ascending, which is the current
    behaviour, and descending mirrors 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 changing bitOrder.

Patch Changes

  • #8330 50c9e55 Thanks @ashishjain0512! - fix: upgrade chevrotain to 13 so mermaid no longer pulls in vulnerable lodash-es@4.17.23

  • #8259 4c90f5c Thanks @afonsojanu! - fix(sequence): allow whitespace between an actor name and its @{ ... } config object

    participant 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 c7fa1a5 Thanks @ashishjain0512! - fix: keep ELK class-diagram cardinalities off namespace frames

  • #8334 d67331d Thanks @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 99a050b Thanks @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 3101c7d Thanks @mir-ashiq! - fix(error): show the actual error message in the error diagram

    When 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 and maxEdges needs raising via mermaid.initialize.

  • #8296 aa29345 Thanks @pentaoa! - fix: preserve explicit source relations on event modeling reset frames

  • #8297 967bbde Thanks @pentaoa! - fix: reject duplicate event modeling frame IDs before rendering

  • #8337 147f343 Thanks @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 and view: collapsed set on a repeated subgraph now apply to it, whichever declaration they follow.

  • #8203 40ef7b4 Thanks @MFA-G! - perf(frontmatter): replace the quadratic front matter regex on hot paths

    frontMatterRegex backtracks polynomially on whitespace-heavy input, so a
    diagram well inside the default maxTextSize could stall parsing for over a
    second. detectType and extractFrontMatter now use a linear scanner that
    matches the regex result exactly, leaving no document stripped differently.

  • #8254 351d7d2 Thanks @galshir! - fix: warn when a gantt task references an unknown after/until task id, or when its end value is neither a valid date nor a valid duration

  • #8249 b657a2c Thanks @mir-ashiq! - fix(sequence): allow hyphenated actor and participant names when a config object is attached

  • #8300 c38a565 Thanks @filipsajdak! - fix: A partial override of an object-valued theme variable such as xyChart, radar or cynefin keeps the values the theme generates for the keys it leaves out

  • #8333 8afd83c Thanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer include lodash-es@4.17.23

  • #8285 859f1f8 Thanks @mir-ashiq! - fix(sequence): allow actor-menu keywords as participant ids in messages

    A participant declared as Link (or Links, Properties, Details) could not be used as a
    message endpoint: the lexer matched the name as the link statement keyword and the parse failed.
    The link, links, properties and details keywords 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 b6d952d Thanks @belomaxorka! - fix(sequence): allow Link as a participant ID in messages and actor menus

    Preserve the ID's case and alias while keeping the link and links menu commands supported.

  • #8345 7917c1a Thanks @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 4a722fb Thanks @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

Choose a tag to compare

@github-actions github-actions released this 02 Oct 11:05
Immutable release. Only release title and notes can be modified.
21f72f0

Patch Changes

  • #8333 8afd83c Thanks @ashishjain0512! - fix: upgrade the parser to langium 4.4 / chevrotain 13 so bundles no longer include lodash-es@4.17.23

@mermaid-js/layout-elk@1.0.1

Choose a tag to compare

@github-actions github-actions released this 02 Oct 11:05
Immutable release. Only release title and notes can be modified.
21f72f0

Patch Changes

@mermaid-js/mermaid-zenuml@1.0.1

Choose a tag to compare

@github-actions github-actions released this 18 Sep 10:41
Immutable release. Only release title and notes can be modified.
a86a2bf

Patch Changes

  • #8248 3e9f40b Thanks @sidharthv96! - Support Mermaid 12 in the ZenUML plugin while retaining Mermaid 10 and 11 compatibility.

@mermaid-js/layout-tidy-tree@1.0.1

Choose a tag to compare

@github-actions github-actions released this 18 Sep 10:41
Immutable release. Only release title and notes can be modified.
a86a2bf

Patch Changes

  • #8248 3e9f40b Thanks @sidharthv96! - Support Mermaid 12 in the tidy-tree layout package while retaining Mermaid 11 compatibility.

mermaid@12.0.0

Choose a tag to compare

@github-actions github-actions released this 10 Sep 07:33
Immutable release. Only release title and notes can be modified.
98a0945

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 33442fd Thanks @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.json files,
    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
    running npm install.

  • #8155 810893c Thanks @ashishjain0512! - feat!: ELK is now bundled with mermaid and is the default layout algorithm.

    ELK previously shipped as a separate @mermaid-js/layout-elk package that sites had to install and register. It is now part of mermaid itself and registered automatically, so layout: elk — and the elk.stress, elk.force, elk.mrtree, elk.sporeOverlap, elk.box and elk.rectpacking variants — work with no setup.

    This changes how existing diagrams look. Flowchart, state, class, entity-relationship, requirement, use-case diagrams that do not specify a layout are 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-elk is no longer needed on normal builds — existing mermaid.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.mjs now contains syntax that es-module-lexer (used by Vite) rejects with content contains invalid JS syntax. Bundler users are unaffected as long as they import the mermaid package 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 theme name 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 that neo paints node strokes with a gradient when the theme sets useGradient, which base does; setting a custom nodeBorder on base turns the gradient off.

  • #8211 a19bd08 Thanks @ashishjain0512! - Removed: the defaultRenderer option of the flowchart, class and state config sections.

    Use the top-level layout option instead:

    ---
    config:
      layout: dagre # or elk
    ---

    Why

    defaultRenderer named 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 its elk value did nothing but set layout: elk on 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 legacy class and state renderers were unreachable except by
    misconfiguring the option.

    What changes for you

    • layout selects the layout algorithm, as it already did. Nothing else does.
    • graph, classDiagram and stateDiagram always render with the unified diagram. This
      was already true for every valid configuration.
    • The legacy flowchart, class and state diagram ids are gone. flowchart-v2,
      classDiagram and stateDiagram are what detectType now returns for that syntax.
    • flowchart-elk as an explicit diagram keyword still works.

    Configuration that still sets defaultRenderer is 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 set layout: elk.

  • #8223 6df1149 Thanks @aloisklink! - refactor!: remove layout internal exports

    Remove the
    clearLayoutRenderState, createCommonLayoutRenderer, defaultMeasureLayout, paintLayoutData functions,
    and the CommonLayout* types from Mermaid's public API.

    These functions were only used by the @mermaid-js/layout-elk package,
    which now bundles them. Removing them makes it easier to avoid major versions
    of mermaid.

Minor Changes

  • #8048 7a3c1a8 Thanks @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 cd48a64 Thanks @knsv-bot! - feat: defaultMeasureLayout accepts a unwrapGroupLabels option so a layout engine can ask for cluster labels to be measured at their natural width instead of the flowchart.wrappingWidth fallback.

    insertCluster paints 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 0cf3797 Thanks @knsv-bot! - feat: let a container pick its own ELK algorithm with @{ algorithm: … }, and add elk.box and elk.rectpacking to the selectable layout values.

    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 are elk.layered, elk.box, elk.rectpacking, elk.stress, elk.force, elk.mrtree, elk.radial, and elk.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.box and elk.rectpacking place 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.
    • keepEntryNodeOnTop pins 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.
  • #8193 813c766 Thanks ...

Read more

@mermaid-js/tiny@12.0.0

Choose a tag to compare

@github-actions github-actions released this 10 Sep 07:33
Immutable release. Only release title and notes can be modified.
98a0945

Major Changes

  • #8213 33442fd Thanks @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.json files,
    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
    running npm install.

  • #8155 810893c Thanks @ashishjain0512! - feat!: ELK is now bundled with mermaid and is the default layout algorithm.

    ELK previously shipped as a separate @mermaid-js/layout-elk package that sites had to install and register. It is now part of mermaid itself and registered automatically, so layout: elk — and the elk.stress, elk.force, elk.mrtree, elk.sporeOverlap, elk.box and elk.rectpacking variants — 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 layout are 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-elk is no longer needed on normal builds — existing mermaid.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.mjs now contains syntax that es-module-lexer (used by Vite) rejects with content contains invalid JS syntax. Bundler users are unaffected as long as they import the mermaid package 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.
  • #8148 8603bdd Thanks @ashishjain0512! - redux-color is now the default theme and neo the default look for ten diagram types — flowchart, swimlane, class, ER, requirement, sequence, state, use case, Venn and agentflow. Those rendered without an explicit theme and look change appearance; every other diagram type keeps default and classic. To keep the previous appearance, set both explicitly — mermaid.initialize({ theme: 'default', look: 'classic' }), or the same two keys under config in front matter.

    An unrecognised theme name 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 that neo paints node strokes with a gradient when the theme sets useGradient, which base does; setting a custom nodeBorder on base turns the gradient off.

  • #8211 a19bd08 Thanks @ashishjain0512! - Removed: the defaultRenderer option of the flowchart, class and state config sections.

    Use the top-level layout option instead:

    ---
    config:
      layout: dagre # or elk
    ---

    Why

    defaultRenderer named 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 its elk value did nothing but set layout: elk on 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 legacy class and state renderers were unreachable except by
    misconfiguring the option.

    What changes for you

    • layout selects the layout algorithm, as it already did. Nothing else does.
    • graph, classDiagram and stateDiagram always render with the unified diagram. This
      was already true for every valid configuration.
    • The legacy flowchart, class and state diagram ids are gone. flowchart-v2,
      classDiagram and stateDiagram are what detectType now returns for that syntax.
    • flowchart-elk as an explicit diagram keyword still works.

    Configuration that still sets defaultRenderer is 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 set layout: elk.

  • #8223 6df1149 Thanks @aloisklink! - refactor!: remove layout internal exports

    Remove the
    clearLayoutRenderState, createCommonLayoutRenderer, defaultMeasureLayout, paintLayoutData functions,
    and the CommonLayout* types from Mermaid's public API.

    These functions were only used by the @mermaid-js/layout-elk package,
    which now bundles them. Removing them makes it easier to avoid major versions
    of mermaid.

Minor Changes

  • #8048 7a3c1a8 Thanks @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 0cf3797 Thanks @knsv-bot! - feat: add the agentflow-beta diagram 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
      end
    • flow … end containers, a global … end scope block for nodes that must stay outside their referencing flow, and connector declarations 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, --x failure, plus the labelled-branch form.
    • getSemanticModel() projects the parsed diagram into a presentation-free semantic view for downstream consumers, and getDiagnostics() reports structured warnings with source positions.
    • A flowContainerStroke theme variable across all built-in themes, and an agentflow config namespace for spacing, padding, and title margin.

    The diagram is beta: the syntax may still change before it is declared stable.

  • #8197 846fd65 Thanks @knsv-bot! - feat(agentflow): take the redux colour palette. Under redux-color and redux-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-color carries borders but no fills, so nodes there take palette strokes over the theme's own background. Agentflow also takes redux-color and neo as its own per-diagram de...

Read more