close
Skip to content

Releases: mermaid-js/mermaid

v10.9.6

11 May 17:34
Immutable release. Only release title and notes can be modified.

Choose a tag to compare

Backports the following security fixes from Mermaid v11.15.0:

And other dependency updates.

Full Changelog: v10.9.5...v10.9.6

mermaid@11.15.0

11 May 11:15
Immutable release. Only release title and notes can be modified.
41646df

Choose a tag to compare

Minor Changes

  • #7174 0aca217 Thanks @milesspencer35! - feat(sequence): Add support for decimal start and increment values in the autonumber directive

  • #7512 8e17492 Thanks @aruncveli! - feat(flowchart): add datastore shape

    In Data flow diagrams, a datastore/warehouse/file/database is used to represent data persistence. It is denoted by a rectangle with only top and bottom borders, and can be used in flowcharts with A@{ shape: datastore, label: "Datastore" }.

  • #6440 9ad8dde Thanks @yordis, @lgazo! - feat: add Event Modeling diagram

  • #7707 27db774 Thanks @txmxthy! - feat(architecture): expose four fcose layout knobs for architecture-beta diagrams (nodeSeparation, idealEdgeLengthMultiplier, edgeElasticity, numIter) so authors can tune layout density and spread overlapping siblings without changing diagram source

  • #7604 bf9502f Thanks @M-a-c! - feat(class): add nested namespace support for class diagrams via dot notation and syntactic nesting

    If you have namespaces in class diagrams that use .s already and want to render them without nesting (≤v11.14.0 behaviour), you can use set class.hierarchicalNamespaces=false in your mermaid config:

    config:
      class:
        hierarchicalNamespaces: false
  • #7272 88cdd3d Thanks @xinbenlv! - feat(sankey): add outlined label style, configurable nodeWidth/nodePadding, and custom node colors

Patch Changes

  • #7737 e9b0f34 Thanks @ashishjain0512! - fix: prevent unbalanced CSS styles in classDefs

  • #7737 37ff937 Thanks @ashishjain0512! - fix: create CSS styles using the CSSOM

    This removes some invalid CSS and normalizes some CSS formatting.

  • #7508 bfe60cc Thanks @biiab! - fix(stateDiagram): end note now only closes a note when used on a new line

  • #7737 faafb5d Thanks @ashishjain0512! - fix(gantt): add iteration limit for excludes field

  • #7737 65f8be2 Thanks @ashishjain0512! - fix: disallow some CSS at-rules in custom CSS

  • #7726 1502f32 Thanks @aloisklink! - fix(wardley): fix unnecessary sanitization of text

  • #7578 1f98db8 Thanks @Gaston202! - fix(class): self-referential class multiplicity labels no longer rendered multiple times

    Fixes #7560. Resolves an issue where cardinality labels on self-referential class relationships were rendered three times due to edge splitting in the dagre layout. The fix ensures that each sub-edge only carries its relevant label positions.

  • #7592 2343e38 Thanks @knsv-bot! - fix(sequence): add background box behind alt/else section title labels in sequence diagrams

  • #7589 7fb9509 Thanks @NYCU-Chung! - fix(block): prevent column widths from shrinking when mixing different column spans

  • #7632 3f9e0f1 Thanks @ekiauhce! - fix(sequence): correct messageAlign label position for right-to-left arrows in sequence diagrams

  • #7642 7a8fb85 Thanks @tractorjuice! - fix(wardley): allow hyphens in unquoted component names

    Multi-word names containing hyphens — e.g. real-time processing, end-user, on-call engineer — now parse without quoting, bringing the grammar in line with the OnlineWardleyMaps (OWM) convention. A->B (no-space arrow) still tokenises correctly.

  • #7523 5144ed4 Thanks @darshanr0107! - fix(block): Arrow blocks in block-beta diagrams not spanning the specified number of columns when using :n syntax.

  • #7262 13d9bfa Thanks @darshanr0107! - fix(block): Ensure block diagram hexagon blocks respect column spanning syntax

  • #7684 e14bb88 Thanks @aloisklink! - fix: loosen uuid dependency range to allow v14

    Mermaid does not use any of the vulnerable code in CVE-2026-41907,
    but this allows users to silence any npm audit alerts on it.

  • #7633 9217c0d Thanks @Felix-Garci! - fix(block): add support for all arrow types in block diagrams

  • #7587 5e7eb62 Thanks @MaddyGuthridge! - chore: drop lodash-es in favour of es-toolkit

  • #7693 afaf306 Thanks @dull-bird! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels.

    Previously the lexer only matched ASCII [A-Za-z]+ for text tokens, even though the grammar referenced UNICODE_TEXT. Bare Chinese, Japanese, Korean, emoji, and accented Latin characters in labels caused a parse error. Added a [^\x00-\x7F]+ lexer rule to emit UNICODE_TEXT and included it in the alphaNumToken grammar rule.

    Fixes #7120.

  • #7737 4755553 Thanks @ashishjain0512! - fix: improve D3 types for mermaidAPI funcs

  • #7737 6476973 Thanks @ashishjain0512! - fix: handle & when namespacing CSS rules

  • #7520 8c1a0c1 Thanks @RodrigojndSantos! - fix(stateDiagram): comments starting with one % are no longer treated as comments

    Switch to using two %% if you want to write a comment.

  • Updated dependencies [7a8fb85, 675a64c]:

    • @mermaid-js/parser@1.1.1

@mermaid-js/parser@1.1.1

11 May 15:28
Immutable release. Only release title and notes can be modified.
f4bf04b

Choose a tag to compare

Patch Changes

  • #7642 7a8fb85 Thanks @tractorjuice! - fix(wardley): allow hyphens in unquoted component names

    Multi-word names containing hyphens — e.g. real-time processing, end-user, on-call engineer — now parse without quoting, bringing the grammar in line with the OnlineWardleyMaps (OWM) convention. A->B (no-space arrow) still tokenises correctly.

  • #7658 675a64c Thanks @aloisklink! - fix(parser): bundle langium/chevrotain

    This should silence warnings about lodash-es 4.17.23, which chevrotain@11.1.1 is pinned to, but is not vulnerable to.

    And this avoids warnings when langium v4 is installed on Node.JS v20.0.

Full Changelog: https://github.com/mermaid-js/mermaid/blob/41646dfd43ac83f001b03c70605feb036afae46d/packages/parser/CHANGELOG.md

@mermaid-js/mermaid-zenuml@0.2.3

11 May 11:15
Immutable release. Only release title and notes can be modified.
41646df

Choose a tag to compare

Patch Changes

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

11 May 15:32
Immutable release. Only release title and notes can be modified.
f4bf04b

Choose a tag to compare

Patch Changes

  • #7639 5ab4693 Thanks @knsv-bot! - fix: keep mindmap edges connected to a non-circular root when using the tidy-tree layout

mermaid@11.14.0

01 Apr 09:17
Immutable release. Only release title and notes can be modified.
2b9d054

Choose a tag to compare

Thanks to our awesome mermaid community that contributed to this release: @ashishjain0512, @tractorjuice, @autofix-ci[bot], @aloisklink, @knsv, @kibanana, @chandershekhar22, @khalil, @ytatsuno, @sidharthv96, @github-actions[bot], @dripcoding, @knsv-bot, @jeroensmink98, @Alex9583, @GhassenS, @omkarht, @darshanr0107, @leentaylor, @lee-treehouse, @veeceey, @turntrout, @Mermaid-Chart, @BambioGaming, Claude

Releases

@mermaid-js/examples@1.2.0

Minor Changes

mermaid@11.14.0

Minor Changes

  • #7526 efe218a - Add Wardley Maps diagram type (beta)

    Adds Wardley Maps as a new diagram type to Mermaid (available as wardley-beta). Wardley Maps are visual representations of business strategy that help map value chains and component evolution.

    Features:

    • Component positioning with [visibility, evolution] coordinates (OWM format)
    • Anchors for users/customers
    • Multiple link types: dependencies, flows, labeled links
    • Evolution arrows and trend indicators
    • Custom evolution stages with optional dual labels
    • Custom stage widths using @boundary notation
    • Pipeline components with visibility inheritance
    • Annotations, notes, and visual elements
    • Source strategy markers: build, buy, outsource, market
    • Inertia indicators
    • Theme integration

    Implementation includes parser, D3.js renderer, unit tests, E2E tests, and comprehensive documentation.

  • #7526 efe218a - feat: implement neo look styling for state diagrams

  • #7526 efe218a - feat: implement neo look support for sequence diagrams with drop shadows, and enhanced styling

  • #7526 efe218a - feat: add randomize config option for architecture diagrams, defaulting to false for deterministic layout

  • #7526 efe218a - feat: Add option to change timeline direction

  • #7526 efe218a - Fix duplicate SVG element IDs when rendering multiple diagrams on the same page. Internal element IDs (nodes, edges, markers, clusters) are now prefixed with the diagram's SVG element ID across all diagram types. Custom CSS or JS using exact ID selectors like #arrowhead should use attribute-ending selectors like [id$="-arrowhead"] instead.

  • #7526 efe218a - feat: implement neo look styling for ER diagrams

  • #7526 efe218a - feat: implement neo look styling for requirement diagrams

  • #7526 efe218a - feat: add theme support for data label colour in xy chart

  • #7526 efe218a - feat: implement neo look styling for mindmap diagrams

  • #7526 efe218a - feat: implement neo look for mermaid flowchart diagrams

  • #7526 efe218a - feat: implement neo look and themes for class diagram

  • #7526 efe218a - feat: add showDataLabelOutsideBar option for xy chart

  • #7526 efe218a - feat: implement neo look support for timeline diagram with drop shadows, additoinal redux themes and enhanced styling

  • #7526 efe218a - feat: implement neo look and themes for gitGraph diagram

  • #7526 efe218a - add new TreeView diagram

Patch Changes

  • #7526 efe218a - add link to ishikawa diagram on mermaid.js.org

  • #7526 efe218a - docs: document valid duration token formats in gantt.md

  • #7526 efe218a - fix: ER diagram parsing when using "1" as entity identifier on right side

    The parser was incorrectly tokenizing the second "1" in patterns like a many to 1 1: because the lookahead rule only checked for alphabetic characters after whitespace, not digits. Added a new lookahead pattern "1"(?=\s+[0-9]) to correctly identify the cardinality alias before a numeric entity name.

    Fixes #7472

  • #7526 efe218a - fix: scope cytoscape label style mapping to edges with labels to prevent console warnings

  • #7526 efe218a - fix: support inline annotation syntax in class diagrams (class Shape <>)

  • #7526 efe218a - fix: Align branch label background with text for multi-line labels in LR GitGraph layout

  • #7526 efe218a - fix: preserve cause hierarchy when ishikawa effect is indented more than causes

  • #7526 efe218a - refactor: remove unused createGraphWithElements function and add regression test for open edge arrowheads

  • #7526 efe218a - fix: Prevent long pie chart titles from being clipped by expanding the viewBox

  • #7526 efe218a - fix: prevent sequence diagram hang when "as" is used without a trailing space in participant declarations

  • #7526 efe218a - fix: warn when style statement targets a non-existent node in flowcharts

  • #7526 efe218a - fix: group state diagram SVG children under single root element

  • #7526 efe218a - fix: Allow :::className syntax inside composite state blocks

  • #7526 [efe218a](efe218a47fb5a4c...

Read more

@mermaid-js/tiny@11.14.0

01 Apr 09:17
Immutable release. Only release title and notes can be modified.
2b9d054

Choose a tag to compare

Thanks to our awesome mermaid community that contributed to this release: @ashishjain0512, @tractorjuice, @autofix-ci[bot], @aloisklink, @knsv, @kibanana, @chandershekhar22, @khalil, @ytatsuno, @sidharthv96, @github-actions[bot], @dripcoding, @knsv-bot, @jeroensmink98, @Alex9583, @GhassenS, @omkarht, @darshanr0107, @leentaylor, @lee-treehouse, @veeceey, @turntrout, @Mermaid-Chart, @BambioGaming, Claude

Releases

@mermaid-js/examples@1.2.0

Minor Changes

mermaid@11.14.0

Minor Changes

  • #7526 efe218a - Add Wardley Maps diagram type (beta)

    Adds Wardley Maps as a new diagram type to Mermaid (available as wardley-beta). Wardley Maps are visual representations of business strategy that help map value chains and component evolution.

    Features:

    • Component positioning with [visibility, evolution] coordinates (OWM format)
    • Anchors for users/customers
    • Multiple link types: dependencies, flows, labeled links
    • Evolution arrows and trend indicators
    • Custom evolution stages with optional dual labels
    • Custom stage widths using @boundary notation
    • Pipeline components with visibility inheritance
    • Annotations, notes, and visual elements
    • Source strategy markers: build, buy, outsource, market
    • Inertia indicators
    • Theme integration

    Implementation includes parser, D3.js renderer, unit tests, E2E tests, and comprehensive documentation.

  • #7526 efe218a - feat: implement neo look styling for state diagrams

  • #7526 efe218a - feat: implement neo look support for sequence diagrams with drop shadows, and enhanced styling

  • #7526 efe218a - feat: add randomize config option for architecture diagrams, defaulting to false for deterministic layout

  • #7526 efe218a - feat: Add option to change timeline direction

  • #7526 efe218a - Fix duplicate SVG element IDs when rendering multiple diagrams on the same page. Internal element IDs (nodes, edges, markers, clusters) are now prefixed with the diagram's SVG element ID across all diagram types. Custom CSS or JS using exact ID selectors like #arrowhead should use attribute-ending selectors like [id$="-arrowhead"] instead.

  • #7526 efe218a - feat: implement neo look styling for ER diagrams

  • #7526 efe218a - feat: implement neo look styling for requirement diagrams

  • #7526 efe218a - feat: add theme support for data label colour in xy chart

  • #7526 efe218a - feat: implement neo look styling for mindmap diagrams

  • #7526 efe218a - feat: implement neo look for mermaid flowchart diagrams

  • #7526 efe218a - feat: implement neo look and themes for class diagram

  • #7526 efe218a - feat: add showDataLabelOutsideBar option for xy chart

  • #7526 efe218a - feat: implement neo look support for timeline diagram with drop shadows, additoinal redux themes and enhanced styling

  • #7526 efe218a - feat: implement neo look and themes for gitGraph diagram

  • #7526 efe218a - add new TreeView diagram

Patch Changes

  • #7526 efe218a - add link to ishikawa diagram on mermaid.js.org

  • #7526 efe218a - docs: document valid duration token formats in gantt.md

  • #7526 efe218a - fix: ER diagram parsing when using "1" as entity identifier on right side

    The parser was incorrectly tokenizing the second "1" in patterns like a many to 1 1: because the lookahead rule only checked for alphabetic characters after whitespace, not digits. Added a new lookahead pattern "1"(?=\s+[0-9]) to correctly identify the cardinality alias before a numeric entity name.

    Fixes #7472

  • #7526 efe218a - fix: scope cytoscape label style mapping to edges with labels to prevent console warnings

  • #7526 efe218a - fix: support inline annotation syntax in class diagrams (class Shape <>)

  • #7526 efe218a - fix: Align branch label background with text for multi-line labels in LR GitGraph layout

  • #7526 efe218a - fix: preserve cause hierarchy when ishikawa effect is indented more than causes

  • #7526 efe218a - refactor: remove unused createGraphWithElements function and add regression test for open edge arrowheads

  • #7526 efe218a - fix: Prevent long pie chart titles from being clipped by expanding the viewBox

  • #7526 efe218a - fix: prevent sequence diagram hang when "as" is used without a trailing space in participant declarations

  • #7526 efe218a - fix: warn when style statement targets a non-existent node in flowcharts

  • #7526 efe218a - fix: group state diagram SVG children under single root element

  • #7526 efe218a - fix: Allow :::className syntax inside composite state blocks

  • #7526 [efe218a](efe218a47fb5a...

Read more

@mermaid-js/parser@1.1.0

01 Apr 09:17
Immutable release. Only release title and notes can be modified.
2b9d054

Choose a tag to compare

Minor Changes

@mermaid-js/examples@1.2.0

01 Apr 09:17
Immutable release. Only release title and notes can be modified.
2b9d054

Choose a tag to compare

Minor Changes

mermaid@11.13.0

09 Mar 12:07
Immutable release. Only release title and notes can be modified.
b1a5e9b

Choose a tag to compare

Minor Changes

Patch Changes

  • #7075 96a766d Thanks @darshanr0107! - fix: Prevent HTML tags from being escaped in sandbox label rendering

  • #6843 32723b2 Thanks @saurabhg772244! - fix: Support edge animation in hand drawn look

  • #7453 a60e615 Thanks @darshanr0107! - fix: ER diagram edge label positioning

  • #6989 1a9d45a Thanks @darshanr0107! - fix: Resolved parsing error where direction TD was not recognized within subgraphs

  • #7178 96ca7c0 Thanks @omkarht! - fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles

  • #7076 60f6331 Thanks @darshanr0107! - fix: Correct viewBox casing and make SVGs responsive

  • #7055 fa15ce8 Thanks @darshanr0107! - fix: Improve participant parsing and prevent recursive loops on invalid syntax

  • #7276 33c7c72 Thanks @darshanr0107! - fix: respect markdownAutoWrap: false to prevent text auto-wrapping in flowchart markdown labels with htmlLabels enabled.

    Markdown labels with markdownAutoWrap: false, htmlLabels: false set doesn't work
    correctly.

  • #7416 3c069b5 Thanks @Crafter-Y! - fix: architecture diagram lines should now have the correct length

  • #6995 9745f32 Thanks @darshanr0107! - fix: Support the htmlLabels Mermaid config value whenever possible

  • #7293 a408b55 Thanks @darshanr0107! - fix: Prevent browser hang when using multiline accDescr in XY charts

  • #6119 712c1ec Thanks @NealGooch! - fix: correct block positioning when nested blocks span multiple columns

  • #7424 981a62e Thanks @knsv! - fix: correct BT orientation arc sweep flags in gitGraph drawArrow()

    Swapped SVG arc sweep-flag values in the BT (bottom-to-top) orientation branches of drawArrow() so curves bend in the correct direction. Affects both rerouting and non-rerouting code paths for merge and non-merge arrows.

    Resolves #6593

  • #7430 a4bb0b5 Thanks @knsv! - fix: allow colons in stateDiagram-v2 transition and state description text

  • #7432 b0f9d5b Thanks @knsv! - fix: derive taskTextDarkColor from doneTaskBkgColor in dark theme for readable done-task text

  • #7456 981fbb8 Thanks @knsv-bot! - fix(gantt): restore readable outside-text color for done tasks in dark mode

  • #7139 93aa657 Thanks @omkarht! - revert: restore original hexagon and roundedRect implementations

  • #7136 6bc6617 Thanks @omkarht! - feat: add alias support for new participant syntax of sequence diagrams

  • #7375 9d0669a Thanks @kaigritun! - fix(er): recognize '1' cardinality alias before relationship operators

  • #7275 7eed6a1 Thanks @darshanr0107! - fix: change createLabel to call createText

    This adds support for KaTeX and FontAwesome icons loaded via iconpacks in some
    older labels. There are some small changes in formatting due to standardizing this code.

  • #7265 2000680 Thanks @omkarht! - fix: prevent unintended opacity on SVG aws icons containing rect elements

  • #7139 b7c66a2 Thanks @omkarht! - chore: restore original hexagon and roundedRect implementations

  • #7425 f16bfbb Thanks @knsv! - fix: use rounded right-angle edges for ELK layout

    ELK layout edges now default to rounded curve (right-angle segments with rounded corners) instead of inheriting the global basis default. This fixes ELK edges that were curving instead of routing at right angles (#7213). Non-ELK layouts are unaffected and keep their existing basis default.

  • #7296 aac86f7 Thanks @darshanr0107! - fix: Ensure correct edge label rendering for ER and requirement diagrams when flowchart htmlLabels are false

  • #7019 ace0367 Thanks @darshanr0107! - fix: Mindmap breaking in ELK layout

  • #6984 [09b74f1](https://github.com/mermaid-js/mermaid/commit...

Read more