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
68.77k stars 6.08k forks source link

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

Open bundgaard opened 3 years ago

bundgaard commented 3 years ago

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:

GiovanH commented 3 years ago

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

pierreverbakel commented 2 years ago

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

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

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

LuisBL commented 1 year ago

any answer on this ?

ggriffinn commented 1 year ago

ping

avdata99 commented 1 year ago

pong

DonSmilo commented 1 year ago

This is very unfortunate

vzakharov commented 1 year ago

just adding mine to the voices

morscher-m commented 1 year ago

Same here

DavidAntliff commented 1 year ago

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

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

pseidemann commented 1 year ago

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

LuisBL commented 1 year ago

yes please promote

jgreywolf commented 1 year ago

Done. Will also research a bit why support ended

luftlight commented 1 year ago

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

jxu commented 1 year ago

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

ckhiu commented 2 months ago

I would also like this feature

ckhiu commented 2 months ago

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

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

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)