D2 diagrams require width and height (otherwise not showing up)

[Emptyfruit]

D2 diagrams received from kroki.io have 0x0 dimensions, thus not showing up in html. The <img> is present in html and if i add some height and width to it via browser console the image shows up.

Steps to reproduce:

1. Use Antora (not sure if it is related, but still) with cloud kroki.io
2. Create a test diagram with d2 syntax without any attributes.

.adoc

= Sandbox

== Test D2

[d2]
....
Test: {
  shape: class
  type: enum
  date: datetime
  comment: text

  style: {
    fill: red
  }
}
....

Server response

HTML

Currently, i have to provide width and height attributes to get proper image.

[d2, width=100, height=100]
....
Test: {
  shape: class
}
....

If this is an intended behaviour, it would be nice to have a disclaimer in the docs.

[ggrossetie]

I cannot reproduce it using <img>:

I believe it does not compute the size because <div class="imageblock kroki"> is using a flexbox and <div class="content"> contains only a scalable image. In this case, you need to declare a width or height explicitly. Alternatively, you can set flex: 1 on <div class="content"> to take all the available space.

[Emptyfruit]

But those elements are provided by the plugin, aren't they? I have the default antora ui and did not change any relevant styles.

And just for comparison, with other types the image in kroki response has dimensions, but with d2 it does not.

[ggrossetie]

No they are created by Asciidoctor and the stylesheet is provided by the Antora default UI. The only weird thing is that D2 is using an <svg> element inside an <svg> element:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2version="v0.4.1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 444 432" height="100%" width="100%" style="width: 100%; height: 100%;">
<svg id="d2-svg" class="d2-1303036898" width="444" height="432" viewBox="-101 -101 444 432">
<!- ... ->
</svg>
</svg>

In my opinion it would be better to set width="444" height="432" on the outer <svg> element but you will need to make a case for it at: https://github.com/terrastruct/d2/issues

[ggrossetie]

The following is working fine with the default Asciidoctor stylesheet:

image::https://kroki.io/d2/svg/eNolzNEJwCAMBNB_p8gcztEFRK9USKw0KVSKuzfSn4N3cLdBLdIbiPRIHZEyJ1WnjSW0WxwlmWOlVYEX-RRB86XhsbDWNhj_EdFemSNdKK4Z5gc4zx61[]

So you could also make a case to improve the default Antora UI. More precisely to account for SVG images that does not have explicit width/height: https://gitlab.com/antora/antora-ui-default/-/issues

Anyway, this "issue" won't be fixed in the Asciidoctor Kroki extension so I'm closing.