Add Plantuml variant (re #166)

[VladimirAlexiev]

Reopens #166: by using better technology (PlantUML) we can improve the diagram a lot more easily, and make new diagrams.
IMHO the PlantUML code is more readable than the textual diagram,
and it produces real arrows (doesn't depend on the Class-Diagram-Arrows.png kluge)

• added link NodeShape->PropertyShape
• broke the long text to 2 lines
• shown PropertyGroup
• added sh:order to PropertyShape and PropertyGroup

These are minor fixes, but the point is that with PlantUML we can maintain more easily, add more diagrams (eg Node Expressions), and make more kinds of diagrams.

See SVG diagram rendered at plantuml server

• Try out the links: they work and are relative
  • There's skinparam topurl https://raw.githack.com/w3c/data-shapes/master/shacl12-core/index.html in the .puml file but we should try to leave it out and see whether the links use as base the HTML URL (good) or the SVG URL (bad)
• There's a Makefile that produces SVG using a local plantuml installation
• We want to use a local installation instead of the plantuml server because the build shouldn't depend on an external server
  • (regression) rendering problems with SVG class diagram with links plantuml/plantuml#2289 and because of this rendering problem
• class label should support creole link rendering plantuml/plantuml#2290 There's was no blue underline on the class name (Update: added with tags <color:blue> and <u>). Note the whole node is clickable and goes to the class definition

If you agree, I can:

• replace the textual diagram in the HTML with <img> tag
• remove Class-Diagram-Arrows.png

Please check all links for accuracy!

[VladimirAlexiev]

@YoucTagh Thanks for your close reading!!!!
Now do you agree with the next steps:

• replace the textual diagram in the HTML with <img> tag
• Check how the links behave when embedded in HTML
• remove Class-Diagram-Arrows.png

[TallTed]

As I noted in #166 —

Assuming that the diagram we finalize on does not include all features, it should include some ... or etc. or similar arrows/boxes/line-items — so it's clear that we're not showing everything in the diagram (which I think is entirely reasonable, even with automatic tooling, given the large number of features involved).

Also, note that Accessibility review will demand textual description of each diagram, usable with screen readers and other assistive technologies. So it's in our best interest to avoid overly complex diagrams, even if they're easily produced.

[VladimirAlexiev]

@TallTed @YoucTagh I added a few more changes, can you please recheck?

• But don't yet merge, I'm trying to figure out how to enact the links
• The links at https://raw.githubusercontent.com/VladimirAlexiev/data-shapes/refs/heads/issue-166-plantuml/shacl12-core/images/SHACL-UML.svg are active, though lead to the SVG itself, since I commented out
  skinparam topurl https://raw.githack.com/w3c/data-shapes/master/shacl12-core/index.html
• The links don't work from inside the HTML https://raw.githack.com/VladimirAlexiev/data-shapes/refs/heads/issue-166-plantuml/shacl12-core/index.html#constraints-section :-(

[YoucTagh]

Thank you, the content is good for me. I won't merge it; maybe we can figure out how to make the links work.

[VladimirAlexiev]

@YoucTagh the links work now: https://raw.githack.com/VladimirAlexiev/data-shapes/refs/heads/issue-166-plantuml/shacl12-core/index.html#constraints-section.

@TallTed I can't yet add an accessibility description (<svg desc=) because plantuml/plantuml#2292.
Hopefully PlantUML will add such feature soon!

[TallTed]

Much improved. There's always more, but this is a big step forward.

[YoucTagh]

@VladimirAlexiev Can we merge this PR?

[VladimirAlexiev]

@YoucTagh yes, but the end of index.html should be like this (related to #486)

	<script type="text/javascript">

    // Load and inline SVG diagrams for clickable links
    // TODO: add <svg desc> for accessibility
    function svgInline(svg) {
      fetch('images/'+svg)
        .then(response => response.text())
        .then(svgText => {
          const container = document.getElementById(svg);
          container.innerHTML = svgText;
        })};

    svgInline('SHACL-UML.svg');
    svgInline('ValidationReport-UML.svg');
		
	</script>

[YoucTagh]

@VladimirAlexiev, ok, thank you.

Once #487 is merged, we will update index.html and then merge it.

[VladimirAlexiev]

@YoucTagh I've added a few of the new features: core-components-list (3 fields), sh:targetWhere, sh:codeIdentifier:
https://raw.githack.com/VladimirAlexiev/data-shapes/issue-166-plantuml/shacl12-core/index.html#constraints-section

(note: I put back the link to PropertyGroup and it shows ok on
https://github.com/VladimirAlexiev/data-shapes/blob/issue-166-plantuml/shacl12-core/images/SHACL-UML.svg
but for some reason doesn't show on the preview link: I suspect a caching issue)

I tried this variant with extra links to NodeShape but I think the diagram gets too busy, so I omitted them (they are listed as fields)

[afs]

Same concern as #483 (comment)