Provide width and height to SVG

[PathVR]

@snt By default SVG shown is very small. Can we add width and height support.

What I tried:- by adding style to <div class="mermaid content"> I get desired results. Via mermaid block, can provide width and height, which can be passed in above mentioned div.

Please let me know if there is other ways to do this.

[snt]

@PathVR there would be no way to set the size unless Mermaid provides such functionality.

As you mentioned setting style to the outer div should work. I'll figure out how to set size parameters on asciidoc and read them and set to div in this extension.

Do you have any example diagram that is rendered small?

[PathVR]

@snt

[mermaid, svg]

sequenceDiagram test->>test1: teting API call test1->>test2: forward call test2->>test1: return test1->>test: return

All diagrams are rendered small.

If style is added with width

I have some more tries and looks like, If imageblock class is removed, in that case as well the image size is increased

[snt]

@PathVR I have added support for width and height attributes. You can set them like

[mermaid,width=100%]
----
...
----

Could you try it by copying https://github.com/snt/antora-mermaid-extension/blob/9c1819b241f9ba79fece1eaaa437d80c1ea2661b/lib/extension.js to node_modules/@sntke/antora-mermaid-extension/lib/ and let me know if it works?

[PathVR]

@snt

That works.

Is it better to default it to 100%?

Thanks for quick help.

[snt]

@PathVR Sounds good! You are welcome.

Is it better to default it to 100%?

No, unfortunately. Making width=100% as default affects existing diagrams. So please specify your favorite width or height if the size of the diagram is too small.

I'll release v0.0.4 to npmjs which will include fixes for this and #3.

[snt]

https://www.npmjs.com/package/@sntke/antora-mermaid-extension/v/0.0.4 is published.