Generic types in UML class diagram

[aubertc]

There is an issue discussed at mermaid-js/mermaid-cli#112 (comment) that affects e.g. this diagram:

princomp.github.io/source/uml/cla/Shape.txt

Lines 12 to 15 in 2871697

	class IComparable~Shape~{
	<<Interface>>
	+CompareTo(arg : Shape) int*
	}

except that for some reason, the generic type is not just displayed (not even improperly formatted, just not displayed):

https://princomp.github.io/lectures/oop/interface#a-more-complicated-example

[whmarsh87]

I am not fully sure I am following what this is being used for:

One thing I did notice looking at the mermaid docs is we are using "flowchart" and not "class" which has its own version of this setting for class diagrams:

[aubertc]

In short, to have the UML class diagram text selectable, it needs to be outputted as a svg with this option on.

I'm not sure it's the best way of doing it, but it works (somewhat, e.g., we still have the issue described at mermaid-js/mermaid-cli#112 (comment) ).

[whmarsh87]

The part that confuses me is that Mermaid has Class Diagrams: https://mermaid.js.org/syntax/classDiagram.html and Flowcharts: https://mermaid.js.org/syntax/flowchart.html as two separate objects. The "flowchart" "htmlLabels" is being set to false, but the diagram in question is a Class Diagram.

One of three things is going on:

1. We need "htmlLabels" set to false for a Flowchart, but it's effecting the Class Diagram display somehow. In which case, despite being a default value, explicitly setting "htmlLabel" to true for Class Diagrams might resolve the issue. It would be odd for an optional value for a different object affect the class object, but sometimes weird things happen depending how they set up the internal code. An explicit declaration might fix it.
2. We need "htmlLabels" set to false for the Class Diagrams (which I think is the case). I am not sure how setting it to false for the Flowcharts would affect Class Diagrams as they are different objects within Mermaid. It's still odd that doing this has any affect on the Class Diagrams, but we should adjust the "class" settings (or possibly "classDiagram" as I've seen both at various places on their site) and not the "flowchart" if we are trying to adjust Class Diagram display behaviors.
3. I am completely misunderstanding the Mermaid Documentation, and, despite being presented as different objects as far as I can tell, there is overlap between them and a reason, that I am overlooking, on why we are explicitly changing the "flowchart" and not "class" ("classDiagram") HTML label behavior when trying to change how the Class Diagrams display.

[whmarsh87]

or to sum up the question in code:

[whmarsh87]

Additionally,

Though, I would still be confused as to why specifically "flowchart" settings would have anything to do with Class Diagrams per Mermaid's documentation since, within it, they come off as being defined as completely different objects.

[aubertc]

Quick testing:

• setting to classDiagram in .mermaid-config.js on (svg_with_classdiagram.svg) or not having a .mermaid-config.json file (svg_without_config_file.svg) produce the same output,
• setting to flowchart do produce a different file (svg_with_flowchart.svg), where the text is legible.

All files look the same on the preview below, but they have different behavior when opened with Gwenview on my debian, or (more importantly) when inserted into a pdf.

svg_with_classdiagram.svg

svg_with_flowchart.svg

svg_without_config_file.svg

Testing Suite

testing_suite.zip

Rendering

[aubertc]

A minimal test file:

class IComparable~Shape~{
    <<Interface>>
    +CompareTo(arg : Shape) int*
    } 

[aubertc]

I discuss this at mermaid-js/mermaid#6356