Is it possible to add a "border based" svg-interactive mode like below?

0 votes
asked Jul 29, 2023 in Question / help by kirchsth (5,780 points)
edited Jul 29, 2023 by kirchsth

related to Add interactive functionality for Usecase diagrams exported to SVG

I tried !pragma svginteractive true with my C4 diagrams and like the idea, but based on the changed opacity the remaining diagram cannot be read anymore (and if the Updater, FileSystem or NoSqlDB is selected then multiple elements are "active" and not only the selected one).

Therefore I would need following options/extensions that I can define a border color in plantuml code (e.g. via !pragma svginteractiveborder green)
and the generated svg file has following changes:
a) increased opacity if not selected, and mouse-over does not change the opacity only the border (and the border color is defined via pragma)

.elem, .link {
    opacity: 0.5;
[data-mouse-over-selected="false"] {
[data-mouse-over-selected="true"] {
    outline: 3px double green;
    outline-offset: 2px;

b) and onMouseOverElement selects only the "enclosing g"

    function onMouseOverElem(domEl) {
        let e = SVG(findEnclosingG(;
            e => { if (SVG(e)!=s)

the complete file can be downloaded and tested locally

Is this possible with "normal" plantuml features?

thank you and best regards

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

[Antispam2 Feature: please please wait 1 or 2 minutes (this message will disappear) before pressing the button otherwise it will fail](--------)
To avoid this verification in future, please log in or register.