[classDef] Suggestion: extend classDef with default shape

[mvandermade]

Is your feature request related to a problem? Please describe.
I'm frustrated when I use a class (for example ":::redis" which gives it a red colour) I need to manually shape each node. Example:

graph TD
  classDef redis fill:#FF0000;
  database1[(database1)]:::redis

Describe the solution you'd like
To simplify using a syntax where the classDef also contains the shape

graph TD
  classDef [(redis)] fill:#FF0000;
  database1:::redis

Describe alternatives you've considered
Copy paste a lot

Additional context

to:

[knsv]

It sounds like you are looking for the class statement:

graph TD
  classDef redis fill:#FF0000;
  database1[(database1)]
  a --> b
  class a,b,database1 redis

With it you can apply a class to a list of nodes as in the example above.

[mvandermade]

The class statement is indeed helpful to know, thanks !

Is there also a way to apply shapes to an array of objects ?

I didn't see a way to do that using classDef.

So I can achieve the following:

https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgY2xhc3NEZWYgcmVkaXMgZmlsbDojRkYwMDAwO1xuICBkYXRhYmFzZTFbKGRhdGFiYXNlMSldXG4gIGFbKGEpXVxuICBiWyhiKV1cbiAgYSAtLT4gYlxuICBjbGFzcyBhLGIsZGF0YWJhc2UxIHJlZGlzIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0

But then without writing a[(a)] and b[(b)] but only a and b.

It is a minor typing effort, but for managing large graphs (and when combining smaller graphs together in one big graph) it helps a lot.

[sbarzowski]

Being able to specify shape in classDef would be really helpful – it would allow specifying semantic classes of nodes and styling them separately. This would be very useful when aiming for a consistent "language" across multiple diagrams.

[GDFaber]

I have not given this much thought by now, but this could be done by adding a new attribute shape to classDef as well as style which can also be used to apply styles to nodes. But it should use words as a value, not things like shape:[()] but shape:database. What do you think?

[sbarzowski]

IMO words would be a little bit more readable in this context.

[mvandermade]

Yeah I think it is a good way to start! Maybe the bracket notation is more difficult to write in this syntax.

Would this be how to do it ? :

[GDFaber]

Just like that, but with a separator: classDef redis fill:#FF0000,shape:database
The other option would be style database1 fill:#FF0000,shape:database
I think it would then be possible to change the default node shape as well by style default fill:#FF0000,shape:database.

[jgreywolf]

As long as we dont use the : character, yes that would work ok. Otherwise it conflicts with the LABEL definition.

That is the problem I have been running into with setting up style support

[GDFaber]

I think using : should be no problem here as it already is part of the style definition, but I'll have an eye on that.

[mvandermade]

The only drawing program I used (POVRay) also used comma's in their shape definition.
http://www.povray.org/documentation/3.7.0/t2_2.html#t2_2_2 "2.2.2.3 Cylinder Object"

Comma separation seems to make sense to me !

[jgreywolf]

@GDFaber FYI, this is at least somewhat related to #1181 which I have started looking at again. Let's sync up :)

[jgreywolf]

Please disregard all of my comments above. As I was laying down to go to sleep last might I realized that this is all talking about css class definition for flowcharts... and not the css class definition for Class Diagrams, which is what I had read it as :)

[mvandermade]

Still could be useful to sync up anyways :)

[GDFaber]

On second thought, I think we should implement this only as an option for the style variant, not for classDef, because as you say class definitions are for CSS while we apply the style definitions directly to the nodes in the flowchart renderer. I think it feels wrong to add this to the class definition for this reason.

[sbarzowski]

Hmmm... how is style different from classDef in this aspect? IIUC both are currently using CSS attributes directly to style a node (style is used inline and classDef is used to define a class).

And from the user's perspective, if it's only available for style t's possible to have one default shape, but it's impossible to define a few kinds of nodes with their shape, color etc. Let's say someone wants to have red Redis databases, blue Postgres databases and yellow circles for web servers in their diagram. It would be nice if they could declare these 3 kinds of nodes somehow and use them semantically

[mvandermade]

FYI:
Perhaps also benefiting from this style-def is this discussion: #1227.
Instead of creating a new diagram type. I can imagine the styling of a class would also a step in the right direction.

[ccoVeille]

Hi everyone,

I'm facing the exact same issue reported by @mvandermade 4 years ago.

This ticket describes pretty well my need.

Be able to assign a shape via a class

The ticket is pretty old. I'm curious if there were improvements in the syntax in the last years.

I've read the documentation and I found nothing about it. Did I miss something?

Thanks

[bkfunk]

I agree; having a way to apply a semantic class name to each node, and then have the styling done separately in a classDef, would be really nice. To me, the shape is part of the UI, vs. the underlying structure; the class is part of the structure of the diagram, but, especially in a flowchart where things can get pretty abstract, wanting to change leaf nodes from a rectangle to a circle feels like styling to me.

[whsv26]

i would like to use :::KafkaTopic to apply rotated database shape