id in svg output

+3 votes
asked Feb 17, 2013 in To be sorted by anonymous
Good afteroon;

I was wondering is it possible to give some id=element  to svg output using plantuml when we draw sequence diagrams. Thus, i think there are some parts missing about referencing sequence disgrams becuase when i ask ref system of sequence diagrams in question part  i got more detailed answer than current documentation part.

(for example, in here (link below) we can see linking in sequence diagram but it is not exsist on documentation part)


Regards ,,,,
commented Apr 27, 2017 by Fuhrmanator (1,580 points)
I've played around with the beta. The SVG jQuery plugin is working well for me, and I was able to do the same as the main page (text editor with SVG preview that updates with onkeyup). To easily process gestures, the SVG elements need some better structure. In javascript you can use document.onmousedown to detect on what is being clicked. See - that demo uses a clip path, but I have some other ideas that might require less modification to the SVG from PlantUML. As it stands, using the onmousedown (or similar) approach detects anything in the PlantUML diagram, which is perhaps too much info. E.g. the circle <ellipse> element next to the class name, the class' name <text> element. It's hard to map those elements back to the class element drawn with the <rect>. A simple solution might be to create an invisible <rect> with the same dimensions as the outermost element (like a bounding box) and put the id="A" but make it the "top" element in the Z dimension (I'm not sure if making it transparent will defeat this strategy, however). Actually, using class="" would also be useful, too, to distinguish between UML elements, e.g., associations, classes, etc. For now, I can experiment on some hard-coded SVG to make the gestures work, and suggest how to make PlantUML go from there. Would it be better to discuss this on GitHub?
commented Apr 27, 2017 by Fuhrmanator (1,580 points)
A bounding box approach works -- see the prototype at -- I just repeat the outermost <rect> with a style that has a fill of 0 opacity. It gets all the clicks. I also added a class="" (UML class, bounding box).
commented Apr 28, 2017 by plantuml (257,940 points)
I am wondering if hyperlink could be a solution.

Could the gesture editor detect such links ?
commented Apr 28, 2017 by Fuhrmanator (1,580 points)
Hyperlinks (on my browser in Chrome) appear really huge (much bigger than <rect> in the SVG, but perhaps it's a bug when I zoom?). The touch-based editor should allow modifying links (by tapping them). I'm not sure a hyperlink (which appears always as a rect) would make sense then. I'm pretty sure you could draw an invisble bounding shape that matches an arc in SVG (curved association) and it would be more precise. You could even make the touchable arc thicker (it's invisible anyway) so that touches close to it would match. By the way, I have a slightly better prototype that recognizes touchstart/end and touchmove events with the bounding-box approach. I didn't address associations yet.
commented Apr 29, 2017 by Fuhrmanator (1,580 points)
FYI - this is the SVG equivalent of the main page

1 Answer

+4 votes
answered Jan 30, 2016 by Ryanwhite (140 points)
I would really like to see an id assigned to each item in a diagram, preferably relating to the item's ID in the text. When exporting SVG, the markup can then be manipulated, actions assigned etc, which could make diagrams interactive.


THAT would be cool!