Fix/5741 unique marker ids

[Bunker-D]

📑 Summary

Ensures unique IDs for the markers. This extends merge #4825, to cover C4 context diagrams, Entity Relationship diagrams, Requirement diagram, Sequence diagrams, Timelines, and User Journeys.

Resolves #5741, #1318 and #3267 (that were closed while only partially resolved), mjbvz/vscode-markdown-mermaid/#270.

Also, adds classes to the markers for future and/or custom styling purposes.

📏 Design Decisions

Markers IDs are replaced by <svg_id>-<marker_id>, where:

• <svg_id> is the ID of the SVG element (the Mermaid diagram)
• <marker_id> is the previously used id.

The added classes use the format: mermaid-marker-<diagram_type>-<marker_id> (e.g., mermaid-marker-er-ONLY_ONE_END), where <diagram_type> is a shorthand for the diagram type:

• C4 Context (C4Context) → c4
• Entity Relation diagram (erDiagram) → er
• User Journey (journey) → journey
• Requirements (requirementDiagram) → req
• Sequence (sequenceDiagram) → seq
• Timeline (timeline) → tl

Those changes have also been implemented for seemingly unused markers found in the code.

📋 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]

⚠️ No Changeset found

Latest commit: 57de0c8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	57de0c8
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66e8a6c96f1c9500089247cd
😎 Deploy Preview	https://deploy-preview-5756--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.

[codecov]

Codecov Report

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

Project coverage is 4.99%. Comparing base (7a86fd7) to head (57de0c8).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/er/erRenderer.js	0.00%	34 Missing ⚠️
packages/mermaid/src/diagrams/c4/svgDraw.js	0.00%	30 Missing ⚠️
packages/mermaid/src/diagrams/er/erMarkers.js	0.00%	22 Missing ⚠️
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	21 Missing ⚠️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00%	16 Missing ⚠️
...id/src/diagrams/requirement/requirementRenderer.js	0.00%	13 Missing ⚠️
packages/mermaid/src/diagrams/c4/c4Renderer.js	0.00%	10 Missing ⚠️
.../mermaid/src/diagrams/timeline/timelineRenderer.ts	0.00%	6 Missing ⚠️
...aid/src/diagrams/requirement/requirementMarkers.js	0.00%	5 Missing ⚠️
packages/mermaid/src/diagrams/sequence/styles.js	0.00%	3 Missing ⚠️
... and 4 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5756      +/-   ##
==========================================
- Coverage     5.00%   4.99%   -0.01%     
==========================================
  Files          337     338       +1     
  Lines        48213   48287      +74     
  Branches       576     551      -25     
==========================================
  Hits          2413    2413              
- Misses       45800   45874      +74     

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

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/er/styles.js	0.00% <0.00%> (ø)
...rmaid/src/diagrams/user-journey/journeyRenderer.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/sequence/styles.js	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/timeline/svgDraw.js	0.00% <0.00%> (ø)
...kages/mermaid/src/diagrams/user-journey/svgDraw.js	0.00% <0.00%> (ø)
...aid/src/diagrams/requirement/requirementMarkers.js	0.00% <0.00%> (ø)
.../mermaid/src/diagrams/timeline/timelineRenderer.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/c4/c4Renderer.js	0.00% <0.00%> (ø)
...id/src/diagrams/requirement/requirementRenderer.js	0.00% <0.00%> (ø)
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00% <0.00%> (ø)
... and 4 more

... and 1 file with indirect coverage changes

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	1 changed, 6 added	Sep 16, 2024, 9:57 PM

[Bunker-D]

I don't know why Lint fails here on GitHub (the “Some checks were not successful”). It works fine on my machine.

Of note too: vitest run fails on my machine… because of gitGraph, which is not something I changed. (I don't think it failed before I updated my fork today.)

[sidharthv96]

Can you remove this file from the PR?

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/mermaid-js/mermaid@5756

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5756

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5756

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5756

commit: 57de0c8