Add interactive functionality for Usecase diagrams exported to SVG

Question

Very recently, ioplker submits us a MR that add interactive functionality for Usecase diagrams exported to SVG. See:

• https://github.com/plantuml/plantuml/pull/478
• https://github.com/plantuml/plantuml/pull/475

To quote him :

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

The current logic of navigation:

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

This feature is disabled in V1.2021.2 but is enabled in last beta http://beta.plantuml.net/plantuml.jar

If you want a working demo you can go to http://beta.plantuml.net/interactive.svg and click on  notes/actor/usecase. With last beta, you can generate your own diagrams.

Right now, css and js used are stored in the plantuml.jar file (see folder /svg/ in the .jar file). Today default.css and default.js are used, but we could also make this completely configurable. Adding interactions in SVG can probably be very useful.

So we need PlantUML users feedback about this:

• Is interactive SVG useful at all? (just to be clear)
• Is someone really depend on the old SVG file format? (to find out the default behavior of the SVG exporter)
• What fundamental differences can interactive modes have? (to find out the need to make several of them - if yes, how should we implement switching between them)
• Are there any bugs or feature requests for this first interactive mode? (check-up question for previous one)
• What default behavior do users want? (specific interactive mode or default non-interactive)

Answer 1

Hello all,

Thanks for this enhancement... 

Here are some elements of answer...

1/ Is interactive SVG useful at all? (just to be clear)

Yes, of course...  Remember all the wanted feature on this subject:

1. https://forum.plantuml.net/11650/interactive-diagram
2. https://forum.plantuml.net/11940/model-explorer-navigate-elements-in-generated-svg
3. https://forum.plantuml.net/10437/adding-javascript-to-svg
4. https://forum.plantuml.net/6413/onclick-events-adding-javascript
5. https://forum.plantuml.net/7700/apply-css-style-classes-to-component-and-interfaces
6. https://forum.plantuml.net/9195/provide-ability-state-interfaces-passed-elements-classes
7. https://forum.plantuml.net/10400/svg-elements-with-ids
8. https://forum.plantuml.net/11724/is-it-possible-to-animate-the-sequence-diagram
9. https://forum.plantuml.net/8425/animate-generate-partial-sequence-diagrams-for-powerpoint
10. https://forum.plantuml.net/6687/expandable-notes-in-svg-exported-versions
11. https://forum.plantuml.net/6994/expandable-groups-in-svg-sequence
12. https://forum.plantuml.net/6183/external-stylesheet-with-images-rather-than-inline-styles
13. ...

3/ What fundamental differences can interactive modes have? (to find out the need to make several of them - if yes, how should we implement switching between them)

Why not:

• Animation (oncoming, incoming, follow a certain order,...)
• Select all ancestor, children... or upstream/downstream nodes...
• Select all element of same type (stereotype, shape,...)
• View a cinematic of a message, step by step, element by element, by changing color, appearance,...
• View backup element, alternative path: depending disaster on one selected element...
• ...

4/ What default behavior do users want? (specific interactive mode or default non-interactive)

It depends, no opinion...

5/ Are there any bugs or feature requests for this first interactive mode? (check-up question for previous one)

I go to testing...

Good job, thanks a lot,

Regards,
Th.

Comments

Hello all,

Do other people want to express themselves?

This place is there for you, do not hesitate to express yourself...

Go...

Answer 2

Hi, 

Let me start by saying that this is a great feature! That said, I do not know if it should be a part of PlantUML itself. For me these features seem to be a "layer on top" of PlantUML. 

What I fear is that the numberof use-cases these features will enable, is so large, that it will be almost impossible to maintain. When I think about interaction I ask myself questions along the following lines:

1. are interactions just time-sliced picture? Meaning, regenerate the image after each interaction? Or dynamically manipulate the SVG? 
2. Is the interaction fully client side? What if the interaction changed the "shape" or "layout" of the rendered graph? I don't think you'll want to end up having to have Graphvis and PantUML ported to JavaScript which might be a requirement of going full on interactive...
3. static vs dynamic interaction:
   1. Ids (static)
   2. classes (static + dynamic)
   3. interactions (mouseover, etc) (dynamic)

Is interactive SVG useful at all? (just to be clear)

Yes! Very much so!

Is someone really depend on the old SVG file format? (to find out the default behavior of the SVG exporter)

Probably, but because the current version is "just an image in SVG" this might not be a problem. Still, I'd personally keep the SVG output the way it is and add another mode/behavior.

What fundamental differences can interactive modes have? (to find out the need to make several of them - if yes, how should we implement switching between them)

The fundamental differences lie in the use-cases. This feature has the potential of someone building a complete GUI application in PlantUML+SVG I would not be surprised to eventually see mario cart ported to PlantUML...

What it boils down to is that you'll need to maintain state. State can be maintained in two placed, as part of the SVG though the use of classes, nodes, CDATA etc. Or within the client application rendering the SVG by creating hooks.

State can trigger two types of manipulation:

1. Graph functions (like nearest neighbors)
2. Full re-rendering
3. State manipulation
   1. classes
   2. ids
   3. hide, show, animate (which may or may not trigger re-rendering of the graph)
4. Manipulate the image
   1. Draw an extra edge between vertices
   2. Move nodes
   3. Create borders around sets of nodes (sub graphs)
   4. Create a sequence of class changes over time (example: to see how data flows through a component diagram)

final thoughts, I really think that adding interaction is an awesome way to enrich the otherwise static functionality. I would advice to start by generating Ids and classes and add a simple JS library with the basic graph functionality. 

I hope this helps and keep up the super product I use and love it every day!