Color Change of One Element in a Mermaid Sequence Diagram?

Question

I'm using Mermaid to create a sequence diagram in Markdown. I'd like to highlight some of the participants and to gray some of the arrows.

How can that be done?

Answer 1

Take a look at the Mermaid documentation, there is also a paragraph about the styling of individual nodes:

https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

I hope this what you are looking for.

Answer 2

Nowadays, it isn't possible to style sequence diagrams. There is an open issue in their bugtracker. Click the link and vote for it :-)

You can style other types of diagrams, as answered by @lutz-dieckhofer.

Answer 3

It IS possible, but a bit hack-y. This DOES work in https://mermaid.live. Just copy and past this code in.

sequenceDiagram
Fred->>Jill:Hello my Snookums
note over Fred:True Love
Jill->>Fred:Oh my Darling!
note over Jill:True Love Returned

%%{init:{'theme':'forest'}}%%
%%{init:{'themeCSS':'.messageLine0:nth-of-type(2) { stroke: red; };.messageText:nth-of-type(1) { fill: green; font-size: 30px !important;}; g:nth-of-type(3) rect.actor { stroke:blue;fill: pink; }; g:nth-of-type(5) .note { stroke:blue;fill: crimson; };#arrowhead path {stroke: blue; fill:red;};'}}%%
 

The secret is the themeCSS, and the nth-of-type to select particular lines. The next line is also really ugly because they all have to fit within the JSON single value. This is just CSS, but it was a little fiddly getting the particular classes and elements and stuff.

.messageLine0:nth-of-type(2) { stroke: red; };
.messageText:nth-of-type(1) { fill: green; font-size: 30px !important;}
g:nth-of-type(3) rect.actor { stroke:#00f;fill: pink; };
g:nth-of-type(5) .note { stroke:blue;fill: crimson; };
#arrowhead path {stroke: blue; fill:#f00;};

The messages are relatively easy to select the particular line. The notes (.note) and the participants (rect.actor) take a little working with the nth of type numbers right. The arrowheads all have to be the same color. If you edit the code after, you may have to re-align all the colors again.