search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.05k stars 6.22k forks source link

Seeking Advice on Mermaid Styling for Hyperlinks #2870

Open ChristopherA opened 2 years ago

ChristopherA commented 2 years ago

I'm in the process of collecting and documenting some Mermaid examples in a gist before I propose we standardize on them for documentation in my various communities.

Currently, the Github version of Mermaid (inside their Github-Flavored Markdown renderer) doesn't seem to support any indication that a Mermaid label can have a hyperlink (and they don't seem to support your tooltips hints at all). I've tried adding some extended ASCII (see #2869) to the labels such as the dagger † symbol, and that causes Mermaid to error out. (See my test example at #flowchart-with-hyperlinks.)

It isn't this community's responsibility to fix GitHub's deployment of your functionality, but I am seeking advice on how to possibly work around their bugs. Maybe some way of using the Mermaid styling capability to mark hyperlinked labels as being clickable (underlines? color?). I'm sure that someone has run into this before and has advice.

ChristopherA commented 2 years ago

I found a partial solution to my problem which is to use quotes and HTML entities in labels to get special characters into the labels. (see https://github.com/mermaid-js/mermaid/issues/2869#issuecomment-1081536477 )

However, I'm still looking for advice on how best to theme an underline for labels with hyperlinks, or other best practices or ideas.

MarcelMue commented 1 year ago

I have experienced the same issue. Styling can be done for a node for example with:

style C color:blue

But this does not seem to work for text-decoration :

style C color:blue,text-decoration:underline

Color is still blue, but no underline in any text.

ssbarnea commented 2 months ago

In fact I ended here trying to find a way to hide the underline that mermaid is adding to the nodes that have an URL, so I can make the rendering more consistent between github rendering and mkdocs based rendering.