Add support for markdown-style links

[ryanwjackson]

📑 Summary

Add support for markdown-style links on line messages and notes

Resolves #1279

📏 Design Decisions

This currently only affects line messages and notes on sequence diagrams

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

🦋 Changeset detected

Latest commit: ba259a0

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	ba259a0
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67cf30858cca380007d49451
😎 Deploy Preview	https://deploy-preview-6158--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.

[pkg-pr-new]

Open in Stackblitz

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

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

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

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

commit: ba259a0

[codecov]

Codecov Report

Attention: Patch coverage is 5.47945% with 69 lines in your changes missing coverage. Please review.

Project coverage is 3.88%. Comparing base (df636c6) to head (ba259a0).
Report is 264 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	63 Missing ⚠️
packages/mermaid/src/diagrams/sequence/styles.js	0.00%	3 Missing ⚠️
packages/mermaid/src/diagrams/common/common.ts	60.00%	2 Missing ⚠️
packages/mermaid/src/utils.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6158      +/-   ##
==========================================
- Coverage     4.48%   3.88%   -0.60%     
==========================================
  Files          383     399      +16     
  Lines        54038   42121   -11917     
  Branches       596     638      +42     
==========================================
- Hits          2425    1638     -787     
+ Misses       51613   40483   -11130     

Flag	Coverage Δ
unit	3.88% <5.47%> (-0.60%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/utils.ts	18.08% <50.00%> (-23.91%)	⬇️
packages/mermaid/src/diagrams/common/common.ts	33.18% <60.00%> (-19.84%)	⬇️
packages/mermaid/src/diagrams/sequence/styles.js	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00% <0.00%> (ø)

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

[bernhardkaindl]

Works great in the preview!!!

@ryanwjackson, the link in

"Look at MermaidJS"

appears to be slightly below the "Look at" at the preview link above for me.
Do you know if this is expected or can be fixed?

[ryanwjackson]

@bernhardkaindl do you have an image of it? I see it as vertically aligned. The underline of the linked text is underneath, but the top and bottom of the text lines up for me. Let me know if I'm missing something.

[DanielSmithGK]

Hi @ryanwjackson thanks a bunch for implementing!

I've tested in the preview (thanks @bernhardkaindl for pointing this out). And links on arrow messages are working, the alignment also seems as expected (using latest Edge).

M -->> C: [Test URL](https://www.google.com)

The note link also basically works when it's a "simple" URL:

note over M: [Note link](https://mermaid.js.org/intro/syntax-reference.html)

However, I've noticed two things:

1. As soon as I introduce an anchor inside a URL, it reverts from interpreting the URL as a link back to regular text, e.g.
   note over M: [Note link](https://mermaid.js.org/intro/syntax-reference.html#configuration)
   
   
   

2. When you look at the simple URL case, the displayed text / link title is very short, however, the note box seems as wide as the URL is long and gets wider the more characters are in the URL (this seemingly doesn't happen with arrow messages).
   Example for: note over M: [Note link](https://mermaid.js.org/intro/syntax-reference.html)
   
   
   
   Example for: note over M: [Note link](https://mermaid.js.org/intro/syntax-reference.htmlAAAAAAAAAAAAAAAAAAAAAAA)
   
   
   
   It'd be great if only the necessary displayed text / link title is deciding the note width.

Thanks and regards!
Daniel

EDIT:
The anchor issue with reverting to text is also true for arrow messages, just checked again:
M -->> C: [Test URL](https://mermaid.js.org/intro/syntax-reference.html#configuration)

[fornax-a]

1. As soon as I introduce an anchor inside a URL, it reverts from interpreting the URL as a link back to regular text, e.g.
   note over M: [Note link](https://mermaid.js.org/intro/syntax-reference.html#configuration)
   
   ....

EDIT: The anchor issue with reverting to text is also true for arrow messages, just checked again: M -->> C: [Test URL](https://mermaid.js.org/intro/syntax-reference.html#configuration)

Hi @DanielSmithGK - Encoding the # seems to resolve this problem, though not terribly intuitive for users it might be an acceptable workaround.

M -->> C: [Test URL](https://mermaid.js.org/intro/syntax-reference.html%23configuration)

[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, 1 added	Mar 10, 2025, 6:44 PM

[ryanwjackson]

I made some updates to address those issues. Let me know if that resolves them.