feat(flowchart): Add highlight and drag node interaction

[vicaya]

📑 Summary

Adds interactive features to flowchart diagrams: click-to-highlight nodes and connected edges with drop shadows, and drag-to-rearrange node positions with edges following the dragged node.

Resolves #5883

Configuration Options

• flowchart.enableInteraction (boolean, default: true) - Enables/disables interactive features

Interactions

1. Click to Highlight: Click on any node to highlight it with a drop shadow. Connected edges are also highlighted with drop shadows. Click again to toggle off.
2. Drag to Rearrange: Drag nodes to rearrange the graph layout. Edges follow the dragged node by extending from the original connection points.

Implementation Details

• Uses CSS filter: drop-shadow() for highlighting (no inline styles)
• Connected edges get highlighted with drop shadow when node is selected
• Edge paths extend from original connection points during drag
• Supports both older dagre rendering (.edgePaths) and newer rendering (.edges) paths
• Click handling integrated into d3-drag using clickDistance(3) to distinguish clicks from drags

Demo & Testing

• Added dark mode toggle button to demos/flowchart.html for testing against dark backgrounds
• Added theme selector dropdown to switch between mermaid themes (default, base, dark, forest, neutral)
  • Theme selector stores original diagram sources BEFORE mermaid renders, so they can be properly re-rendered with new theme
• E2E tests in cypress/integration/rendering/flowchart-interaction.spec.ts

📋 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: cf07a49

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

This PR includes changesets to release 1 package

Name	Type
mermaid	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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	cf07a49
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69b4be5dfc17db0008589bd7
😎 Deploy Preview	https://deploy-preview-7318--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7318

mermaid

npm i https://pkg.pr.new/mermaid@7318

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7318

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7318

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7318

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7318

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7318

commit: ea18c4f

[codecov]

Codecov Report

❌ Patch coverage is 0% with 249 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.50%. Comparing base (277c496) to head (cf07a49).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	249 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7318      +/-   ##
==========================================
- Coverage     3.52%   3.50%   -0.02%     
==========================================
  Files          509     509              
  Lines        49790   50037     +247     
  Branches       785     785              
==========================================
  Hits          1754    1754              
- Misses       48036   48283     +247     

Flag	Coverage Δ
unit	3.50% <0.00%> (-0.02%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/config.type.ts	100.00% <ø> (ø)
packages/mermaid/src/diagrams/flowchart/styles.ts	2.22% <ø> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00% <0.00%> (ø)

🚀 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)	✅ No changes detected	1 failure	Mar 14, 2026, 1:58 AM

[vicaya]

/retest