Bug/5741 fix duplicate svg element ids

[alexander-turner]

📑 Summary

When multiple Mermaid diagrams share a page, identical SVG element IDs (nodes, edges, edge labels, markers, task lines, sequence lifelines, etc.) collide across <svg> containers. This causes browsers to bind event handlers, arrow markers, and CSS selectors to the wrong elements. Such incorrect binding breaks click callbacks, makes arrowheads disappear, and corrupts styling.

This PR extends the namespacing approach introduced in #4825 (which scoped marker IDs per graph) to all internally generated SVG element IDs across every diagram type. Each ID is prefixed with its diagram's unique SVG container ID, guaranteeing no collisions regardless of how many diagrams appear on a page.

Related PRs:

• #5741 — Duplicated IDs for markers (still open; stale, and without test coverage; this PR should obsolete its changes)
• #6621 — Open PR addressing duplicate ID generation in fast multi-block renders (complementary; targets container IDs, not element IDs)
• #4825 — Merged PR that gave markers unique IDs per graph (our approach extends this pattern to all element types)

Related issues:

• #4346 — bindFunctions interactions only work on one diagram instance when multiple are on the same page
• #1318 — Duplicate IDs across diagrams have potential to break some diagrams
• #3267 — Generated SVG has static IDs which cause issues with multiple SVGs
• #3433 — revealjs + mermaidjs arrows missing on 4th+ diagram (same root cause)

📏 Design Decisions

Following the precedent set by #4825: that merged PR scoped marker IDs by prefixing them with the graph container ID. We apply the same namespacing strategy comprehensively — to node IDs, edge IDs, edge-label IDs, cluster IDs, task-line IDs, sequence lifeline/actor IDs, timeline section IDs, C4 element IDs, and journey task IDs.

Implementation approach:

• Added diagramId field + setDiagramId() to FlowDB and ClassDB; added to the DiagramDB interface in types.ts so any diagram DB can opt in
• Each v3-unified renderer calls setDiagramId(id) with the SVG container ID before layout
• lookUpDomId() in FlowDB/ClassDB returns ${diagramId}-${originalId}
• The generic rendering path (render.ts, createGraph.ts, edges.js, clusters.js) prefixes IDs for diagrams routed through the shared renderer
• Diagram-specific renderers (sequence, journey, timeline, gantt, C4, kanban) prefix IDs in their own svgDraw / renderer files
• diagramId resets on clear() to prevent state leakage
• Cypress E2E test (multi_diagram_unique_ids.spec.js) + unit tests (unique-dom-ids.spec.ts, multi-diagram-id-uniqueness.spec.ts) covering all diagram types and collision scenarios

Breaking changes

• Marker IDs (e.g. arrowhead, crosshead) are now prefixed with the diagram's SVG element ID. Custom CSS or JS using exact ID selectors like #arrowhead should use attribute-ending selectors like [id$="-arrowhead"] instead.
• The changed Argos snapshots should be accepted. CSS selectors like #statediagram-barbEnd and #compositionStart were changed to [id$="-barbEnd"] and [id$="-compositionStart"]. The old selectors were dead code — since PR Give markers unique id's per graph #4825, marker IDs have been in the format ${diagramId}_${type}-markerName, so the bare ID selectors like #statediagram-barbEnd never matched. The new attribute selectors correctly apply marker styles that were always intended but never worked, including an additional 1px along arrowhead borders.

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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	1683488
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69af59ca9bb0940008c51582
😎 Deploy Preview	https://deploy-preview-7410--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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1683488

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: db04db9

[alexander-turner]

[Note from human: I supervised Claude Code and skimmed the new commits, they seem to be accurately described.]

Thanks for the thorough review, @knsv! All items have been addressed across the follow-up commits. Here's a summary:

🟡 lookUpDomId() should guard against empty diagramId — Fixed

Added ternary guards in both flowDb.ts and classDb.ts, matching the pattern already used in ganttDb.js.

Commits: 4fd4f687

🟡 Coverage gap between description and implementation — Clarified & updated

After deeper investigation, all diagram types are effectively covered:

• Diagram types using the v3-unified rendering pipeline (flowchart, class, state, ER, etc.) get ID-prefixed nodes/edges/markers through the shared rendering-elements/ layer and createUniquePrefix()
• Diagram types with their own renderers (sequence, gantt, C4, timeline, kanban) received explicit prefixing in this PR
• The multi-diagram-id-uniqueness.spec.ts meta-test validates that every registered diagram type renders with unique, non-colliding IDs — including ishikawa and venn which were added after merging develop

Commits: 4fd4f687, 398fa6bd, 0c50f5aa

🟢 Sequence renderer mutates the shared conf object — Fully resolved

This took three steps:

1. Initially passed diagramId as a parameter to drawMessage() while keeping conf.diagramId for svgDraw.js compatibility (4fd4f687)
2. Discovered svgDraw.js drawActorTypeControl() reads conf.diagramId directly (lines 690, 712), so temporarily restored the mutation (df6c9ac9)
3. Threaded diagramId explicitly through the full call chain: draw() → drawActors() → drawActor() → drawActorTypeControl() in svgDraw.js, eliminating the conf mutation entirely (aa4f2777)

Commits: 4fd4f687, df6c9ac9, aa4f2777

🟢 Changeset bump level — Updated to minor

Commit: 398fa6bd

💡 Timeline nodeCount module-level counter — Acknowledged, no change

Agreed this is fine in practice since initGraphics() is always called at the start of timeline rendering. Left as-is.

[alexander-turner]

@knsv any update?

[knsv]

Thanks for addressing the feedback so thoroughly, @alexander-turner! Great to see this moving forward.

Overall, this is a solid, well-structured fix for a long-standing problem. Happy to approve! 🎉

[mermaid-bot]

@alexander-turner, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.