guyellis commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

codewicked commented 2 years ago

+1 on adding links to notes and messages

mwlang commented 2 years ago

+1 -- this would be really useful

krzysztofwysocki commented 1 year ago

+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 commented 1 year ago

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

davenforce commented 1 year ago

I would also love this.

gfranxman commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 10 months ago

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

TrentBrown commented 7 months ago

+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 commented 6 months ago

+1!

krzysztofwysocki commented 5 months ago

+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 commented 5 months ago

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>```

mermaid-js / mermaid

sequenceDiagram Links #1279

sequenceDiagram Links