Mermaid

Patch Changes

• #8022 12d472c Thanks @aloisklink! - fix: handle CSS sibling combinators in compileCSS

• #8022 2cd6dcf Thanks @aloisklink! - fix: increase protections against prototype pollution

  User-controlled input already has protections against prototype pollution.

  Fixes: GHSA-c4c3-pg64-4m4v

• #8022 99af3fc Thanks @aloisklink! - fix(architecture): use Maps and Sets to store groups/services

  Services are now rendered in the order they are defined and more service IDs are now supported.

• #8022 2cd6dcf Thanks @aloisklink! - deprecate: Deprecate the mermaidAPI.setConfig() function

  Calling this function has no observable effect, as the next time a render() or parse() is called, the currentConfig is cleared.

• #8022 630aa7e Thanks @aloisklink! - fix(xychart): support zero-width x-axis ranges

• #8022 59b22fa Thanks @aloisklink! - fix(radar): limit number of ticks to 32

  Setting a ticks value higher than this would only show 32 ticks.

Minor Changes

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

• #7721 f45cc2c Thanks @notionparallax! - feat(treeView): add box-drawing character input support for treeView diagrams

• #7550 f1f4d45 Thanks @DominicBurkart! - feat(xychart): add per-point text labels for xychart line plots

• #7527 b4d0442 Thanks @notionparallax! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures.

• #7793 a6f097d Thanks @SSDWGG! - feat(er): support optional ER attribute types with a ? suffix

• #7772 37f2e36 Thanks @devareddy05! - feat(gantt): support multiple excludes / includes lines so long exclusion lists can be split into commented groups (#6270)

• #7708 4e63e9d Thanks @txmxthy! - feat(architecture): add align row|column {ids…} directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly.

• #7760 05223be Thanks @ngdaniels! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice

• #7251 216e4e9 Thanks @ydah! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta).

• #7774 e5c75e6 Thanks @ngdaniels! - feat(xychart): enable rotate label on X-axis

• #7791 974fa7b Thanks @knsv-bot! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm

Patch Changes

• #7744 633c261 Thanks @ashishjain0512! - fix(architecture): add architecture.seed config option to make architecture diagrams render deterministically. Resolves #7729.

• #7732 c8ba156 Thanks @rkdfx! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613

• #7314 4e4e6c4 Thanks @darshanr0107! - fix(flowchart): Prevent crash when flowchart node shape is undefined

• #7762 cfd2391 Thanks @Dharya-dev! - fix(class): support styling and callbacks for generic classes

• #7284 c1f116d Thanks @darshanr0107! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height

• #7786 72fbab1 Thanks @knsv-bot! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks

• #7672 4887e97 Thanks @sjackson0109! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648

• #7734 a4c1e50 Thanks @OfirHaf! - fix(block): read block padding and sanitize config dynamically instead of at module load time

• #7674 cc75089 Thanks @cyphercodes! - fix(block): respect current DOMPurify config when sanitizing labels

• #7711 be2e282 Thanks @Jinacker! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path.

• #7781 d945968 Thanks @Dharya-dev! - fix(radar): align axis labels based on angular position to prevent clipping

• #7661 2f5e9e8 Thanks @nabila401! - fix(venn): fix 3-circle venn diagram union rendering

• #7780 8dcdce4 Thanks @Dharya-dev! - fix(xychart): truncate plot data to match x-axis category count

• #7235 1bbc189 Thanks @darshanr0107! - fix: Support consecutive LaTeX in node text

• #7247 365c1b1 Thanks @darshanr0107! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams

• #7754 06a32b7 Thanks @palgunatm66! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors

• #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. Fixes #7120.

• #7751 79e97cd Thanks @puneetdixit200! - fix(state): render state diagram click tooltips with mermaidTooltip

• #7570 c2305df Thanks @PinguinsRule! - fix(state): Fix invalid syntax between state and '{'

• #7758 a4a250b Thanks @mk24x7! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656.

• Updated dependencies [ea1c48f, b4d0442, 4e63e9d, 216e4e9]:

  • @mermaid-js/parser@1.2.0

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

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

• #7526 efe218a - add new TreeView diagram

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 Thanks @aloisklink, @BambioGaming! - fix: prevent escaping < and & when htmlLabels: false

• #7526 efe218a - fix: treemap title and labels use theme-aware colors for dark backgrounds

• Updated dependencies [efe218a]:

  • @mermaid-js/parser@1.1.0

@mermaid-js/parser@1.1.0

Minor Changes

• #7526 efe218a - add new TreeView diagram

@mermaid-js/tiny@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 Thanks @aloisklink, @BambioGaming! - fix: prevent escaping < and & when htmlLabels: false

• #7526 efe218a - fix: treemap title and labels use theme-aware colors for dark backgrounds

• Updated dependencies [efe218a]:

  • @mermaid-js/parser@1.1.0

Minor Changes

• #7352 d6db0b0 Thanks @remcohaszing! - feat: Export the AsyncIconLoader, SyncIconLoader, and IconLoader types.

• #5932 cdacb0b Thanks @exoego! - feat: Add venn-beta diagram

• #6789 73e9849 Thanks @omkarht! - feat: Add half-arrowheads (solid & stick) and central connection support

• #7387 acce4db Thanks @exoego! - feat: Add Ishikawa diagram (ishikawa-beta)

• #6995 9745f32 Thanks @darshanr0107! - feat: Deprecate flowchart.htmlLabels in favor of root-level htmlLabels in Mermaid config

• #5814 2dd29be Thanks @kairi003! - feat: allow to put notes in namespaces on classDiagram

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 Thanks @omkarht! - fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names

• #7276 33c7c72 Thanks @darshanr0107! - fix: Restore proper rendering of plain text flowchart labels without auto line-wrapping

  This fix restores backwards compatibility with Mermaid v10 by ensuring that plain text labels in flowcharts are rendered correctly. In Mermaid v11, all labels were incorrectly being treated as markdown by default, which caused issues with text wrapping, multiline breaks, and backwards compatibility.

  What changed:

  • Plain text labels in flowcharts (without markdown syntax) now render as regular text
    • For node labels and edge labels, these will line-wrap automatically. Although this isn't backwards compatible with v10, we think this is a minor change and it's worth keeping to avoid too many changes from diagrams created from v11 onwards.
    • Plain text labels in other diagrams will continue to not line wrap.
  • Plain text labels with \n characters now correctly create line breaks
  • Plain text that looks like markdown (e.g., "1.", "- x") is no longer misinterpreted

  If you want markdown formatting: You can still use markdown in your flowchart labels by using the proper markdown syntax. Wrap your markdown text with double quotes and backticks: node["`_markdown_ **text**`"]

  Example:

  ```mermaid
  flowchart TD
      plain["Plain text\nwith manual line break"]
      markdown["`This is a **markdown** _label_ that wraps and doesn't replace \n with newlines`"]
  ```
  

• #7080 835de00 Thanks @darshanr0107! - fix: Support ComponentQueue_Ext to prevent parsing error

• #7310 a9e4c72 Thanks @darshanr0107! - fix: Allow quoted string labels in architecture-beta diagrams

• #7052 ff15e51 Thanks @darshanr0107! - fix: Correct tooltip placement to appear near hovered element

• #7197 8bfd477 Thanks @omkarht! - fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype

• #7099 b136acd Thanks @darshanr0107! - fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11

• #7217 e0317ac Thanks @omkarht! - fix(gitgraph): pass gitGraphConfig to renderer functions for applying directives properly.

• Updated dependencies [fd3fc50]:

  • @mermaid-js/parser@1.0.1

Patch Changes

• Updated dependencies [7243340]:
  • @mermaid-js/parser@1.0.0

Patch Changes

• #7200 de7ed10 Thanks @shubhamparikh2704! - fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype

Patch Changes

• #7107 cbf8946 Thanks @shubhamparikh2704! - fix: Updated the dependency dagre-d3-es to 7.0.13 to fix GHSA-cc8p-78qf-8p7q

Minor Changes

• #6921 764b315 Thanks @quilicicf! - feat: Add IDs in architecture diagrams

Patch Changes

• #6950 a957908 Thanks @shubhamparikh2704! - chore: Fix mindmap rendering in docs and apply tidytree layout

• #6826 1d36810 Thanks @darshanr0107! - fix: Ensure edge label color is applied when using classDef with edge IDs

• #6945 d318f1a Thanks @darshanr0107! - fix: Resolve gantt chart crash due to invalid array length

• #6918 cfe9238 Thanks @shubhamparikh2704! - chore: revert marked dependency from ^15.0.7 to ^16.0.0

  • Reverted marked package version to ^16.0.0 for better compatibility
  • This is a dependency update that maintains API compatibility
  • All tests pass with the updated version

Minor Changes

• #6704 012530e Thanks @omkarht! - feat: Added support for new participant types (actor, boundary, control, entity, database, collections, queue) in sequenceDiagram.

• #6802 c8e5027 Thanks @darshanr0107! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

Patch Changes

• #6905 33bc4a0 Thanks @darshanr0107! - fix: Render newlines as spaces in class diagrams

• #6886 e0b45c2 Thanks @darshanr0107! - fix: Handle arrows correctly when auto number is enabled

Patch Changes

• #6886 e0b45c2 Thanks @darshanr0107! - fix: Handle arrows correctly when auto number is enabled

Minor Changes

• #6744 daf8d8d Thanks @SpecularAura! - feat: Added support for per link curve styling in flowchart diagram using edge ids

Patch Changes

• #6857 b9ef683 Thanks @knsv! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration

• #6653 2c0931d Thanks @darshanr0107! - chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

• #6683 33e08da Thanks @darshanr0107! - fix: Position the edge label in state diagram correctly relative to the edge

• #6693 814b68b Thanks @darshanr0107! - fix: Apply correct dateFormat in Gantt chart to show only day when specified

• #6734 fce7cab Thanks @darshanr0107! - fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'

• #6733 fc07f0d Thanks @omkarht! - fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape

• #6876 12e01bd Thanks @sidharthv96! - fix: sanitize icon labels and icon SVGs

  Resolves CVE-2025-54880 reported by @fourcube

• #6801 01aaef3 Thanks @sidharthv96! - fix: Update casing of ID in requirement diagram

• #6796 c36cd05 Thanks @HashanCP! - fix: Make flowchart elk detector regex match less greedy

• #6702 8bb29fc Thanks @qraqras! - fix(block): overflowing blocks no longer affect later lines

  This may change the layout of block diagrams that have overflowing lines (i.e. block diagrams that use up more columns that the columns specifier).

• #6717 71b04f9 Thanks @darshanr0107! - fix: log warning for blocks exceeding column width

  This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

• #6820 c99bce6 Thanks @kriss-u! - fix: Add escaped class literal name on namespace

• #6332 6cc1926 Thanks @ajuckel! - fix: Allow equals sign in sequenceDiagram labels

• #6651 9da6fb3 Thanks @darshanr0107! - Add validation for negative values in pie charts:

  Prevents crashes during parsing by validating values post-parsing.

  Provides clearer, user-friendly error messages for invalid negative inputs.

• #6803 e48b0ba Thanks @omkarht! - chore: migrate to class-based ArchitectureDB implementation

• #6838 4d62d59 Thanks @saurabhg772244! - fix: node border style for handdrawn shapes

• #6739 e9ce8cf Thanks @kriss-u! - fix: Update flowchart direction TD's behavior to be the same as TB

• #6833 9258b29 Thanks @darshanr0107! - fix: correctly render non-directional lines for '---' in block diagrams

• #6855 da90f67 Thanks @sidharthv96! - fix: fallback to raw text instead of rendering Unsupported markdown or empty blocks

  Instead of printing Unsupported markdown: XXX, or empty blocks when using a markdown feature that Mermaid does not yet support when htmlLabels: true(default) or htmlLabels: false, fallback to the raw markdown text.

• #6876 0133f1c Thanks @sidharthv96! - fix: sanitize KATEX blocks

  Resolves CVE-2025-54881 reported by @fourcube

• #6804 895f9d4 Thanks @omkarht! - chore: Update packet diagram to use new class-based database structure

Minor Changes

• #6453 5acbd7e Thanks @sidharthv96! - feat: Add getRegisteredDiagramsMetadata to mermaid, which returns all the registered diagram IDs in mermaid

Patch Changes

• #6738 d90634b Thanks @shubham-mermaid! - chore: Updated TreeMapDB to use class based approach

• #6510 7a38eb7 Thanks @sidharthv96! - chore: Move packet diagram out of beta

• #6747 3e3ae08 Thanks @darshanr0107! - fix: adjust sequence diagram title positioning to prevent overlap with top border in Safari

• #6751 d3e2be3 Thanks @darshanr0107! - chore: Update MindmapDB to use class based approach

• #6715 637680d Thanks @Syn3ugar! - fix(timeline): fix loading leftMargin from config

  The timeline.leftMargin config value should now correctly control the size of the left margin, instead of being ignored.

• Updated dependencies [7a38eb7]:

  • @mermaid-js/parser@0.6.2

Patch Changes

• Updated dependencies [0da2922]:
  • @mermaid-js/parser@0.6.1

Minor Changes

• #6590 f338802 Thanks @knsv! - Adding support for the new diagram type nested treemap

Patch Changes

• #6707 592c5bb Thanks @darshanr0107! - fix: Log a warning when duplicate commit IDs are encountered in gitGraph to help identify and debug rendering issues caused by non-unique IDs.

• Updated dependencies [f338802]:

  • @mermaid-js/parser@0.6.0

Minor Changes

• #6479 97b79c3 Thanks @monicanguyen25! - feat: Add Vertical Line To Gantt Plot At Specified Time

• #6225 41e84b7 Thanks @Shahir-47! - feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

• #6423 aa6cb86 Thanks @BambioGaming! - Added support for the click directive in stateDiagram syntax

• #5980 df9df9d Thanks @BryanCrotazGivEnergy! - feat: Add shorter +<count>: Label syntax in packet diagram

• #6523 c17277e Thanks @NourBenz! - fix: allow sequence diagram arrows with a trailing colon but no message

• #6475 a1ba65c Thanks @Shahir-47! - feat: Dynamically Render Data Labels Within Bar Charts

Patch Changes

• #6588 b1cf291 Thanks @omkarht! - Fix stroke styles for ER diagram to correctly apply path and row-specific styles

• #6296 a4754ad Thanks @sidharthv96! - chore: Convert StateDB into TypeScript

• #6463 2b05d7e Thanks @AaronMoat! - fix: Remove incorrect style="undefined;" attributes in some Mermaid diagrams

• #6282 d63d3bf Thanks @saurabhg772244! - FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via mermaid.registerIconPacks.

• #6407 cdbd3e5 Thanks @thomascizeron! - Refactor grammar so that title don't break Architecture Diagrams

• #6343 1ddaf10 Thanks @jeswr! - fix: allow colons in events

• #6616 ca80f71 Thanks @ashishjain0512! - fix(timeline): ensure consistent vertical line lengths with visible arrowheads

  Fixed timeline diagrams where vertical dashed lines from tasks had inconsistent lengths. All vertical lines now extend to the same depth regardless of the number of events in each column, with sufficient padding to clearly display both the dashed line pattern and complete arrowheads.

• #6566 bca6ed6 Thanks @arpitjain099! - fix: Fix incomplete string escaping in URL manipulation logic when arrowMarkerAbsolute: true by ensuring all unsafe characters are escaped.

• Updated dependencies [df9df9d, cdbd3e5]:

  • @mermaid-js/parser@0.5.0

Minor Changes

• #6408 ad65313 Thanks @ashishjain0512! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:

  • Config
  • Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
  • LinkStyle command (linkStyle default interpolate ...)

• #6381 95d73bc Thanks @thomascizeron! - Add Radar Chart

Patch Changes

• #2 16d9b63 Thanks @calvinvette! - - #6388 Thanks @bollwyvl - Fix requirement diagram containment arrow
• Updated dependencies [95d73bc]:
  • @mermaid-js/parser@0.4.0

Minor Changes

• #6187 7809b5a Thanks @ashishjain0512! - Flowchart new syntax for node metadata bugs

  • Incorrect label mapping for nodes when using &
  • Syntax error when } with trailing spaces before new line

• #6136 ec0d9c3 Thanks @knsv! - Adding support for animation of flowchart edges

• #6373 05bdf0e Thanks @ashishjain0512! - Upgrade Requirement and ER diagram to use the common renderer flow

  • Added support for directions
  • Added support for hand drawn look

• #6371 4d25cab Thanks @knsv! - The arrowhead color should match the color of the edge. Creates a unique clone of the arrow marker with the appropriate color.

Patch Changes

• #6064 2a91849 Thanks @NicolasNewman! - fix: architecture diagrams no longer grow to extreme heights due to conflicting alignments

• #6198 963efa6 Thanks @ferozmht! - Fixes for consistent edge id creation & handling edge cases for animate edge feature

• #6196 127bac1 Thanks @knsv! - Fix for issue #6195 - allowing @ signs inside node labels

• #6212 90bbf90 Thanks @saurabhg772244! - fix: mermaidAPI.getDiagramFromText() now returns a new different db for each class diagram

• #6218 232e60c Thanks @saurabhg772244! - fix: revert state db to resolve getData returning empty nodes and edges

• #6250 9cad3c7 Thanks @saurabhg772244! - mermaidAPI.getDiagramFromText() now returns a new db instance on each call for state diagrams

• #6293 cfd84e5 Thanks @saurabhg772244! - Added versioning to StateDB and updated tests and diagrams to use it.

• #6161 6cc31b7 Thanks @saurabhg772244! - fix: mermaidAPI.getDiagramFromText() now returns a new different db for each flowchart

• #6272 ffa7804 Thanks @saurabhg772244! - fix: mermaidAPI.getDiagramFromText() now returns a new different db for each sequence diagram. Added unique IDs for messages.

• #6205 32a68d4 Thanks @saurabhg772244! - fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

• #6295 da6361f Thanks @omkarht! - fix: getDirection and setDirection in stateDb refactored to return and set actual direction

• #6185 3e32332 Thanks @saurabhg772244! - mermaidAPI.getDiagramFromText() now returns a new different db for each state diagram

Patch Changes

• #6059 01b5079 Thanks @knsv! - fix: Kanban diagrams will not render when adding a number as ticket id or assigned for a task

• #6038 1388662 Thanks @knsv! - fix: Intersection calculations for tilted cylinder/DAS when using handdrawn look. Some random seeds could cause the calculations to break.

• #6079 fe3cffb Thanks @aloisklink! - Bump dompurify to ^3.2.1. This removes the need for @types/dompurify.

Minor Changes

• #5999 742ad7c Thanks @knsv! - Adding Kanban board, a new diagram type

• #5880 bdf145f Thanks @yari-dewalt! - Class diagram changes:

  • Updates the class diagram to the new unified way of rendering.
  • Includes a new "classBox" shape to be used in diagrams
  • Other updates such as:
    • the option to hide the empty members box in class diagrams,
    • support for handDrawn look,
    • the introduction of the classDef statement into class diagrams,
    • support for styling the default class,
    • support lollipop interfaces.
  • Includes fixes / additions for #5562 #3139 and #4037

Patch Changes

• #5937 17b7831 Thanks @saurabhg772244! - fix: Jagged edge fix for icon shape

• #5933 72d60d2 Thanks @remcohaszing! - Add missing TypeScript dependencies

• #5937 17b7831 Thanks @saurabhg772244! - fix: Icon color fix for colored icons.

• #6002 5fabd41 Thanks @aloisklink! - fix: error mermaid.parse on an invalid shape, so that it matches the errors thrown by mermaid.render

Minor Changes

• #5825 9e3aa70 Thanks @knsv, @ashishjain0512, @omkarht, @saurabhg772244, @aloisklink, @sidharthv96 ! - New Flowchart Shapes (with new syntax)

Patch Changes

• #5849 6c5b7ce Thanks @ReneLombard! - Fixed an issue when the mermaid classdiagram crashes when adding a . to the namespace. Forexample

  
  classDiagram
    namespace Company.Project.Module {
      class GenericClass~T~ {
        +addItem(item: T)
        +getItem() T
      }
    }
  

• #5914 de2c05c Thanks @aloisklink! - Ban DOMPurify v3.1.7 as a dependency

Patch Changes

• #5856 bfd8c63 Thanks @knsv! - Fix for issue with calculation of label width when using in firefox

Minor Changes

• #5831 64abf29 Thanks @sidharthv96! - feat: Return parsed config from mermaid.parse

Patch Changes

• #5838 5e75320 Thanks @bollwyvl! - fix: Replace $root with relative paths

Patch Changes

• #5828 4c43d21 Thanks @knsv! - fix: Fix for issue where self-loops in the root of diagrams break the rendering

11.1.0

Minor Changes

• #5793 6ecdf7b Thanks @sidharthv96! - feat: Add support for iconify icons

• #5711 8e640da Thanks @NicolasNewman! - feat(er): allow multi-line relationship labels

• #5452 256a148 Thanks @NicolasNewman! - New Diagram: Architecture

  Adds architecture diagrams which allows users to show relations between services.

Patch Changes

• #5810 28bd07f Thanks @knsv! - Fix for self loops in cluster Supporting legacy defaultRenderer directive

• #5789 16faef4 Thanks @sidharthv96! - chore: Move icons to architecture, remove full icon sets to reduce bundle size

• Updated dependencies [256a148, 7d8143b]:

  • @mermaid-js/parser@0.3.0

Patch Changes

• #5664 5deaef4 Thanks @Austin-Fulbright! - chore: Migrate git graph to langium, use typescript for internals

• Updated dependencies [5deaef4]:

  • @mermaid-js/parser@0.2.0

Patch Changes

• #2 bf05d87 Thanks @calvinvette! - test changeset