Styling components of the sequence diagram

CyborgMaster commented 7 years ago

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

👍

2pl commented 6 years ago

+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 commented 5 years ago

+1 for this

kbatman37 commented 5 years ago

+1

stale[bot] commented 5 years ago

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

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

antoniomolram commented 5 years ago

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

This would be a great addition !!

smadala commented 4 years ago

@Dunning-Kruger Looking forward for this support.

handzlikchris commented 4 years ago

+1

IOrlandoni commented 4 years ago

@handzlikchris We're always welcoming new contributors. If you'd like to help out, feel free to check our "collaborators wanted" issue, read our contribution guidelines, and join us in slack!

riapacheco commented 3 years ago

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

sd597p commented 3 years ago

yes please. Need to differentiate some of the components.

bip91 commented 3 years ago

Yes, another up for this feature ;-)

cristianvasquez commented 3 years ago

+1

Lloydshove commented 3 years ago

+1

Lloydshove commented 3 years ago

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

pe7r commented 3 years ago

+1

Elvis10ten commented 3 years ago

+1

lexis-t commented 3 years ago

+100

wkotlowski commented 3 years ago

A needed feature!

xmatweb3 commented 3 years ago

+1

electriclizard commented 3 years ago

+1

cunla commented 3 years ago

+1

Zyaen commented 2 years ago

+1

PHHENS commented 2 years ago

+1

woozoo73 commented 2 years ago

+1

bogdankoliesnik commented 2 years ago

+1

bulentkucuk commented 2 years ago

+1 I can't rely on mermaid for sequence diagrams without this feature

sethstenzel commented 2 years ago

Agreed with other commenters, this is a needed feature. This is one of the primary things I wish to use Mermaid for and it is so close to filling all my needs. Who can I bribe with Coffee and Chipotle to make this happen? I need participant colors, line colors, arrow colors, and step colors 🙏

Olshansk commented 2 years ago

+1 to all the other +1s, but clearly none of us have the time to invest and implement this ourselves.

If this gets 100 💯 emojis, I'll set up a 🧜‍♀️ DAO so we can fund someone to do it.

prullanferragut commented 2 years ago

Has anybody taken a look about the real work it needs to be done? It took a plunge onto the code and could not fully understand what it is actually different between the sequence diagram and the flowchart that makes one "stylizable" and the other not.

JamWils commented 2 years ago

I might start looking into this as I am trying to use the sequence diagram within something and the styles just don't align. I'm new to this project so it will take a little while to dig through the material.

aadamsx commented 2 years ago

Has there been a PR to add styling to individual elements on a sequence diagram?

JamWils commented 2 years ago

I only got as far as pulling down the code and looking at how it was implemented. It didn't look like a lot of work. I had a major table flip on my life about one week after I posted this message so that is as far as I got. I don't see myself getting to it for a couple months as a best case scenario.

aadamsx commented 2 years ago

Thanks @JamWils the Mermaid story for SD would be perfect with this addition. As you know, on large SD we often need to style different entities or make distictions and callouts to important areas. I think this addition would be amazing.

Maybe if you can give some pointers as to where in the code and what changes need to be made, someone, maybe myself, can pick it up to see how far we get? I'm not an expert in JS, but maybe I can get some traction on this with your help.

aadamsx commented 2 years ago

@JamWils I've downloaded the repo and ran the server. Just trying to see how this works, how to test, add code and see the results etc. I'm looking at the demo directory with the examples for a sequence diagram (sequence.html) but it does not render: Parse error on line 3:\n...n Test a description\t\tpa…SS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'. Can you help me get started or maybe point me to a video on how to start developing for this repo?

Thanks

PackElend commented 2 years ago

+1

jordigarcl commented 2 years ago

+1 !!!!

michalholis commented 2 years ago

+1

JamWils commented 1 year ago

@aadamsx I have actually never contributed to this codebase. I am closing in on needing to make these changes though if no one has tackled them yet. There are a few things I need to take care of in my project before I turn my attention here. I would need to start from ground zero again now that so much time has passed. I believe at a high level that it is really being able to parse the css that is provided and then to simply apply it to the generator. If I remember correctly this is already implemented for other types such as flowcharts and it would just be copying that behavior and applicable tests to the sequence diagram. That is an oversimplification of the approach, but it would be where I would start. :)