Styling components of the sequence diagram

[CyborgMaster]

I would love to be able to style the actor boxes and possibly arrows of the sequence diagram in a similar way that you allow styling the nodes and links of the flowcharts. I believe that a similar (if not identical) syntax should work.

[pchaganti]

👍

[2pl]

+1 for this, styling helps making larger sequence diagrams easier to read.
Lack of styling in mermaid is indeed the only reason I stick to mscgen for sequence diagrams.

As @CyborgMaster suggested, something similar to flowchart styling would be great

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    style Alice fill:#f9f,stroke:#333,stroke-width:4px

[bindulaxminarayan]

+1 for this

[kbatman37]

+1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CyborgMaster]

This seemed to be a popular request, I don't think it should be archived.

[antoniomolram]

I think this issue need to be revisited. The styling is working on Graph TD but not on sequenceDiagram. At least I was not able to figure out how to apply any style on a sequenceDiagram.

Thank you in advance

[rajasekaran2003]

This would be a great addition !!

[smadala]

@dunning-kruger
Looking forward for this support.

[riapacheco]

This would be great -- sequences do require a lot of differentiation!

[sd597p]

yes please. Need to differentiate some of the components.

[bip91]

Yes, another up for this feature ;-)

[cristianvasquez]

+1

[Lloydshove]

+1

[Lloydshove]

Not being able to style to highlight things e.g. "these participants/services are new" is nearly a show stopper for me

[pe7r]

+1

[Elvis10ten]

+1

[sidharthv96]

@jgreywolf are you working on this? If not, we can remove the assignment and open it up for the community.

[rafaell22]

Hey, is anyone working on this one? May I try as my first issue?

[YouXam]

One possible way is to set color manually after rendering:

mermaid.run({
  querySelector: '.mermaid',
  postRenderCallback: () => {
    document.querySelectorAll(".arrowMarkerPath").forEach(item => {
      item.style.fill = "white";
    });
  }
});

[duaneking]

Ran into this today; I wanted to take a state diagram and make some nodes red and others green., to highlight the path a state transition took.

[Cool-PKY]

Anything updates?

[wico-heuschkel]

+1

[zguesmi]

+1

[covapps]

+1

[funnybunnyQAQ]

+10000

[suresh12]

+100

[cdelmas34]

+1

[devinmori]

+1

[KitsanapongRodj]

+1

[swarajban]

+1

[nitaiaharoni1]

+1

[vladpactum]

+1

[dnrahamim]

+1

[Aaron-cdx]

+1

[SvenRelijveld1995]

+1!

[LouDnl]

+1

[kdoubner]

+1

[andrewgohlk]

+1

[tekiegirl]

+1 over 7.5 years after this request was initially opened...
Any idea if this will ever be looked at?

[kyouheicf]

+1

[jgreywolf]

There are these two options currently:
http://mermaid.js.org/syntax/sequenceDiagram.html#background-highlighting
http://mermaid.js.org/syntax/sequenceDiagram.html#styling

If someone would like to take this on, that would be great :)