Welcome to PlantUML Q&A, where you can ask questions and receive answers from other members of the community.

You can also submit new features request and vote for them.

id in svg output

+2 votes
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 ,,,,
asked Feb 17, 2013 by anonymous
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 PlantUML.com 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 http://jsfiddle.net/9EB6x/ - 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?
A bounding box approach works -- see the prototype at http://jsfiddle.net/7u0xn759/1/ -- 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="class.bb" (UML class, bounding box).
I am wondering if hyperlink could be a solution.

Could the gesture editor detect such links ?
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. http://jsfiddle.net/7u0xn759/4/
FYI - this https://jsfiddle.net/fuhrmanator/p6b7ao55/ is the SVG equivalent of the main http://plantuml.com/ page

1 Answer

+1 vote
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!
answered Jan 30, 2016 by Ryanwhite (170 points)
Support This Project Offer 250 Mo! Follow PlantUML on Twitter