Home A - Z
Page Index

An Otter Wiki

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

Always works as a fallback:

Open the Excalidraw diagram (read-only)

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.