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 24, 2017 by Fuhrmanator (1,520 points)
I'd like to use this for Class diagrams, as I think it would be possible to make "smart" editor that involves gestures. For example, given a simple diagram with class A and class B, one could create an association between them by swiping (drawing a line) from A to B in the SVG (canvas). For this to work, it would be necessary to map the <rect> that is class A to its name in the PlantUML source. You could provide (probably) features to add/edit/remove classes and associations in this manner. The "smart editor" would update the PlantUML source, and re-render it in SVG. For an association, you could pop up a "smart editor" that shows all the options, so that newbies with PlantUML wouldn't need to spend time searching the documentation for the syntax. This is almost feasible for classes, since there's a SVG comment <!-- class A --> I think, but I couldn't find identification in the SVG for associations. I would think it would be best to have the same identification as in the PlantUML source, e.g., if I defined `class "Something" as S` then the `S` would be its identifier. For associations, it might be necessary to use a number for when there are multiple associations? E.g., (A-B)1 and (A-B)2 to identify two different associations between A and B. This would require a lot of experimentation, so maybe a fork would be best?
commented Apr 25, 2017 by plantuml (235,420 points)
A smart editor     involving gesture sounds like a great idea!
Here is a new beta

- class and links have now an ID in SVG output
- there is also a SVG comment just before the path/link

Tell us if you need more!
commented Apr 25, 2017 by Fuhrmanator (1,520 points)
It needs to be a .war for me to test this on localhost (or will this beta wind up on
commented Apr 25, 2017 by Fuhrmanator (1,520 points)
I managed to copy it into the .war for me to test this on localhost (it's working now in my Windows 10 with Jetty with much hacking). Will this beta wind up on
commented Apr 25, 2017 by plantuml (235,420 points)
If you are in a hurry, we can deploy the beta on
However, a new release is planned tomorrow with this code and will be deployed on So if you could wait few days, it would mean less work on our side.
In the mean time, it would nice if you could check if the modifications sounds ok to you.
commented Apr 25, 2017 by Fuhrmanator (1,520 points)
A few days is very fast (I have the local version to play with until then)! I was asking because I had mentioned a fork to experiment with. I'm always super happy with the quick response time on suggestions!
commented Apr 27, 2017 by Fuhrmanator (1,520 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,520 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 (235,420 points)
I am wondering if hyperlink could be a solution.

Could the gesture editor detect such links ?
commented Apr 28, 2017 by Fuhrmanator (1,520 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,520 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!