Web links in generated images, e.g using image maps?

+1 vote
asked Dec 6, 2012 in Wanted features by anonymous
Is it (or can it be in anear future) possible to include hyper text links in actor names, class names, signals etc and generate a corresponding image map with the graphics so as to enable creation of a fully linked, web based documentation? This would greatly improve the possibility to navigate a web published docuemntation using PlantUML generated graphics.

1 Answer

+4 votes
answered Dec 6, 2012 by plantuml (294,960 points)

This is not documented yet, but this is already possible.

We will write some pages about this, but you can use the following working example to get the syntax:

@startuml
participant Bob [[http://www.yahoo.com]]
Bob -> Alice : [[http://www.google.com]] hello
@enduml


@startuml
class Dummy [[http://www.yahoo.com]]
Object <|-- Foo
class Foo {
  [[http://www.google.com]]
  + methods1() [[http://www.yahoo.com/A1{Some explainations about this method}]]
  + methods2() [[http://www.yahoo.com/A2]]
}
 
class Foo2 {
  + methods1() [[http://www.yahoo.com/B1]]
  + methods2() [[http://www.yahoo.com/B2]]
}
 
class Object {
  [[http://www.yahoo.com]]
}
@enduml



@startuml
:Foo:
note left of Foo {
[[http://www.google.com]]
This is a note
}

note right of Foo {
Yet another link to [[http://www.google.com]] as demo.
You can also <u>[[http://www.yahoo.fr specify a text]]</u> for the link.
And even <u>[[http://www.yahoo.fr{This is a tooltip} add a tooltip]]</u> to the link.
}

@enduml



@startuml
Dummy -> Alice : foo1
ref over Alice, Dummy : [[http://www.google.com]] Foo2

Alice -> Bob : hello

ref over Alice, Bob
  [[http://www.google.com]]
  this is a
  reference over
  Alice and Bob
end

@enduml



 

asked Nov 11, 2014 in Wanted features by anonymous Hyperlink in component diagram
commented Dec 12, 2014 by matthiasd (100 points)
I tried to add links on a class and on attributes like this:

class Foo2 [[http://www.yahoo.com/Foo2]] {
  +double x [[http://www.yahoo.com/B1]]
  +double y [[http://www.yahoo.com/B2]]
}

Based on this source plantuml generates SVGs with nested html hyperlinks (B1 and B2 nested within Foo2) which is not allowed by the HTML spec.

Another problem arises if an attribute contains the suffix "[]" for an array:

class Foo2 [[http://www.yahoo.com/Foo2]] {
  +double[] x [[http://www.yahoo.com/B1]]
  +double y [[http://www.yahoo.com/B2]]
}

In this case the hyperlink is created after the attribute and the hyperlink itself appears in the resulting SVG.
commented Dec 14, 2014 by plantuml (294,960 points)
Thanks for the report about [] for an array : this should have been fixed in V8015.

About nested html hyperlinks, did you have any pointer to HTML spec that does not allowed it ? It's hard to find a work around about it.

Thanks again
commented Dec 15, 2014 by matthiasd (100 points)
Thanks for your quick answer! I'll try the V8015 to fix the problem with the array problem.
About nested html links I found this discussion on stackoverflow: http://stackoverflow.com/questions/9882916/are-you-allowed-to-nest-a-link-inside-of-a-link
asked May 13, 2015 in Bug by anonymous svg file shown incomplete in chrome for class diagram
commented Sep 16, 2016 by bravoman (100 points)
Would be awesome if the group (node, package, cloud, frame, folder, database) name (as an visual element) would be the fallback link in case a underlying element has a link, especially for component diagrams.
commented Sep 19, 2016 by plantuml (294,960 points)
Could you post a very basic example ? Thanks!
asked Nov 9, 2016 in Wanted features by poi (1,200 points)
edited Nov 9, 2016 by poi
Can the hotspot areas of tooltips be controlled?
asked Nov 16, 2016 in Bug by poi (1,200 points)
edited Nov 16, 2016 by poi
Hyperlink interferes with visibility
asked Dec 6, 2016 in Bug by poi (1,200 points)
edited Dec 6, 2016 by poi
PlantUML server takes for ever to process [[ long string ]]
commented May 2, 2017 by anonymous
I am using Jquery Integration. However when i am adding link/url then its not working. Below is my example.html file content. Everything is loaded but link is not getting displayed -

<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery_plantuml.js"></script>
<!-- rawdeflate.js is implicity used by jquery_plantuml.js -->
</head><body>

<img uml="
() Actuator3 AS act [[http://google.com]]
[Module8] --> act
">

</body></html>

What I am missing here?
I am using the PlantUML server deployed on my localhost.

Rest all is working as expected but not the link.
please help.

~Nikhil
commented May 2, 2017 by plantuml (294,960 points)
The <img> HTML tag can only display image, and does not manage links.
Unfortunately, there is nothing we can do about that.
Sorry!
A possible way would be to switch to SVG, but I don't think the JQuery integration can handle this (yet).
commented May 2, 2017 by nikhil (520 points)
I got it working.. may b a work around for JQuery and SVG.. see this question's answer http://plantuml.sourceforge.net/qa/?qa=1198/generating-svg-using-the-jquery-library

Thanks to PlantUML :)
commented Jul 2, 2017 by ksmiller99 (100 points)
The examples above a great and very helpful - Thanks!
But the tooltips inside the curly braces are not working for me:
PlantUML version 1.2017.14
W7 Pro 64
MSIE 11

Any suggestions?
commented Sep 19, 2017 by nikhil (520 points)
There is issue with tooltips on IE 11, you can try it out on Chrome or other browsers.
Check http://plantuml.sourceforge.net/qa/?qa=6442/tooltips-not-working-on-ie
commented Sep 14, 2023 by Thierry (100 points)

Thank you for the help.
I try with this and it works perfectly:

[[mailto:anEmail@toto.com]]
...