Style class diagram elements based on stereotype annotations like <<abstract>>, <<interface>>, etc.

[NourBenz]

Proposal

Mermaid.js should add support for automatic visual styling of class diagram elements when stereotype annotations are used.

Currently, these annotations only appear as plain text inside the class block. But they could provide much more value by being interpreted visually (just like in traditional UML tools).

This would:

• Improve readability in large diagrams

• Make the roles of classes visually distinct

• Align with UML best practices

• Provide accessibility value (e.g., color/weight cues for visually scanning diagrams)

Example

Maybe we should aim for the kind of visual where :

classDiagram
class Shape {
    <<abstract>>
    noOfVertices
    draw()
}
class Drawable {
    <<interface>>
    draw()
}
class Color {
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}
class Circle

Would have :

• Shape name is rendered in italic because it's abstract

• Drawable name is rendered in bold to indicate it's an interface

• Color is underlined to show it's for enum items

• Circle is styled normally as a standard class

Screenshots

Current visual :

Mockup :