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

[DaleMoody]

+1

[jjspace]

Respectfully please stop posting comments that are only "+1" or ":+1:". I'm not one of the maintainers here so I can't enforce it but it's increasingly frustrating to see notifications for this issue getting my hopes up that something happened only to see it's yet another person commenting with zero added benefit. Please be respectful of others who are following this issue. These comments only clutter the issue thread and create extra noise for everyone involved.

If you don't have anything productive to add towards completion of this issue please just go react 👍 to the first post, hit "subscribe" on the right if you want notifications, and wait like the rest of us.

isaacs/github#9 isaacs/github#640 isaacs/github#968

Edit: If you are one of the common maintainers/contributors to this project I would strongly urge this issue get looked at soon. It's currently the most upvoted issue on the repo and is 3 years old. It's clear there's some strong desire here

[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