PlantUML/Kroki do support interactive diagrams when format is SVG, but the plugin preview cannot handle such links

Given this adoc example we expect the diagram to have a note with a http link to www.google.com. We can use kroki to preview the expected outcome: https://kroki.io/plantuml/svg/eNpLzkksLlZwSc3N58rLL0lVKMpMzyjhio7OKCkpKLbS1y8vL9dLz89Pz0nVS87PjY3lSs1LUQCpBABUGRST

[plantuml%interactive,demo,svg]
----
class Demo
note right
[[https://www.google.com]]
end note
----

The asciidoctor-intellij-plugin does render a preview of the above and it looks as expected. However, the http link to www.google.com is not interactively usable. (Clicking on it does not resolve the underlying URL).

To make things even more complicated, we have a use-case, where instead of linking to external URLs, we link to pages on the same site, using relative URLs. This allows for an interesting idea: Have a system overview diagram, where the user (interested reader) can interactively click on subsystems shown, such that a more detailed diagram opens. Inspired by the c4 model.

We already have a proof of concept that this works with Antora, meaning we build the site with Antora, use kroki as diagram engine and apply the following playbook settings:

asciidoc:
  extensions:
    - asciidoctor-kroki # requires: npm i ... @asciidoctor/core@2.2.0 asciidoctor-kroki
    - ./antora/lib/lorem
    - ./antora/lib/jira-issue
  attributes:
    experimental: ""
    idprefix: ""
    idseparator: "-"
    # kroki
    # for more options see https://github.com/Mogztter/asciidoctor-kroki
    kroki-default-format: svg # (default)
    kroki-default-options: interactive # only available for SVG
    kroki-fetch-diagram: true
    kroki-server-url: https://kroki.io # (default)

I don’t care too much about external links for the preview. But a really cool feature would be to resolve site-local page links, that are referenced from within such interactive diagrams. Meaning, when I click on a diagram link that refers to a page on the same IntelliJ project, that the preview is smart enough to change the IDE’s focus to this referenced page, such that the preview then automatically renders the page that just got the focus.

AsciiDoc Plugin Version: 0.31.20

IDE Name and Version: IntelliJ IDEA 2020.2.1 (Community Edition) Build #IC-202.6948.69, built on August 24, 2020 Runtime version: 11.0.8+10-b944.31 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. Windows 10 10.0 GC: ParNew, ConcurrentMarkSweep Memory: 1979M Cores: 16 Registry: ide.tooltip.initialDelay=590, ide.balloon.shadow.size=0 Non-Bundled Plugins: Lombook Plugin, SequenceDiagram, com.jetbrains.ChooseRuntime, com.mallowigi, MavenRunHelper, in.1ton.idea.spring.assistant.plugin, org.jetbrains.kotlin, com.chrisrm.idea.MaterialThemeUI, org.asciidoctor.intellij.asciidoc

[ahus1]

Hi @andi-huber, the AsciiDoc plugin for IntelliJ currently renders all PlantUML diagrams als PNG.

This is a legacy as the old JavaFX and Swing previews didn’t display SVG correctly. The AsciiDoc plugin for IntelliJ tweaks the SVG to PNG on the fly.

As JCEF preview is available from 2020.2+, it is now time to disable the workaround for JCEF. I haven’t found the time yet, but I’ll track the progress of this in this ticket.

[ahus1]

I need to update my findings: the latest release of kroki requires “opts=inline”, but asciidoctor-diagram requires “svg-type=inline”. I updated the docs, and will raise this with asciidoctor-diagram.