NetoBF
NetoBF

Reputation: 169

doxygen-linking from SVG to a doxygen-ref with draw.io

I am trying to create an svg-image which has clickable elements which will route you to the documentation for that element, like the created class-diagrams in doxygen itself.

We are also using draw.io as a plugin in VSCode, but this should also work without VSCode.

In that special case it's about creating an architecture-diagram which has clickable components, which will open the documentation for that component.

Draw.io allows to save pictures as svg and also allows adding links internally. It has a special format whereas it also stores the drawio-information inside the svg.

Now I have two problems:

  1. I added a valid link, but neither in Firefox nor Edge I can click the picture.
  2. How does the doxygen reference-creation work? Since autolinking automatically links to the mentioned class, is there something like a lookup-map for a name? The reason is, that I do not want to insert the real html-links for a class which are present later on after the doxygen-generation, because that's not only uncomfortable but also error-prone. So can I reference to a page/section/etc. by using smth like markdown link? I guess it's not really possible since the link is inside the picture and doxygen won't touch already created svgs, right?

To have an example. The SVG-file-content (modified the links) after I created the drawio-file and stored it as svg:

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="&lt;mxfile&gt;&lt;diagram id=&quot;oiqSWY96R6bIFQIC5yqU&quot; name=&quot;Page-1&quot;&gt;dZPLboMwEEW/hmUisPtIlw0J7abqIoq6jAwM2K3ByJhC+vW1Y5uHkkgIxsd3/LgzBDiuhjdJGvohcuABCvMhwLsAocenjX4bcLbgGb9YUEqWWxRN4MD+wMHQ0Y7l0C6ESgiuWLOEmahryNSCESlFv5QVgi93bUgJV+CQEX5Nv1iuqKWbx3Di78BK6neOQjdTES92oKUkF/0M4X2AYymEslE1xMCNd94Xm5fcmR0PJqFWNxKOLcjP9Nt4gkJOUl2Wi2gb720mZ/WPRQUzt301qbOnb/maC+0EFa1eIzmmXa26FULr8EEPqajAfIDxQn9JhR6wGgN9uqQSecd17VCyJZx3hZGlNlo1nKhCyMqgjumaoGQnhnMJ9W0RVZW+fOLJKT1lJ1hbimauoNHY0bBWnX0xpejqHIw0DPC2p0zBoSGZme1192p2WRHvIh3ahX9BKhjuWh7N9nsDbYmSZy1xCQi72rvmx75t+qmVIt8fdNZGT44R173luPRUYOOwvaMfzkru0dReF/nsH8X7fw==&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <a xlink:href="https://stackoverflow.com">
            <rect x="0" y="0" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
            <g transform="translate(-0.5 -0.5)">
                <switch>
                    <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 1px;">
                            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                                <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                    BCE
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                    <text x="60" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                        BCE
                    </text>
                </switch>
            </g>
        </a>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>

I'm not a an svg-pro but as I understood the "a xlink" is used correctly here as it is stated: https://www.w3.org/wiki/SVG_Links

as soon as i reference it in doxygen with

\image html testpic.drawio.svg

it is shown in the documentation but it's not clickable. The image is embedded by doxygen using the object-tag and not the img-tag so this also seems to be fine. But what I noticed, after the opening, there is a "#document": generated doxagen html Does this cause the problem? I'm not sure what this even means or how I can prevent it.

So my two questions are:

  1. how do I achieve that I can click the picture and jump to the mentioned link?
  2. how can I achieve to create the link in a comfortable way by best using the Autolink-feature of Doxygen so I can jump to any doxygen reference?

PS: Why do I want this? We are using multiple tools currently for documentation which makes it pretty annoying adding something to it and some work is done in one tool which requires also work in another tool which requires to update a documentation in another tool again and so on. Also embedding a diagram from any other tool won't even deliver any "clickable"-functionality. We need a documentation that is easy to maintain and easy to create and use for the developers.

I am using doxygen 1.10.0

Upvotes: 0

Views: 89

Answers (0)

Related Questions