Using Sequence Diagram is there any way to make some parts of the text in bold?

[bundgaard]

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!

[GiovanH]

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:

mermaid/src/diagrams/sequence/svgDraw.js

Line 21 in e08ae8e

export const drawText = function(elem, textData) {

[pierreverbakel]

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.

[alexfornuto]

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.

[MichaelTiemannOSC]

I'm not surprised that HTML tags don't work, but am surprised that markdown inside graph labels doesn't work.

[LuisBL]

any answer on this ?

[ggriffinn]

ping

[avdata99]

pong

[DonSmilo]

This is very unfortunate

[vzakharov]

just adding mine to the voices

[morscher-m]

Same here

[DavidAntliff]

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)

[klausk-vipaso]

Same here. Also would be interested in having the possibility to declare code text within messages as @DavidAntliff suggested.

[pseidemann]

hi @jgreywolf,
any chance this can get promoted to Type: Enhancement?

[LuisBL]

yes please promote

[jgreywolf]

Done. Will also research a bit why support ended

[luftlight]

I've recently found success through enabling htmlLabels, something like %%{ init: {'theme': 'dark', "graph": {"htmlLabels": true}} }%%

[jxu]

Interestingly <b> tags appear to work for flowcharts, at least within nodes with text. Or using markdown strings

[ckhiu]

I would also like this feature

[ckhiu]

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

[IainDavis]

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.

[mohitpandey92]

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)

[heindel]

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 6ffe9c8

[mantriyogesh]

This would be helpful in sequence diagram.