I would like to have an ability to specify a CSS style class or classes names when specifying componetns and interfaces, so that when rendered as SVG, and there is a style defined, the component or the interface primitives (border, strokes, annotation texts, etc.) would apply that style.
For example, this would allow to highlight parts of the diagram dynamically via javascript and many many other things. Example way to apply bllinking for instance is described here:
https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3/16344389
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}<div class="blink_me">BLINK ME</div>
Here is a handmade PoC example (checked with a real SVG, generated by PlantUML):
SVG pieces with a blinking line are:
1) in the <head> of the SVG you'd put/apply the css style:
<head>
<style>svg {
@keyframes blinker { 50% { opacity: 0; }
.css_blinker { animation: blinker 1s linear infinite; }
}</style>
</head>
2) then I want the interface's connection line, as well as all other interface primitive to adopt the class. The line piece will look as follows (that is, class="css_blinker" to be added by PlantUML when the SVG gets generated):
<path d="M807.83,712.7736 C802.852,743.3536 791.163,798.0926 767,838.6406 C749.068,868.7326 720.982,896.4996 697.679,916.5426 " fill="none" id="WebGL_Lib-Westeros" class="css_blinker" style="stroke: red;stroke-width: 2.0;"></path>
As a result, the line will get blinked when rendeder in a browser.
Ideally, i'd want an ability to specify it in iuml as follows:
skinParam cssClass {
myComponentA css_blinker, class_name_y, class_name_z...
myInterfaceA css_blinker, class_name_y, class_name_z...
}
Or inline as well.
Anyway, if possible, we can start with just arrows... please let me know what you think.
