Release Candidate 11.17.0

[pbrolin47]

📑 Summary

This pull request introduces several new features, improvements, and fixes across the Mermaid ecosystem, focusing on enhanced diagram rendering, configurability, and user experience. Major highlights include new shapes and rendering options, collapsible subgraphs, improved layout handling, and a TypeScript migration for the C4 diagram implementation. Additionally, there are numerous bug fixes and quality-of-life improvements for both users and developers.

New Features and Enhancements

• Unified Rendering and New Shapes

  • The classDiagram now uses the unified (v2) renderer by default, with improved self-loop rendering. You can revert to the legacy renderer via config if needed.
  • C4 elements are now rendered through the unified shape system, including a new person shape. [1] [2]
  • Added new shapes for flowcharts: folder, bucket, console (terminal window), and browser.

• Diagram Interactivity and Examples

  • Flowchart subgraphs can now be collapsed using the @{ view: collapsed } annotation, rendering them as single nodes with redirected edges.
  • ER diagrams now support subgraphs.
  • Added relatable, real-world examples for every diagram type, all parse-validated and tested.

• Layout Improvements

  • ELK layout is now integrated into the shared rendering pipeline, ensuring consistent rendering and exposing elk.nodePlacementAlignment for custom alignment strategies.
  • Added elk.keepEntryNodeOnTop config option to ensure entry nodes remain at the top in recursive flows.
  • The unified dagre layout now correctly prioritizes diagram-specific node/rank spacing over flowchart defaults.

Bug Fixes and Maintenance

• Rendering and Parsing Fixes

  • Fixed overlapping sibling blocks in block diagrams when labels are wider than 200px.
  • Prevented RangeError: Invalid array length crashes for certain edges by clamping dash-gap pair counts.
  • Fixed C4 named attributes ($tags, $link, $sprite) from being overwritten by positional arguments.
  • Allowed non-ASCII characters and punctuation in unquoted architecture bracket titles.
  • Fixed treeView icons disappearing after strict security sanitization.
  • Block diagrams now allow classdefs to update text color.
  • Stopped dagre layout from emitting excessive warn-level logs, improving performance for large diagrams.
  • Reverted a previous change (fix(flowchart): respect per-subgraph direction keyword in Dagre layout #7672) that broke arrows between subgraphs.

• Codebase Maintenance

  • Migrated the C4 diagram implementation to TypeScript and introduced shared helpers, with no behavior changes.
  • Pinned langium to version 4.2.1 to maintain compatibility with chevrotain v11 and Node 20.

Other Notable Changes

• Improved support for Unicode and punctuation in architecture diagram titles.

These changes collectively enhance the flexibility, reliability, and maintainability of Mermaid diagrams and their underlying codebase.

Resolves #

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4150c73

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@mermaid-js/parser	Patch
mermaid	Minor
@mermaid-js/layout-elk	Minor
@mermaid-js/examples	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cd393df2-9a7b-4fe8-9d29-f6d5838139f9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 86.08894% with 122 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.54%. Comparing base (eba7287) to head (8628ef1).
⚠️ Report is 3 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/mermaid-layout-elk/src/render.ts	86.08%	122 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #8071       +/-   ##
===========================================
+ Coverage   64.30%   77.54%   +13.23%     
===========================================
  Files         670      572       -98     
  Lines       75072    75279      +207     
  Branches    11171    14686     +3515     
===========================================
+ Hits        48273    58373    +10100     
+ Misses      26799    15901    -10898     
- Partials        0     1005     +1005     

Flag	Coverage Δ
e2e	71.42% <ø> (?)
unit	74.80% <86.08%> (+10.50%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/defaultConfig.ts	51.82% <ø> (-3.10%)	⬇️
packages/mermaid/src/diagram-api/requiredConfig.ts	100.00% <ø> (ø)
...ckages/mermaid/src/diagrams/block/blockRenderer.ts	91.93% <ø> (-0.93%)	⬇️
...ckages/mermaid/src/diagrams/block/renderHelpers.ts	69.91% <ø> (+11.39%)	⬆️
packages/mermaid/src/diagrams/block/styles.ts	100.00% <ø> (ø)
packages/mermaid/src/diagrams/c4/c4Db.ts	63.29% <ø> (ø)
packages/mermaid/src/diagrams/c4/c4Renderer.ts	82.07% <ø> (ø)
packages/mermaid/src/diagrams/c4/c4ShapeAdapter.ts	93.84% <ø> (ø)
packages/mermaid/src/diagrams/c4/styles.js	100.00% <ø> (ø)
packages/mermaid/src/diagrams/c4/svgDraw.ts	63.81% <ø> (ø)
... and 68 more

... and 272 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	281 added	Aug 18, 2026, 1:35 PM