Improve Diagram Scaling

[npgrosser]

This issue addresses the current limitation where diagrams do not scale with the page width.
The goal is to investigate possible approaches to enhance diagram scaling.

See #6 and #12 (comment)

[npgrosser]

The reason behind this behavior is the plugin's DOM being isolated from the main application.
Due to this isolation, the plugin cannot directly access the parent container elements to adjust the diagram's width.

One possible workaround could be to set the diagram size relative to the viewport width.
However, automatic scaling might not work well for all diagrams, as their dimensions and aspect ratios can vary greatly. Additionally, user preferences for diagram size and scaling might differ.

In my opinion, the best solution is to allow users to specify their desired dimensions or scaling for each diagram individually. The plugin already provides an option for users to customize the style for each diagram container div.

To customize the style for a specific diagram, you can use the following syntax:

{{renderer code_diagram,d2,containerStyle=width: 400px}}

This example sets the diagram's container width to 400 pixels.
More information on customizing and decorating diagrams can be found in the "Decorating Diagrams" section of the README: https://github.com/npgrosser/logseq-diagrams-as-code#decorating-diagrams

[cprerovsky]

Thank you for this great plugin. I still have a problem understanding where to put this code to adjust the size. My block diagram looks like this:

blockdiag {
"Major Incident" -> "Problem Analyse" -> "Ursache bekannt" -> "Dauerhafte Lösung" -> "Change";
}

Where do I add the renderer configuration code you postet above?

[imJoshuaRice]

Thank you for this great plugin. I still have a problem understanding where to put this code to adjust the size. My block diagram looks like this:

blockdiag { "Major Incident" -> "Problem Analyse" -> "Ursache bekannt" -> "Dauerhafte Lösung" -> "Change"; }

Where do I add the renderer configuration code you postet above?

It goes in the render code that appears when you click on the diagram. It does not go within the D2 code.

In general, it may be best to open a new issue thread in the future rather than replying to a closed off one - as you are limiting answers purely to those who have been involved in the closed issue. (I only stumbled across your question when searching for D2 information). You can still link to a closed issue, in a new one. This has the benefit of allowing other users to see and (hopefully) chime in where they can.

If you compare the syntax that was provided above to your own renderer block, you'll see where you need to make an adjustment.