Add markdown support to sequence diagram notes

[schadenn]

📑 Summary

This adds markdown support using Marked (including highlighting).
Took some inspiration from the other seemingly abandoned PRs.

Please review & let me know if the approach I took is fine 🙏

Resolves #1844 #4381 #4725 #5460

📏 Design Decisions

Instead of adding markdown syntax to the mermaid jison syntax definition (like the other PRs tried to do), I just added the option to use a [ to open and ] to close a note. Inbetween the brackets, newlines are supported and the whole string will be fed into marked.

🎨 Demo

📋 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.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

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

❌ Patch coverage is 12.73885% with 274 lines in your changes missing coverage. Please review.
✅ Project coverage is 5.26%. Comparing base (c5eb07c) to head (04732b9).
⚠️ Report is 4478 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/sequence/styles.js	0.00%	133 Missing ⚠️
packages/mermaid/src/diagrams/common/common.ts	37.37%	62 Missing ⚠️
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	51 Missing ⚠️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00%	24 Missing ⚠️
packages/mermaid/src/utils.ts	50.00%	3 Missing ⚠️
...kages/mermaid/src/diagrams/common/svgDrawCommon.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5705      +/-   ##
==========================================
+ Coverage     5.22%   5.26%   +0.04%     
==========================================
  Files          322     323       +1     
  Lines        46201   46510     +309     
  Branches       561     537      -24     
==========================================
+ Hits          2415    2451      +36     
- Misses       43786   44059     +273     

Flag	Coverage Δ
unit	5.26% <12.73%> (+0.04%)	⬆️

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

Files with missing lines	Coverage Δ
...kages/mermaid/src/diagrams/common/svgDrawCommon.ts	0.00% <0.00%> (ø)
packages/mermaid/src/utils.ts	41.84% <50.00%> (+0.12%)	⬆️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/common/common.ts	49.37% <37.37%> (-3.51%)	⬇️
packages/mermaid/src/diagrams/sequence/styles.js	0.00% <0.00%> (ø)

... 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)	46 changed, 1 added	Aug 19, 2024, 12:08 PM

[schadenn]

@sidharthv96 Hi there 👋
Not really sure how to follow up on this (and with whom). I think the only check failing is due to changed visuals, which I can not approve. Otherwise I think everything should be ready. Wdyt about the approach? I would really like to get markdown support in, so let me know if I should explore other ways instead.

[sidharthv96]

Hi @schadenn,
There is some ongoing work to standardise rendering, which would cover markdown (basic stuff, not code highlights and all). This might also bring markdown support to all strings, which means we won't have to do special handling. The details are not yet confirmed, that's why we haven't reviewed this PR.

Also, HighlightJS is a big dependency, which increases the bundle size significantly.

[John-Paul-R]

@sidharthv96 Is there a tracking Issue or PR we can follow for this "bring markdown support to all strings"? I am interested in this feature!

[sidharthv96]

These two are related. Other diagrams needs to be migrated to the new approach.

#5825
#5604