# Test — Excalidraw Embed

The Hamilton and Alexandra College · Year 12 · 2026

Test page for embedding an Excalidraw read-only diagram. Trying several approaches so we can see which OtterWiki actually renders.

Source link: <https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6>

---

## Approach 1 — Plain markdown link

Always works as a fallback:

[Open the Excalidraw diagram (read-only)](https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6)

---

## Approach 2 — Raw HTML `<iframe>`

If OtterWiki passes raw HTML through, this should embed the diagram inline.

<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>

---

## Approach 3 — `<iframe>` inside a fenced HTML block

Some markdown renderers strip raw HTML but allow it inside an `=html` fence:

```=html
<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc;"></iframe>
```

---

## Approach 4 — `<embed>` tag

```=html
<embed src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600">
```

---

## Approach 5 — `<object>` tag

```=html
<object data="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600"></object>
```

---

## Notes

- If only Approach 1 renders → OtterWiki strips raw HTML; embedding requires either an OtterWiki plugin/macro or exporting the diagram as PNG/SVG and uploading the static image.
- If Approach 2 (or 3/4/5) renders → we can embed Excalidraw diagrams directly on any wiki page using that pattern.
- Excalidraw read-only links allow students to **view and pan** the diagram but not edit — perfect for embedded reference figures.

If only the plain link works, the practical fallback is to **export the Excalidraw diagram as PNG** (File → Export to PNG inside Excalidraw), commit it under the wiki page's folder (e.g. `Page Name/diagram.png`), and embed with `![alt](Page%20Name/diagram.png)` — same pattern we used for the Data Collection Methods primary/secondary figure.