sequenceDiagram Links #1279

guyellis · 2020-02-26T19:09:19Z

sequenceDiagram Links

In searching through the docs and trying this out it seems that many of the diagrams support both anchor and JS "links." However, I can't find how to add a link to sequenceDiagram. Basically I want a sequenceDiagram to have one or more clickable links to static pages.

Are links already implemented for sequenceDiagram? If so what are the basics and I'll do a PR to add this to the docs?

If links are not part of sequenceDiagrams do you expect this to be difficult to add and if I wanted to PR this in which file would I first poke around to make this change?

Thanks.

guyellis · 2020-02-26T19:15:58Z

A quick look at https://github.com/mermaid-js/mermaid/blob/develop/src/diagrams/sequence/parser/sequenceDiagram.jison and also at https://github.com/mermaid-js/mermaid/blob/develop/src/diagrams/gantt/parser/gantt.jison seems to indicate that the latter has it implemented but not the former.

I think that answers my first question.

What would be the "level of effort" required for somebody who does not have experience with this parsing syntax to implement something like this?

angularsen · 2021-03-25T09:57:18Z

I would love to link from parts of a sequence diagram to source code:

Actor
Message (arrows)
Note
Loop
Alt
Parallel

This way I could add links to file/line number in source code for particular interactions.

Taking it further, hidden notes:

Add a note with markdown syntax to an actor, message etc.
A small indicator shows that a note is available.
Clicking the indicator, or the actor/message itself, would show the note in some popup.

The current Note support is very limited in the visual space it is allowed to take up, at least for sequence diagrams.

Cussa · 2021-05-24T08:08:44Z

Hi, is there any idea if this would be implemented?

codewicked · 2021-12-17T20:38:06Z

+1 on adding links to notes and messages

mwlang · 2022-02-17T04:06:40Z

+1 -- this would be really useful

krzysztofwysocki · 2023-01-23T22:26:41Z

+1 this would be useful and consistent with other types of diagrams.
Possible syntax would be for example adding this at the end of diagram:

class A,B internal-link;

jgreywolf · 2023-02-10T22:50:01Z

If possible the syntax should be the same as it is in other diagrams. I will look into this over the weekend

davenforce · 2023-03-03T19:44:05Z

I would also love this.

gfranxman · 2023-03-27T14:08:20Z

This would be super useful. I don't know about everyone else, but I use sequence diagrams for describing what happened for failure analysis, and would like to be able to link to supporting evidence. Things like logs, run books, source code, etc. If not on the messages, then maybe the activations.

dagadbm · 2023-06-01T17:30:37Z

this could also be useful to separate and hide complexity in diagrams something like

 A->>B: complexOperation

and then clicking it would show anchor to the corresponding complexOperation diagram.

oaxlin · 2023-06-06T22:24:42Z

I would love this as well. But mostly so I can link from one diagram to another.

Basically having a larger overarching diagram that links to a smaller diagram. Especially if that smaller diagram is used in many places.

kamalraghav81 · 2023-09-01T12:34:33Z

Add a small pop-up of the link. Could be linked to a requirement page.

TrentBrown · 2023-12-13T16:53:48Z

+1 for adding links to sequence diagrams. If y'all have any spare cycles, this is a lot of bang for the buck. Takes sequence diagrams to the next level

liamhalemccarty · 2023-12-27T20:53:09Z

+1!

krzysztofwysocki · 2024-02-01T07:40:21Z

+1! truly needed. I plan to link messages to data model elements. Imagine that you can click message and see diagram of linked data structure. That would make sequence diagram part of system design rather than standalone set of pictures.

THONGJI · 2024-02-02T07:26:29Z

Found a way to use hyperlink in the sequence diagram.
Hope there is an elegant way to do this.
Below is the sample code, click on the link and redirect to another diagram:

SD - Get Users (Cloud).html

<html lang="en">
	<head>
		<style>
			.hyplink {
				font-weight: bolder;
				font-style: italic;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<pre class="mermaid">
			sequenceDiagram
				participant APP AS MOBILE APP
				participant BFF AS BFF
				participant SRC AS SOURCE SYSTEM
				APP->>BFF: GET /users
				BFF->>SRC: <a class="hyplink" href="./SD - Get Users (Source System).html" target="blank">GET /user/list</a>
				SRC-->>BFF: User[] (id, name, identificationNumber)
				BFF-->>BFF: Remove or mask User[] sensitive data
				BFF-->>APP: User[] (maskedName, maskedIdentificationNumber)
		</pre>
		<script type="module">
			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

			// Wait for render
			setTimeout(() => {
				var encodedHtmlEntitiesRegex = /(&lt;|&gt;|&amp;|&#39;|&quot;)/g;
				var elems = document.getElementsByClassName('messageText');
				for (var i = 0; i < elems.length; i++) {
					// Replace encoded values.
					elems[i].innerHTML = elems[i]?.innerHTML?.replace(encodedHtmlEntitiesRegex, 
						tag => ({
							'&amp;': '&',
							'&lt;': '<',
							'&gt;': '>',
							'&#39;': "'",
							'&quot;': '"'
						}[tag]));
				}
			}, 100); // Add more value here if fail to replace encoded value.
		</script>
	</body>
</html>```

SD - Get Users (Source System).html
```<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			.hyplink {
				font-weight: bolder;
				font-style: italic;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<pre class="mermaid">
			sequenceDiagram
				participant ANY AS ANY SYSTEM
				participant SRC AS SOURCE SYSTEM
				participant PGDB AS POSTGRES DB
				ANY->>SRC: GET /user/list
				SRC->>PGDB: SELECT * FROM <a class="hyplink" href="./ERD - PGDB - USER.html" target="blank">USER</a>;
				PGDB-->>SRC: User[] (id, name, identificationNumber)
				SRC-->>ANY: User[] (id, name, identificationNumber)
		</pre>
		<script type="module">
			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

			// Wait for render
			setTimeout(() => {
				var encodedHtmlEntitiesRegex = /(&lt;|&gt;|&amp;|&#39;|&quot;)/g;
				var elems = document.getElementsByClassName('messageText');
				for (var i = 0; i < elems.length; i++) {
					// Replace encoded values.
					elems[i].innerHTML = elems[i]?.innerHTML?.replace(encodedHtmlEntitiesRegex, 
						tag => ({
							'&amp;': '&',
							'&lt;': '<',
							'&gt;': '>',
							'&#39;': "'",
							'&quot;': '"'
						}[tag]));
				}
			}, 100); // Add more value here if fail to replace encoded value.
		</script>
	</body>
</html>```

ERD - PGDB - USER.html
```<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			.hyplink {
				font-weight: bolder;
				font-style: italic;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<pre class="mermaid">
			erDiagram
				USER {
					string id
					string name
					string identificationNumber
				}
		</pre>
		<script type="module">
			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

			// Wait for render
			setTimeout(() => {
				var encodedHtmlEntitiesRegex = /(&lt;|&gt;|&amp;|&#39;|&quot;)/g;
				var elems = document.getElementsByClassName('messageText');
				for (var i = 0; i < elems.length; i++) {
					// Replace encoded values.
					elems[i].innerHTML = elems[i]?.innerHTML?.replace(encodedHtmlEntitiesRegex, 
						tag => ({
							'&amp;': '&',
							'&lt;': '<',
							'&gt;': '>',
							'&#39;': "'",
							'&quot;': '"'
						}[tag]));
				}
			}, 100); // Add more value here if fail to replace encoded value.
		</script>
	</body>
</html>```

awangatsanjel · 2024-08-28T17:36:46Z

Is this feature being worked on? I am looking forward to it.

moddx · 2024-10-10T10:41:19Z

While @THONGJI 's solution works I end up with diagrams that are much too wide, because the width of the lines/rects are calculated with the length of the original content and are then fixed.

I tried to dig through https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/sequence/ to find where the html elements get escaped, but could not find it.
Mermaid allows you to pass a DompurifyConfig straight to DomPurify, but that did not seem to help for sequenceDiagrams either.

I'm thinking of creating a custom SequenceDiagram type that allows html/svg Elements (mostly interested in honestly) in the messageText.

Does anyone know where the html gets escaped/purified?

DanielSmithGK · 2024-12-20T11:52:36Z

Our company goes the markdown way when it comes to documentation, including mermaid diagrams. This feature would greatly help with thinning out procedure descriptions by being able to link directly from the diagram instead of having to add the links below the diagram additionally. This could greatly reduce possible misunderstandings / increase intuitiveness.

While technically @THONGJI's workaround may work, it is nothing that could be used as a widespread alternative that I can suggest to other teams that face the same challenge. Maintaining/updating this way poses an additional challenge. This is simply beyond the intended markdown editing scope for many.

Is there any update on the progress or at least a timeframe when this issue will be tackled? Any help is greatly appreciated.

Thanks and regards
Daniel

ryanwjackson · 2024-12-30T16:42:12Z

I've taken a stab at a solution in PR #6158, which add's markdown-style linking capability to arrow message and note text. One known limitation is that the code is not rendering target="_blank" so that clicks open a new tab/window. I tried to replicate where links are rendered elsewhere, but admittedly I'm not an expert at SVG rendering. So any tips are welcome!

I also may have not done this in the appropriate spots, but I tried to make it reusable in case there's desire to render links in other types of diagrams or parts of sequence diagrams.

guyellis added Contributor needed Type: Other Not an enhancement or a bug labels Feb 26, 2020

github-actions bot added the Status: Triage Needs to be verified, categorized, etc label Feb 26, 2020

jgreywolf added Type: Enhancement New feature or request and removed Type: Other Not an enhancement or a bug labels Feb 2, 2021

jgreywolf self-assigned this Feb 10, 2023

jgreywolf added Status: Approved Is ready to be worked on Graph: Sequence and removed Contributor needed Status: Triage Needs to be verified, categorized, etc labels Mar 7, 2023

This was referenced Dec 6, 2023

An unofficial way making the sequence chart interactive? #919

Closed

Support click and tooltip on sequenceDiagram #2279

Closed

hinzed1127 mentioned this issue Jan 31, 2024

Create data-flow-sequence-diagram.md department-of-veterans-affairs/va.gov-team#73133

Merged

jgreywolf removed their assignment Dec 20, 2024

ryanwjackson linked a pull request Dec 29, 2024 that will close this issue

Add support for markdown-style links #6158

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

sequenceDiagram Links #1279

sequenceDiagram Links #1279

guyellis commented Feb 26, 2020

guyellis commented Feb 26, 2020

angularsen commented Mar 25, 2021

Cussa commented May 24, 2021

codewicked commented Dec 17, 2021

mwlang commented Feb 17, 2022

krzysztofwysocki commented Jan 23, 2023

jgreywolf commented Feb 10, 2023

davenforce commented Mar 3, 2023

gfranxman commented Mar 27, 2023

dagadbm commented Jun 1, 2023

oaxlin commented Jun 6, 2023

kamalraghav81 commented Sep 1, 2023

TrentBrown commented Dec 13, 2023

liamhalemccarty commented Dec 27, 2023

krzysztofwysocki commented Feb 1, 2024 •

edited

Loading

THONGJI commented Feb 2, 2024

awangatsanjel commented Aug 28, 2024

moddx commented Oct 10, 2024

DanielSmithGK commented Dec 20, 2024

ryanwjackson commented Dec 30, 2024

sequenceDiagram Links #1279

sequenceDiagram Links #1279

Comments

guyellis commented Feb 26, 2020

sequenceDiagram Links

guyellis commented Feb 26, 2020

angularsen commented Mar 25, 2021

Cussa commented May 24, 2021

codewicked commented Dec 17, 2021

mwlang commented Feb 17, 2022

krzysztofwysocki commented Jan 23, 2023

jgreywolf commented Feb 10, 2023

davenforce commented Mar 3, 2023

gfranxman commented Mar 27, 2023

dagadbm commented Jun 1, 2023

oaxlin commented Jun 6, 2023

kamalraghav81 commented Sep 1, 2023

TrentBrown commented Dec 13, 2023

liamhalemccarty commented Dec 27, 2023

krzysztofwysocki commented Feb 1, 2024 • edited Loading

THONGJI commented Feb 2, 2024

awangatsanjel commented Aug 28, 2024

moddx commented Oct 10, 2024

DanielSmithGK commented Dec 20, 2024

ryanwjackson commented Dec 30, 2024

krzysztofwysocki commented Feb 1, 2024 •

edited

Loading