Create more similar HTML compared to asciidoctor-diagram (src, alt, width and height attributes of img element)

[stenzengel]

When I switched from asciidoctor to asciidoctor.js, I found out that asciidoctor-diagram and asciidoctor-kroki (with "kroki-fetch-diagram": true) do not produce the same HTML output (e.g. for plantuml diagrams):

Asciidoc Source:

[plantuml,my-filename]
----
...
---

Generated HTML with asciidoctor (Ruby) and asciidoctor-diagram:

<div class="imageblock">
<div class="content">
<img src="images/my-filename.png" alt="my filename" width="117" height="132">
</div>

Generated HTML with asciidoctor.js and asciidoctor-kroki:

<div class="imageblock kroki">
<div class="content">
<img src="images/c124036f4dade706bedfd3445ad534c857d766fa.svg" alt="my-filename">
</div>

There are several differences:

1. asciidoctor-diagram uses the second argument "my-filename" for the file name in the "src" attribute: "images/my-filename.png". Kroki generates a unique ID.
2. asciidoctor-diagram replaces the "-" character in "my-filename" with " " in the "alt" attribute. Kroki does no replace this character.
3. asciidoctor-diagram sets the image "width" and "height" on the element. Kroki does not set these attributes.
4. asciidoctor-diagram uses the "png" format by default. Kroki uses the "svg" format.

Would it be possible to make the results more similar (perhaps with the exception SVG vs. PNG) in order to facilitate the transition between the two extensions?

[ggrossetie]

We should probably create one issue per issue otherwise it's hard to track:

asciidoctor-diagram uses the second argument "my-filename" for the file name in the "src" attribute: "images/my-filename.png". Kroki generates a unique ID.

https://github.com/Mogztter/asciidoctor-kroki/issues/48

asciidoctor-diagram uses the "png" format by default. Kroki uses the "svg" format.

I think svg is a good default.

asciidoctor-diagram replaces the "-" character in "my-filename" with " " in the "alt" attribute. Kroki does no replace this character.

could you please create a dedicated issue?

asciidoctor-diagram sets the image "width" and "height" on the element. Kroki does not set these attributes.

could you please create a dedicated issue?

Thanks!

[stenzengel]

split into dedicated issues to simplify tracking: see #48, #98, #99

[ggrossetie]

Thanks Winfried :+1: