Add interactive functionality for Usecase diagrams exported to SVG

[ioplker]

Hi, all! I'm glad to contribute to this amazing tool! You guys are awesome!

With this feature we can navigate through complicated (aka spaghetti) Usecase diagrams by clicking on elements and viewing their neighbors. By element I mean actors, usecases and notes.

1. Generate SVG of Usecase diagram.
2. Open generated SVG in browser (I used Firefox).
3. Wait a bit to JavaScript to finish (a couple of seconds).
4. Profit!

The logic of navigation:

1. When you click on the diagram element all other elements, which aren't connected to the clicked one, are made transparent.
2. When you click the same element twice - all elements are made opaque.

---

P.S.
It's my first contribution to Java project and, honestly, the first written Java code too.
So, if I made something wrong, please let me know :)
In particular, I want to know how to add this JS-script more elegantly (with readability in mind).

And yes, I plan to add this feature to other diagram types - it will use the same JS-script and <g class="..."> technique.

[arnaudroques]

Hi,
Thanks for your contribution, it's a very interesting enhancement.

We need to study your work before merging it.
Before adding this feature to other diagram types, could you wait until we refactor it ?
Thanks !

[ioplker]

Hi,
Thanks for your contribution, it's a very interesting enhancement.

We need to study your work before merging it.
Before adding this feature to other diagram types, could you wait until we refactor it ?
Thanks !

Hi! Yes, sure! Please, let me know how to do it properly :)

Also, yesterday I was doing some tests and figured out one corner-case when JS code fails (so all functionality stops working).
When you link an element (actor, usecase or note) with something not considered as element (e.g. package or rectangle) JS click handler cannot find such an element and throws an error.
Example code:

@startuml
actor user

rectangle "Test rect" as rect {
  user --> (abc)
}

user --> (def)
user --> rect
@enduml

---

... now I noticed you merged with the second commit too (the one that fixes the error I described above). But I made stupid mistake in it in JS (not sure why the error wasn't thrown at that time). So I fixed it just now and force pushed that second commit to my repo.
Did I messed up the git tree? Should I do something so you can merge the fixed version?
Thanks for your reply :)

[arnaudroques]

We've just commit and push a slightly refactored version of your work.

There is now a default.css and default.js files that contain your contribution. This will make updating those files more easy.

We may have broken something (sorry about that...) , because the following example is not working for us:

@startuml
actor user

user --> (abc)
user --> (def)
@enduml

Could you checkout the last version of the code and see what's happen ?
You will probably have to propose a new MR.

Thanks again for your contribution !

[emonidi]

I think that this is a very good idea but implementation could be much better. Now from what I can see there are propriatary classes/id/attributes generated in the svg and then a hard coded script to give exactly the functionality which the author or the MR is looking for. I believe that this way of development of interactive functionality will not bring a good future for PlantUML (to be honest I am really considering to switching to mermaid at this point for my project.) What I believe it should be done is that first of all every graphical element should be surounded with its own group tag. For example:
A->B: My message

should be represented as:
<g codeLine="1"> <line/> <arrow/> <text/> </g>
After that the user should be able to add their own script to ther generated svg as a command parameter like -interactive-js-path /my/cool/script.js or as a pragma !pragma interactiveJsPath /path/to/my/script.js

This will be enough to create a tool for great svg interactivity. Unfortunatelly I am not a Java developer and it will take me enormous time and efford to start contributing to the code which at the moment I can not afford, but I would be very very happy to see this implemented.

[koppor]

For the googlers landing here, in PR #930 a pragma functionality to enable this feature was introduced. Just add following line below @startuml:

!pragma svginteractive true

[jankap]

@koppor very nice, but the exported SVG (using Plantuml 1.2023.13) remains unresponsively when opened in Edge. Do I have to render it somehow special?
Thanks!

[koppor]

@jankap I have no clue about PlantUML diagrams and Edge. I would re-route you to https://forum.plantuml.net/. You need to make an MWE and execute plantuml on the command line. The command should be readble from the files in this repository - or googlable 😅. Sorry that I don't have better news. (I am currently not using PlantUML and this at all - therefore, there are delays in fixing and releasing 😅)

[var23rav]

Does the interactive svg works for all type of elements. I can see with component i can interact with diagram but not with state !!

If I replace all my state element as component it works.