feat(c4): AddElementTag/AddRelTag styling for the unified renderer

[filipsajdak]

Summary

Adds AddElementTag(...) / AddRelTag(...) styling to C4 diagrams in the unified renderer: elements and relationships carrying a tag pick up the tag's bgColor/fontColor/borderColor/shape (elements) or textColor/lineColor (rels). Tag styles compose with per-element styles and the config palette. Legacy renderer behaviour is unchanged.

Stacked on #7842 (opt-in unified renderer) - draft until #7842 merges; the diff carries #7842's commits until then. Base slice for clickable $link and SHOW_LEGEND(). Tracked in #7849.

Slice commits (review by commit):

• feat(c4): style elements and rels via AddElementTag and AddRelTag (+ parser/layout specs)
• chore(c4): add changeset

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: b83e908

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	b83e908
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a34ee8ea707640008b8f161
😎 Deploy Preview	https://deploy-preview-7862--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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@7862

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: b83e908

[codecov]

Codecov Report

❌ Patch coverage is 91.16022% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.91%. Comparing base (625ab8b) to head (b83e908).
⚠️ Report is 2 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/c4/c4Db.ts	82.85%	3 Missing and 3 partials ⚠️
packages/mermaid/src/diagrams/c4/c4LayoutData.ts	95.23%	2 Missing and 3 partials ⚠️
...ages/mermaid/src/diagrams/c4/c4Renderer-unified.ts	77.77%	0 Missing and 4 partials ⚠️
...ndering-util/rendering-elements/shapes/c4Person.ts	94.73%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7862      +/-   ##
===========================================
+ Coverage    77.79%   77.91%   +0.11%     
===========================================
  Files          409      412       +3     
  Lines        30328    30509     +181     
  Branches      5175     5213      +38     
===========================================
+ Hits         23595    23771     +176     
- Misses        5410     5411       +1     
- Partials      1323     1327       +4     

Flag	Coverage Δ
e2e	82.06% <91.16%> (+0.09%)	⬆️
unit	24.36% <ø> (ø)

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/c4/c4Diagram.ts	100.00% <100.00%> (ø)
packages/mermaid/src/diagrams/c4/styles.js	100.00% <ø> (ø)
...id/src/rendering-util/rendering-elements/shapes.ts	100.00% <ø> (ø)
...ndering-util/rendering-elements/shapes/c4Person.ts	94.73% <94.73%> (ø)
...ages/mermaid/src/diagrams/c4/c4Renderer-unified.ts	77.77% <77.77%> (ø)
packages/mermaid/src/diagrams/c4/c4LayoutData.ts	95.23% <95.23%> (ø)
packages/mermaid/src/diagrams/c4/c4Db.ts	58.35% <82.85%> (+4.39%)	⬆️

... and 3 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)	91 changed, 75 added	Jun 19, 2026, 8:50 AM

[filipsajdak]

Heads-up: following @aloisklink's review on #7842, Track 1 has switched from the opt-in-flag approach to an in-place migration sliced by rendering layer (shapes -> edges -> layout) - see the updated plan in #7849.

This slice is paused for now. Its branch is preserved as an archive tag (archive/2026-06-17/... on the fork) and its work is reused: it will be re-sequenced as a feature slice on top of the migrated (now-default) unified renderer rather than stacked on an opt-in flag. Keeping it open as a draft for reference; not abandoned.

[filipsajdak]

Closing this PR. It was part of the original opt-in feature-slice approach for the C4 unified renderer. Following @aloisklink's review on #7842, that approach was superseded by an in-place migration sliced by rendering layer (shapes -> edges -> layout), tracked in #7849 (#7842 shapes, #7883 edges, layout PR to follow). This feature will be re-introduced on top of the migrated renderer once the layout slice lands.

The branch is preserved as an archive tag (archive/2026-06-17/*) for reference, so nothing is lost. Closing to keep the open-PR set small and avoid unnecessary CI.