Strategy

Global configuration:

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

or local configuration

```some-diagram strategy=...
diagram text
```

inline is a default option.

Options

inline

<figure class="beoe"><svg>...</svg></figure>

data-url

<figure class="beoe">
  <img src="data:image/svg+xml,..." width="..." height="..." />
</figure>

file

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

Note: this strategy requires to additional options:

use(rehypeDiagram, {
  strategy: "file",
  // where to store files on the disk
  fsPath: "public/beoe",
  // path to files in a browser
  webPath: "/beoe",
});

add fsPath (public/beoe) to .gitignore

Note: if you deploy to Netlify, do not use path that starts with ..

Pros and cons

	inline	data-url	file
Interactivity	yes	no	no
Can be styled with CSS	yes	no	no
CSS conflicts	probably yes	no	no
<img alt="..." >	no	yes	yes
DOM footprint	high	low	low
HTML footprint	high	high	low