Improvement of the UML class diagram display

[ExarcaFidalgo]

In its current state, the UML class diagram displayed as SVG in the ShEx>UML conversion becomes a chaotic tangle of arrows when processing a certain number of shapes with plenty of relations.

It would be of great help to the user to offer a way to navigate/display this info in a more selective, clear method. This is in no way a trivial matter and thus will require some time to prepare.

A couple of approaches have been briefly commented.

• Allowing the user to move and relocate the elements of the diagram to his will. Seems quite complicated... I'll see if there's anything that eases this possibility, but I don't hope for much with the current implementation. Also, with the number of elements that the troublesome diagrams possess, it doesn't really lessen the amount of work required for the user to clarify the information.
• Select a "main" shape and its inmediate neighbours on demand. This one seems more feasible, as well as it's a better option for the user, I'd say. I'll try around and see where it takes me...

[ExarcaFidalgo]

https://github.com/weso/shumlex/issues/20#issuecomment-760131860

For starters, there were some problems with the usage of symbols (".", ":", "/", "<"...) and Mermaid, which was unable to process any of them. The original solution involved the codification of such symbols: therefore, the following Shape:

:User {
    :name xsd:string;
    :age xsd:int ?;
    :gender [:Male :Female];
    :knows @:User ;
    :worksFor @:Company ;
    :buys @<Product> {1,10};
}

Would be transformed to:

class ___dp___User {
___dp___User : ___dp___name "xsd___dp___string\\" 
___dp___User : ___dp___age "xsd___dp___int\\" 
}
___dp___User -->  ___dp___User : ___dp___knows
___dp___User -->  ___dp___Company : ___dp___worksFor
___dp___User --> " {1,10}" ___anga___Product___angc___ : ___dp___buys
___dp___User <|-- ___dp___Ultrauser
___dp___Titanuser *--  _Blank1 : AND
___dp___User <|-- ___dp___Titanuser

After creating the diagram, the terms would return to their original state by a search and replace method, looking for the codes. However, whereas this makes the symbols usable, the UML boxes would remain unnaturally wide, due to the trimming of the terms. There was some work behind the scenes to adjust the texts, but it was noticeable that something was off.

It became clear to me that this was not the chosen path when I played around with patient.shex, which possessed things like: <http://hl7.org/fhirpath/System.String>; It transformed into this horrific monstruosity from the plains of Oblivion. ___anga___http___dp______bar______bar___hl7___dp___org___bar___fhirpath__bar___System___pt___String___angc___ Truly a sight to behold. Obviously, the resulting class was insulting.

So, I have made an strategic, unprecedented move such as using my cognitive abilities. Now we replace every symbol with "_" (the single one accepted) so that the length remains unbothered. We save the original value in a Map, with the sanitized value as key. Therefore, after generating the diagram, we just look in the Map for the original terms. Nice and clean:

class _User {
_name "xsd_string\\" 
_age "xsd_int\\" 
}
_User -->  _User : _knows
_User -->  _Company : _worksFor
_User --> " {1,10}" _Product_ : _buys
_User <|-- _Ultrauser
_Titanuser *--  _Blank1 : AND
_User <|-- _Titanuser
class _Blank1 {
_titancode "xsd_string\\" 
}

And even with common shapes, the visual upgrade is noticeable. Original vs corrected:

(Yes, there have been changes about the way logical operations work when there is only one shape involved)