Influence the size of the graphic

[Juergen-aus-Zuendorf]

Hi,

it would be nice if it would be possible to influence the size of the graphic analogously to the plugin "plantuml", parameter "width".

Best regards Juergen

[Gim6626]

Agree, it would be very useful. Without it I was forced to switch to old plantuml Dokuwiki plugin.

[joerghampel]

I haven't done PHP and Dokuwiki in a very long time. Can anybody point me towards documentation that would help me implement this and create a MR?

[Bobby862]

Hi Togehter, i created a pull request to solve the problem, which you stated above. The pull request can be found under following url: https://github.com/kylec32/dokuwiki_plantumlparser/pull/41 Would be great, if we could merge this feature to get it official. Thanks a lot, Robert

[eduardomozart]

The PlantUML itself already offers a "scale" parameter that can be set at the diagram itself to control the diagram size. I'm actually using the CSS "#dokuwikicontent svg" to set the maximum width of SVG diagram to 100% of it's container (#dokuwikicontent), so it's look nice at Mobile and Desktop PCs, and it also fix the width of SVG diagrams from PlantUML, but any other SVG image files embedded at the page. I believe this is a better approach than adding a scale parameter to the tag.

[Bobby862]

When i add a scale 100 parameter into the plantuml code the result looks like this: Without a scalling parameter the result is also not full readable: How do i need to modify this plantuml code to be able to see the whole diagram?

` @startuml test2 - [MeasDataCollector] [MeasDataCollector] ..> test : use

SleepUntil - [Clock] [Clock] ..> RTCZero : use

BlinkFrequency - [Blink] [Blink] ..> LED_BUILTIN : use

getWeight - [Sensor] getTemp - [Sensor] getHum - [Sensor] [Sensor] ..> hx711 : use [Sensor] ..> hyt221 : use [Sensor] ..> DS18B20 : use

init - [Storage] push - [Storage] pop - [Storage]

sendMeas1Report - [Report] sendMeas2Report - [Report] [Report] ..> sim900 : use

@enduml `

Thanks a lot for your help. Robert

[eduardomozart]

I do not believe the problem is into the PlantUML itself. If the graph is big it will not fit your Wiki page content. You can try to use Read the DOKUS template that has commits to fullfill the SVG width. Please see https://github.com/my17560/dokuwiki-template-readthedokus/issues/28 If it didn’t fix the issue maybe you’ll need to add “overflow” for SVG elements on your Wiki template CSS. You can also use “scale 1/2” to decrease the diagram to half of its size or “scale 1/3” to decrease it even further.

[Bobby862]

You are right, this is not a Plant UML problem. The problem is that a too large image is not displayed correctly on the DokuWiki page. As I understand it, there are the following ways to solve the problem:

1.) The plugin https://www.dokuwiki.org/plugin:plantumlparser queries the max possible image size that can currently be visualized on the DokuWiki page, and does not create svg's that are larger. 2) DokuWiki scales down the svg's by itself if it can't be displayed completely on the page.

The third option you mentioned with the parameter 'scale 1/2' has the disadvantage that it is not a solution when using different devices (desktop, mobile devices,...) or different use cases on one device (e.g. screen with 2 windows DokuWiki and code).

Unfortunately we can't switch to the template "https://github.com/my17560/dokuwiki-template-readthedokus", because our Dokuwiki currently doesn't support sidear. We use the default Dokuwiki template that comes with the installation.

In my dokuwiki installation I find the css files in the folder '/config/dokuwiki/lib/tpl/dokuwiki/css' which contains a lot of *.css files. In which file do I have to insert the parameter "overflow", and how would it look in detail?

[Bobby862]

When i look with the browser developer tools on the page i can see following information:

And the command grep "svg" ./*.* inside the css folders brings findings in following files:

./_admin.less: svg { ./basic.less: background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); ./basic.less: background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); ./_links.css: background-image: url(../../images/external-link.svg); ./_links.css: background-image: url(../../images/unc.svg); ./_links.css: background-image: url(../../images/email.svg); ./pagetools.less: svg { ./pagetools.less: svg { ./usertools.less: svg { ./usertools.less: svg { ./usertools.less: svg {

Where must the overflow parameter set?

[Bobby862]

I found out, that when i change the size parameter here, the image size can be adapted:

But when i understand you correct, there is a better aproach available.

[eduardomozart]

Scale parameter is the only way to change the size of PlantUML diagram inline. The other way would be parsing the plugin to parse the PlantUML SVG output and edit it’s size directly. I do not believe that solution number 1 would be viable. Even if we could query the page width and generate a SVG with width accordingly, if it’s big, it may generate a small and unreadable SVG image on small devices, like smartphones. This is a similar approach that Read the Dokus uses to fix this issue for SVG that overlaps the page content. You don’t need to edit the CSS template itself, you can edit/create the file “conf/userstyle.css” and add your custom CSS there, so any DokuWiki template upgrades wouldn’t remove your customizations. Try adding the following CSS to this file:

#dokuwiki__content svg
{
    height: auto;
}

#dokuwiki__content img,
#dokuwiki__content svg
{
    max-width: 100%;
}

This could make your diagram unreadable on small devices if it’s too big, as it will resize the diagram to the available device width screen. There’s the following workarounds:

1. User rotates the device so it will change your site to landscape mode, which can increase SVG readability but it still maybe unreadable.
2. Enable “SVG” link on the image and user click on it to see it on full size on a new tab.
3. You can replace “max-width: 100%” with “overflow-x: auto” so the user can touch the SVG image to the left or to the right to see its full content when it overlaps the DokuWiki page width, which would be a great solution if you do not want the user to exit the page and still be able to read it on small devices on-place. This will also show a horizontal scroller that Computer users would be able to use when hovering the mouse through SVG image. I just recommend you to put a message below the SVG image so the user would know he can do that if the overflow isn’t visible for the user.
4. There may be exist another approach, that would be installing a plugin that allows you to expand the SVG image on click/touch, similar to which Lightbox does, so the user wouldn’t need to exit the page for larger SVG and PNG files.

About the Read the DOKUS template doesn’t supporting DokuWiki versions with no sidebar support, you can try to open an issue/bug on its GitHub page so we can try to talk with the plugin author and make it compatible with templates with no sidebar. Not sure if he will accept it through, because the template relies on the sidebar to the search form, but if there’s a plugin that offers sidebar support for your instance I believe we could make the template compatible with it so you would be able to use it. If your DokuWiki version is too old, I would recommend you upgrade it. There’s also a Pull Request (PR) on https://github.com/kylec32/dokuwiki_plantumlparser/pulls that add support for diagrams with ODT plugin. This also fixes Ditaa and Latex rendering, I recommend you to apply it if you pretend to parse those kind of diagrams. And it also seems that there’s a PR that allows you to do exactly what you want, that is adding a “size” property to the “uml” tag, but I’m against it and prefer to follow the approaches that I stated to you as it handles the problem at the template level (where it should be handled, I believe) instead of relying on PlantUML to do so.

[Bobby862]

I Created the file "userstyle.css" with the content from the post above, and tried to get this working, but i was not successfull. Following file path locations i tried inside the docker container which contains the dokuwiki installation:

• ./config/dokuwiki/lib/plugins/plantumlparser/userstyle.css -> Not successful
• ./config/dokuwiki/lib/plugins/plantumlparser/conf/userstyle.css -> Not successful
• ./config/dokuwiki/lib/tpl/dokuwiki/css/userstyle.css -> Not Successful
• ./config/dokuwiki/conf/userstyle.css -> Not successful
• ./app/www/public/lib/styles/userstyle.css -> Not successful

The Test which i did was to load the wikipage with the big plantuml diagram, click first on edit, then on preview, to avoid that the caching mechanism has an influence in the test result, but all tests was not successul. I belive, i put the file "userstyle.css" in the wrong directories. On my linux system i found no folder at the root starting with /conf.

In which absolute path should the file userstyle.css be stored ?

[eduardomozart]

Please note that the caching mechanism is related to the result of the page itself (it's HTML content), not the CSS. After applying a CSS change, you need to clean up your user browser cache. You may also need to remove the contents from dokuwiki/data/cache There's some templates that didn't use #dokuwiki__content to hold the main content (like Argon-alternative template), but I do not think this is your case because you said that you're using the built-in DokuWiki template, so it should work as expected. You can also use the "advanced" plugin to edit the userstyle.css file: https://www.dokuwiki.org/plugin:advanced

[Bobby862]

Thank you very much for this hint. When i followed your suggestion, i was able to get it working when i put it under following path: ./config/dokuwiki/conf/userstyle.css

Unfortunatly the svg image is only changed in x-size, and not in y-size. Is there also a possibility to change the y-size with the same percentage like the x-size, so that the proportion of the image keep the same, like the original svg image which was created by plantuml ?

[eduardomozart]

I think you may need to choose one axis to resize the SVG image. If x (horizontal, width) and y axes (vertical, height) are the same, they could end up distorted or exceeding the maximum page content space. You can try to set one of the following CSS styles to try:

#dokuwiki__content svg
{
    height: auto;
}

#dokuwiki__content img,
#dokuwiki__content svg
{
    max-width: 100%;
    max-height: 100%;
}

You may also try:

#dokuwiki__content svg
{
    height: auto;
}

#dokuwiki__content img,
#dokuwiki__content svg
{
    max-height: 100%;
}

You can also remove the max- prefix to force the SVG image to one specific width and height (e.g. ''width: 700px;''). As SVG is a resizable vector, you should be fine. Just notice that resizing the SVG this way you'll be resizing the DokuWiki emojis too. If you want to follow this approach (use specific width and height), I recommend you replacing #dokuwiki__content with [id^="plant-uml-diagram"] so you will not affect any other SVG elements of the page, only the PlantUML diagrams itself.