Jump to content

Topic on Extension talk:Mermaid/Flow

Adding Wiki links in the state text of a stateDiagram-v2 diagram

6
Revansx (talkcontribs)

MW 1.39, Mermaid 3.1.0

I have the following mermaid code:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "[[Alice]]" as myorg
}}

and my hope was that the text "[[Alice]]" would render "Alice" as a wiki link, but it does not.

I would be content to put a full hyperlink in if need be, but sadly there is no reference to adding links in the mermaid state diagram documentation at: https://mermaid.js.org/syntax/stateDiagram.html

Can this be done?

TheDJ (talkcontribs)

> Can this be done?

Not as far as I'm aware.

Bryandamon (talkcontribs)

Links are possible, but only with full URLs, see the following:

graph TD;
    A-->B;
    A-->C;
    B-->D(This is a LINK!);
    C-->D;
    click D "https://www.mediawiki.org/wiki/MediaWiki"
Revansx (talkcontribs)

@Bryandamon - Hi Bryan. Thanks, but that's only for the flowchart (i.e. "graph") mermaid charts. Here I'm asking about the "stateDiagram-v2" diagrams.

Revansx (talkcontribs)

Update

I was able to get links to work by adding an html anchor in the state description. For example:

{{#mermaid: stateDiagram-v2
   state "<a href=https://www.mediawiki.org>Mediawiki</a>" as mediawiki
   state "<a href=Main_Page>Main Page</a>" as main_page
}}

Special care must be given to make sure that the <a> property does not contain any quotes.

Note - The first state (mediawiki) provides a fully qualified external link, the second state (mainpage) is treated by the mermaid extension as a local wiki link to the main page.

w00t!

/Rich

Reply to "Adding Wiki links in the state text of a stateDiagram-v2 diagram"