Tag

Global configuration:

use(rehypeDiagram, {
  tag: "...", // one of 3 options
});

or local configuration

```some-diagram tag=...
diagram text
```

img is a default option. Ignored for strategy=inline

Options

img

<figure class="beoe"><img src="..." width="..." height="..." /></figure>

iframe

<figure class="beoe">
  <iframe src="..." width="..." height="..." title="..."></iframe>
</figure>

Note: there is also allowfullscreen.

embed

<figure class="beoe">
  <embed src="..." width="..." height="..." title="..."></embed>
</figure>

Strategy vs Tag

	inline	data-url	file
svg (1)	yes (only possible option)	no	no
img	no	yes (default)	yes (default)
iframe, embed	no	yes	yes

• (1) not an actual option

Pros and cons

	svg (inline)	img	iframe or embed
Searchable text	yes	no	yes
Links	yes	no	yes with caveats (1)
Interactivity with JS (2)	yes	no	yes with caveats (3)
Can be styled with CSS	yes	no	no
CSS conflicts	possible	no	no
alt="..." or title="..."	no	yes	yes
Embedded images and fonts	yes	yes with caveats (4)	yes
@beoe/pan-zoom	yes	yes	yes with caveats (5)

• (1) Links require target=_top, iframe may require allow-top-navigation
• (2) This includes link previews
• (3) It is possible to access iframe content via JS, but I suspect it will have issues
  • with CSP
  • embed, it seems, doesn’t have DOM
  • there probably will be issues with @floating-ui/dom
• (4) Works only if images inlined (via data-url)
• (5) gestures don’t work (at least in the current implementation), buttons work though