sytsereitsma / mdbook-plantuml

mdBook preprocessor to render PlantUML diagrams to png images in the book output directory
MIT License
76 stars 14 forks source link

Links in svg diagrams #56

Open gidmoth opened 1 year ago

gidmoth commented 1 year ago

If you crate a diagram like this, containing one or more links:

@startuml
...
[[http://google.com]]:Export **PDF**\nfor print;
...
@enduml

the preprocessor will create html like this:

<img src="mdbook-plantuml-img/fade8f12765e52244bd6d1827b6974f2e50dc2ba.svg" alt="" />

The links will not work. To fix it the html created for svg diagrems should look like this:

<object data="mdbook-plantuml-img/fade8f12765e52244bd6d1827b6974f2e50dc2ba.svg" alt="" />

the links will work as expected.

Please note, that there's additional CSS required for the book, to treat objects like images:

.content object { max-width: 100%; }
sytsereitsma commented 1 year ago

Ok. I can reproduce this. The preprocessor just creates markdown links, not HTML (e.g. it outputs ![](someimage.svg) instead of an tag). This will need to change for this specific case. I can just inline the SVG for images with links. Or I make inlining all SVG images an optional config, which will also be a nice workaround for the mdbook serve build loop.

The latter has my preference.

danieleades commented 1 year ago

Ok. I can reproduce this. The preprocessor just creates markdown links, not HTML (e.g. it outputs ![](someimage.svg) instead of an tag). This will need to change for this specific case. I can just inline the SVG for images with links. Or I make inlining all SVG images an optional config, which will also be a nice workaround for the mdbook serve build loop.

The latter has my preference.

if you go for this, you might like to look at the approach i took in mdbook-d2. I support both embedding images and inlining SVG

In fact, the two plugins are similar enough it would be nice to pull the boilerplate out into a shared utility crate...