-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom css classes for classDiagram nodes #1181
Comments
For class diagrams the only way to modify the styling is via the steps outlined in documentation here: http://mermaid-js.github.io/mermaid/#/classDiagram?id=styling Right now it is not possible to set custom styles for specific/discrete class diagram entities. This is possible for other diagrams, and that functionality could be ported over from somewhere like how flowchart diagram handles this |
I am currently working on an implementation for this, using the styling functionality from flowcharts as a base |
I don't know if I'm allowed to add a tip/comment... I'd use attributes. Class diagrams are different than flowcharts. People tend to want to annotate where the class diagrams have changed and where the accents lie. If possible an annotation to the diagram would work really well, for example:
This is just a thought, but it would work well enough and will give you the flexibility you need to annotate anything as a class. I think these annotations, because they are already in the parser due to the "interfaces" could be easily parser. They also do not collide with other syntax. Different ways of annotating might better. The best way ofc would be to use css notation:
Not sure about collisions though... Again, if I'm out of line, please let me know |
Of course you are!
So, the idea being that you could then have something at the end like:
Actually, I think I like the |
The The actual styling can be done at the end of the diagram:
Or in a separate stylesheet of course. |
I'm supporting this feature request, since I also would love to style single elements in Class Diagram separately! I would though argue that it is quite important that styling mechanisms across different Diagrams are consistent. Specially since mermaidjs is useful for automating diagram generations. Having different styling mechanisms depending on Diagram style makes the scripts more complex, as well as that users writing diagrams manually needs to check the doc for each Diagram style. So my five cents goes to reusing style mechanisms from the Flowchart. |
The problem that I have run into with implementing styling is related to the way that members are defined for classes. The use of As you said, I want to keep the implementation the same as it is being used with other diagrams... Ive been on "hiatus" from the project the past month or so to deal with other issues. You know, just some random things going on with family, the world, whatever ;) Im getting ready to start up again, and this is one of the main issues I intend to come back to |
Not sure if this is the spot to mention this, but I've noticed it's tough to write styles in external CSS because of the specificity of the elements. When Example: /* Set the default color of each rectangle */
#mermaid-1586982669110 g.classGroup rect {
fill: var(--color-blue-light);
stroke: var(--color-blue);
}
/* or */
g.classGroup rect {
fill: var(--color-blue-light) !important;
stroke: var(--color-blue) !important;
} Additionally, it's hard to select a specific /* Set the color of the Student class */
g.classGroup[id*=classid-Student-] rect {
fill: var(--color-purple-light) !important;
stroke: var(--color-purple) !important;
} Recommendation: For the second, unless there's a reason I'm missing for appending a number to the |
@TheSonOfThomp your suggestion would indeed solve a lot of difficulty finding the right node. It would not solve the usecase where you'd specifically wanted to add a class to a node. For example: I use these diagrams to indicate where the changes are in my solution design. For added classes I use red, for changed classes I use orange. These correspond with the statuses |
Hi, I'm trying to create bigger models and want to have different colored elements for different types of nodes in my class diagram.
For example, in the next image I would like the
Student
to be colored orange.In order to do this I'd like to add a custom css class to my model and style the svg accordingly. Is this possible?
If not, the
<<something>>
notation seems a perfect way of adding a classifier to the resulting SVG.The text was updated successfully, but these errors were encountered: