Reserve the original size of image

cs-qyzhang commented 1 year ago

Images are always scaled to max height even when they are small. It seems that the outer <svg> tag d2 generated caused the image to be too large.

Before:

before

This PR:

after

cs-qyzhang commented 1 year ago

The Container height is a global option, it cannot be set for a single image. Although in d2lang you can set a node's width or height (e.g. a { width: 10 }), the image is always scaled to max height even when you do that. The built-in Mermaid of obsidian, the Obsidian Graphviz plugin, and the TikZJax plugin all display images at their original size, and the image size can be changed by font-size or something else. It would be nice to have consistent behavior with others, especially with built-in mermaid. Even if you can set the image's size by changing d2 node's height or width, it is very tedious to do that for every image and every node.

built-in mermaid

```mermaid
flowchart
a


![mermaid](https://github.com/terrastruct/d2-obsidian/assets/37697612/55cbd5f6-c5b3-48d0-8c58-31159b61628f)

#### Obsidian Graphviz

digraph {
  a [
    shape = rect
  ]
}


![dot](https://github.com/terrastruct/d2-obsidian/assets/37697612/83bde5a4-62bc-4502-bd50-a405415944b4)

#### TikZJax

\begin{document}
  \begin{tikzpicture}
    \node[rectangle,draw] {\Large a};
  \end{tikzpicture}
\end{document}


![tikz](https://github.com/terrastruct/d2-obsidian/assets/37697612/3518932e-5f1d-41cc-9e02-e067d09c3b56)

#### D2


##### before

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/5541ede7-bfb8-4ecd-acc5-1444e56678fb)

##### after

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/ad821bc6-daf9-4685-ac95-e30b2c7c48d3)

a {
  width: 10
  height: 10
}


##### before

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/8ebaf928-dc69-4491-a7a4-6753b12e11d1)

##### after

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/f0ce4aad-ae72-44d2-99d9-9418774711ef)

a {
  style.font-size: 100
}



##### before

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/53792150-f1ff-44e1-8ac3-cbb9c9c4a22e)

##### after

![图片](https://github.com/terrastruct/d2-obsidian/assets/37697612/91b53b40-27ff-4719-8151-e8e0f3284eeb)

MadSci356 commented 1 year ago

Hey @alixander,

Please merge this into main because @cs-qyzhang 's fixes indeed work. It auto-sizes the diagrams, super useful!

I have tried it locally. Results attached, see where the "More Text After Diagram" after each chart. In the current version, it's way too large.

Without this fix, this plugin is practically unusable, as it takes up the whole page for every diagram! Sometimes, it's useful, but that's only the case sometimes. Especially if you want diagrams in between your notes.