mermaid
mermaid copied to clipboard
mermaid-js
Using Sequence Diagram is there any way to make some parts of the text in bold?
First of all, thank you for an amazing product.
I was trying to convert some diagrams from sequencediagram.org to the flavor that is used inside mermaid. I wanted to be able to emphasize/bold some text, either using Markdown or pure HTML, but it seems not to work.
note right of A: <b>BOLD ME</b> <em>EMPHASIZE</em> but not respected as a command.
Help us help you!
You want an answer. Here are some ways to get it quicker:
- Use a clear and concise title.
- Try to pose a clear and concise question.
- Include as much, or as little, code as necessary.
- Don't be shy to give us some screenshots, if it helps!
Currently, I don't think there is a way to do this; messages in sequence diagrams are plain text (with the exception of some keywords), not HTML.
You could mark this as a feature request, or fork the project. Here's a place to start: https://github.com/mermaid-js/mermaid/blob/e08ae8ed4a7ddc1ae2dd851608ffe4d831adac97/src/diagrams/sequence/svgDraw.js#L21
I am 'old' to Mermaid and I am surprised to see that after changing to Mermaid 8.12 things like Bold using <b>The Bold Text </b> (My Text in Bold) and Italics using <i>The Italic Text </i> (My Text in Italics) have stopped working, which was working in Version 7.03 as I am now having to stick using it. Which is a shame What was the reason of the decision to drop the usage of one of the most basic of "HTML 1.x" tags?? Nice to have the possibility to do a feature request, but what is the point if one looses that basic feature in the next version I am asking myself. Forced to stick with the 'old' now.
I am 'new' to Mermaid and came across this while looking to do the same thing. It's disheartening to know that it used to work but doesn't now.
I'm not surprised that HTML tags don't work, but am surprised that markdown inside graph labels doesn't work.
It would be very useful to have mono-formatted text (i.e. back-ticked markdown like this) working throughout mermaid, especially since it's commonly used to document code-related subjects.
(rendering via v9.4.0)
Same here. Also would be interested in having the possibility to declare code text within messages as @DavidAntliff suggested.
I've recently found success through enabling htmlLabels, something like %%{ init: {'theme': 'dark', "graph": {"htmlLabels": true}} }%%
Interestingly <b> tags appear to work for flowcharts, at least within nodes with text. Or using markdown strings
I've recently found success through enabling
htmlLabels, something like%%{ init: {'theme': 'dark', "graph": {"htmlLabels": true}} }%%
is this still working for you? Does not work for me with <b> tags in notes...
I'd like to just add on here that if Mermaid is going to support html in sequence diagrams (or other places), it would be extraordinarily useful to be able to wrap a block of text in a <div/> and set the width with styles, rather than having to litter my text with manual <br/> tags. Keeping the line-breaks up to date while your text is changing is definitely a pain point.
It worked for me while creating bold and italics text within Mermaid diagrams in Notion. Hope this helps
flowchart LR
A-->I(<i>in silico</i> hypothesis generation)
The simple wish is to have the possibility to
- have the messages that are sent between participants not only plain text, but
- contain at least some markdown markup possibilities, like e.g., in nodes of flowcharts.
This idea seems to be around for a while, e.g. here https://github.com/mermaid-js/mermaid/pull/4725/commits/6ffe9c872f617787716be72111bc655e1cd3559c
