search

asciidoctor / asciidoctor-kroki

Asciidoctor.js extension to convert diagrams to images using Kroki!
https://kroki.io/
MIT License
147 stars 50 forks source link

Links in svg diagrams not working using img tag #237

Closed lind closed 3 years ago

lind commented 3 years ago

When including a svg diagram rendered by Kroki from Antora the svg diagram is included using the <img> tag. Eg. <img src="_images/diag-bd61d902f74d23012f36ed92fc52a73d241631ce.svg" alt="Diagram"> Then links in the svg is not working (not sure why). Links in "raw" svg works fine: C4Model example with a link to plantuml.com

If the svg is included with <embed> instead then the links in svg diagram works.

It might not be the asciidoctor-kroki extension that add the <img> tag and can't change that but is there a way to get the svg links to work in a Antora site?

ggrossetie commented 3 years ago

Hey @lind

I think you need to add opts=interactive:

[c4plantuml,opts=interactive]
....
@startuml
!include C4_Context.puml

title System Context diagram for Internet Banking System

Person(customer, "Banking [[http://plantuml.com/ link to Plantuml]] Customer", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to check their accounts.")

System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information.")

Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel(banking_system, mainframe, "Uses")
@enduml
....

In this case, Asciidoctor will embed the SVG into a <object> element. This is supported in Asciidoctor.js 2.x but I don't recall if this is also supported in Antora (which is using Asciidoctor.js 1.5.x).

lind commented 3 years ago

Thanks @Mogztter !

I tried the opts=interactive with Antora but the result were a <img> tag. I'll wait for the Asciidoctor.js version bump in Antora then. Closing this issue.

lind commented 3 years ago

A short update.

I was trying with opts=inline when adding this issue and that didn't work - got <img> tag for including the svg. Tried opts=interactive as you mentioned @Mogztter and that worked - got an <object> instead. (Using Antora 2.3.4)

Thanks @Mogztter !