TL;DR

Mermaid now supports several new diagram types and enhancements, significantly expanding its visualization capabilities, including Cynefin frameworks, Railroad diagrams, and improved chart customization.

New

• Diagram Types: Added Cynefin, Railroad (IR, EBNF, ABNF, PEG), and Swimlane diagrams.
• ChartView Enhancements: Pie charts now support donut styles, legend positioning, and slice highlighting. Xycharts now support rotated X-axis labels.
• TreeView Improvements: Added support for box-drawing characters and file/directory structures.

Fixes Worth Knowing

• Gantt charts now handle long exclusion lists more effectively.
• ER diagrams support optional attribute types.
• Architecture diagrams allow explicit alignment of services.

Before You Upgrade

No specific action is required, but review the documentation for the new diagram types to understand their syntax and usage.

TL;DR

Mermaid diagrams now correctly handle edge merging within subgraphs when using the ELK layout (a graph visualization algorithm), resolving a common issue for complex diagrams.

Fixes Worth Knowing

• ELK layout: Edge merging now functions as expected inside subgraphs when elk.mergeEdges is enabled. This ensures edges defined within a subgraph are correctly combined, improving diagram clarity.

TL;DR

Mermaid now supports four new diagram types – Cynefin (decision-making), Railroad (syntax), Architecture, and enhanced Tree View – expanding its capabilities for visualizing complex systems and data structures.

New

• Railroad Diagrams: Visualize programming language syntax (Syntax Diagrams).
• Cynefin Diagrams: Support for the Cynefin framework (decision-making tool).
• Architecture Diagrams: Added alignment directives for better layout.

Fixes Worth Knowing

• TreeView: Improved for representing file/directory structures.
• Examples: Added real-world examples for all diagram types, making it easier to learn and use Mermaid.

TL;DR

Mermaid diagrams are more secure with fixes addressing potential CSS injection and denial-of-service vulnerabilities, alongside compatibility improvements with newer uuid packages (unique identifier libraries).

Fixes Worth Knowing

• Fixed an issue in Gantt charts (project scheduling diagrams) where excluding dates could cause infinite loops.
• Addressed a potential security issue preventing unbalanced CSS styles when defining custom classes.
• Improved CSS style creation for better security and compatibility.
• Prevented CSS scope escape vulnerabilities.
• Updated dependencies to resolve warnings about the uuid package.

TL;DR

Mermaid diagrams now support tree shaking (code optimization) which reduces bundle sizes when importing specific diagram types.

Fixes Worth Knowing

Imports for dayjs (date/time library) and cytoscape (graph theory/visualization) have been corrected, resolving potential issues with those dependencies.

Before You Upgrade

If you are using a bundler like Webpack or Rollup, verify your Mermaid diagram imports to ensure tree shaking is functioning as expected.

TL;DR

Mermaid now offers a 'sandbox' security level, rendering diagrams within a sandboxed iframe for increased security, returning the diagram as a base64 encoded URL within the iframe.

New

• Sandbox Security Level: A new, more secure rendering option is available using sandboxed iframes.

Fixes Worth Knowing

• Documentation now uses Mermaid diagrams directly instead of images, improving clarity and maintainability.
• Updated documentation references the mkdocs-mermaid2-plugin (plugin for MkDocs documentation generation).

TL;DR

Mermaid now supports data flow diagrams, expanding the types of visualizations you can create.

Fixes Worth Knowing

A cross-site scripting (XSS) vulnerability has been resolved, improving security. State diagrams now correctly render names containing spaces.

TL;DR

Mermaid now uses an improved renderer for state diagrams, resulting in better visual quality and consistency with stateDiagram-v2 (diagramming syntax).

New

• State diagrams now use a new, improved renderer.
• User journey diagrams have enhanced theming options with diagram-specific variables (customizable styles).

Fixes Worth Knowing

• Mermaid now handles JavaScript URLs safely and blocks errors when using the antiscript security setting (prevents malicious code).

TL;DR

Mermaid now supports class diagrams, offering a new way to visualize software structure (UML diagrams).

New

• Class diagram support has been added.
• A new neutral theme is available.

Fixes Worth Knowing

• Gantt chart configuration parsing via the command-line interface (CLI) is now fixed.
• CSS styling for flowchart arrowheads and node circles is improved.
• SVG line endings are corrected, resolving display issues.
• Actor label placement in sequence diagrams is improved.

TL;DR

Mermaid now supports git graph diagrams and activation boxes in sequence diagrams, expanding its visualization capabilities.

Breaking

• PhantomJS pathing (command-line tool) – requires updated configuration on Windows.

New

• Git graph diagrams (visualize Git history).
• Activation boxes (highlight activity in sequence diagrams).

Fixes Worth Knowing

• Sequence diagram loops now render correctly with box margins.
• Gantt charts handle section name spacing better.
• Flowchart link styles interpolate lines correctly.