6369 mirror edge color on arrowhead

[knsv]

📑 Summary

The arrowhead color should match the color of the edge.

• Enhanced marker handling: Arrows now properly match the edge color instead of using default colors
• Dynamic marker creation: Creates colored variants of markers when needed
• Improved reusability: Same-colored arrows reuse the same marker definitions
• Smart fill behavior: Configurable fill behavior for different arrow types

Resolves #6369

📏 Design Decisions

Instead of using CSS to style existing markers (which had inconsistent browser support), this implementation:

• Detects when an edge has a custom stroke color
• Creates a unique clone of the arrow marker with the appropriate color
• Applies stroke/fill directly to SVG element attributes
• References the colored marker variant from the edge

This ensures styling consistency across all browsers and prevents side effects between different edges.

📋 Tasks

• 📖 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: 4d25cab

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	4d25cab
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67d159818fcb1300089f6f34
😎 Deploy Preview	https://deploy-preview-6371--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 site configuration.

[pkg-pr-new]

Open in Stackblitz

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

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

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

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

commit: 4d25cab

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 49 lines in your changes missing coverage. Please review.

Project coverage is 3.88%. Comparing base (bc2bd3d) to head (4d25cab).
Report is 4 commits behind head on develop.

Files with missing lines	Patch %	Lines
...rc/rendering-util/rendering-elements/edgeMarker.ts	0.00%	43 Missing ⚠️
...aid/src/rendering-util/rendering-elements/edges.js	0.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6371      +/-   ##
==========================================
- Coverage     3.88%   3.88%   -0.01%     
==========================================
  Files          398     399       +1     
  Lines        42044   42080      +36     
  Branches       638     638              
==========================================
  Hits          1635    1635              
- Misses       40409   40445      +36     

Flag	Coverage Δ
unit	3.88% <0.00%> (-0.01%)	⬇️

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

Files with missing lines	Coverage Δ
...aid/src/rendering-util/rendering-elements/edges.js	0.00% <0.00%> (ø)
...rc/rendering-util/rendering-elements/edgeMarker.ts	1.44% <0.00%> (-0.83%)	⬇️

... and 1 file 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)	6 changed, 1 added	Mar 12, 2025, 10:03 AM

[ashish4mc]

LGTM

[brunolnetto]

A long time ago, in a galaxy far away, I made this remark, and @knsv recognized as good-to-have feature. It is nice to have it now, thanks!!