Migrate UML diagram to Mermaid

[ParanoidUser]

Ahoy, @koppor! 👋 Hope you're not weary of these pull requests flood 🙃 In 2022, GitHub introduced support for various diagrams in markdown files. The suggestion is to transition the current UML diagram (plantuml + png) to Mermaid diagram-as-code syntax rendered by GitHub. If you like this idea, we could also consider switching from UML to another diagram type, like a Flowchart. I'd love to hear your thoughts on this.

Class Diagram

classDiagram
  direction TB
  class ADR {
    <<abstract>>
  }
  ADR <|-- MADR
  ADR <|-- YStatement
  ADR <|-- Nygard

Flowchart

graph BT;
    MADR-->ADR;
    YStatement-->ADR;
    Nygard-->ADR;

[koppor]

I know both tools, but did not have time to switch. Thank you for doing it!

Each UML diagram has its intention. A flowchart is more a flow than showing the inheritance relations.

Which aspect do you miss and be displayed as diagram?

[koppor]

Is it possible to hide the class members in MermaidJS? Meaning hide members for MermaidJS?

[ParanoidUser]

Is it possible to hide the class members in MermaidJS? Meaning hide members for MermaidJS?

Unfortunately, it's not currently possible to hide class members in MermaidJS. This feature request has been sitting in the backlog, and we're hoping it gets prioritized at some point. Personally, I find that having empty members/methods boxes doesn't look appealing, which is why I've started exploring other diagram types.

[koppor]

Is it possible to hide the class members in MermaidJS? Meaning hide members for MermaidJS? Unfortunately, it's not currently possible to hide class members in MermaidJS. This feature request has been sitting in the backlog, and we're hoping it gets prioritized at some point. Personally, I find that having empty members/methods boxes doesn't look appealing, which is why I've started exploring other diagram types.

For me, the important thing of the diagram is the semantics of inheritance. Thus, there is IMHO no other diagram type. Especially, the arrows should be the inheritance arrows specified by UML.

Empty boxes are perfectly legal in UML class diagrams. See https://stackoverflow.com/a/30381979/873282.

I like them more, because of less visual clutter.

In PlantUML, it is possible to use graphviz directly. Then, one can do tweaks if one wants. I think, this is not possible with MermaidJS.

Maye, we have to wait until https://github.com/mermaid-js/mermaid/issues/3139 is resolved.

[ParanoidUser]

Nice move! I'll touch base with the Mermaid team to find out their progress on the feature.

[koppor]

Nice move! I'll touch base with the Mermaid team to find out their progress on the feature.

Or try to contribute directly :p

[koppor]

I am trying to switch to the Chirpy Jekyll Theme. There, mermaid is said to work. Thus, I am merging it to my brancha of my tests.