Feature/4381 markdown in sequence diagram

[ibrahimWassouf]

📑 Summary

Implements markdown in sequence diagrams

Resolves #4381 #1844 #

📏 Design Decisions

I've stuck to simply imitating what other diagrams have implemented and reused as much code as I could.

📋 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

[codecov]

Codecov Report

❌ Patch coverage is 88.00000% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.43%. Comparing base (ed819e9) to head (4ebac5f).
⚠️ Report is 6148 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/utils.ts	33.33%	8 Missing ⚠️
packages/mermaid/src/diagrams/sequence/svgDraw.js	97.82%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4725      +/-   ##
===========================================
+ Coverage    77.05%   77.43%   +0.38%     
===========================================
  Files          146      146              
  Lines        14573    14632      +59     
  Branches       592      594       +2     
===========================================
+ Hits         11229    11331     +102     
+ Misses        3225     3183      -42     
+ Partials       119      118       -1     

Flag	Coverage Δ
e2e	84.46% <98.48%> (+0.53%)	⬆️
unit	45.50% <8.33%> (-0.05%)	⬇️

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

Files with missing lines	Coverage Δ
...ckages/mermaid/src/diagrams/sequence/sequenceDb.js	84.84% <100.00%> (+0.47%)	⬆️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	88.79% <100.00%> (+0.09%)	⬆️
packages/mermaid/src/diagrams/sequence/svgDraw.js	89.13% <97.82%> (+0.83%)	⬆️
packages/mermaid/src/utils.ts	61.25% <33.33%> (-0.23%)	⬇️

... and 8 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.

[ibrahimWassouf]

Note*: It seems that git diff goofed a bit for the svgDraw.js file. I think it's best to view it in an editor to see the real difference in the code. In summary, there were two conditional branches that were in both the drawText and drawMarkdownText functions. I simply made them independent functions and called them.

[ibrahimWassouf]

Seems like I'm having issues with conflicts in pnpm.lock. All I'm trying to do is merge develop into this branch. I have never downloaded an extra dependency or changed anything so I'm not really sure how this came about.

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	4ebac5f
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/64ea4b679077af000848173f
😎 Deploy Preview	https://deploy-preview-4725--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.

[nirname]

@ibrahimWassouf Hi! Any updates on this one?

[ibrahimWassouf]

@ibrahimWassouf Hi! Any updates on this one?

Hey! I got busy for a while and left this in this state obviously. In short, I can't think of a way to do this with the sequence diagram as it is (although I will have to check if the code changed significantly since starting). The issue is that strings are cut up into smaller, separate strings and stacked on top of each other. This means that if you had "A string with a a really long emphasis" is could be cut in two between the tags, preventing them from being properly rendered.

The biggest issue I came across was that other elements in the diagram, such as the width of the actors/participant boxes or when the message arrow is rendered, are rendered dynamically based on the size of the message. Thus, creating a singe text label did not work at nicely as I'd hoped.

It all seemed like spaghetti code to me, so I had trouble figuring it out. I started work on migrating the sequence diagram to typescript in hopes of understanding how the whole thing is rendered but didn't have the time to finish that up.

I'll give it my best shot to give this another try, but feel free to unassign me from the ticket if you want to encourage others to give it a try as well!

[knsv-bot]

Hi, and thanks for the effort you put into this PR. As part of some general housekeeping we're going through older draft PRs and closing ones that have been sitting idle for a while: this is purely to keep the queue manageable, not a judgment on the contribution. If you'd like to continue this work, you're very welcome to reopen the PR or open a new one based on current develop: we'll gladly take another look. Really appreciate you taking the time to contribute to Mermaid!