Home A - Z
Page Index

An Otter Wiki

Blame

6550f1 lisa 2026-04-28 11:46:46
Add Excalidraw embed test page (5 approaches)
1 
# Test — Excalidraw Embed
2
1abe81 lisa 2026-04-30 18:17:38
School name → 'The Hamilton and Alexandra College' across all wiki pages Sweep rename of the standard subtitle line on every wiki page (sd/, hub, resources). 25 files affected.
3
The Hamilton and Alexandra College · Year 12 · 2026
6550f1 lisa 2026-04-28 11:46:46
Add Excalidraw embed test page (5 approaches)
4
5
Test page for embedding an Excalidraw read-only diagram. Trying several approaches so we can see which OtterWiki actually renders.
6
7
Source link: <https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6>
8
9
---
10
11
## Approach 1 — Plain markdown link
12
13
Always works as a fallback:
14
15
[Open the Excalidraw diagram (read-only)](https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6)
16
17
---
18
19
## Approach 2 — Raw HTML `<iframe>`
20
21
If OtterWiki passes raw HTML through, this should embed the diagram inline.
22
23
<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>
24
25
---
26
27
## Approach 3 — `<iframe>` inside a fenced HTML block
28
29
Some markdown renderers strip raw HTML but allow it inside an `=html` fence:
30
31
```=html
32
<iframe src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600" style="border: 1px solid #ccc;"></iframe>
33
```
34
35
---
36
37
## Approach 4 — `<embed>` tag
38
39
```=html
40
<embed src="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600">
41
```
42
43
---
44
45
## Approach 5 — `<object>` tag
46
47
```=html
48
<object data="https://link.excalidraw.com/readonly/HRiHzvVkjScxw6WoIOV6" width="100%" height="600"></object>
49
```
50
51
---
52
53
## Notes
54
55
- 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.
56
- If Approach 2 (or 3/4/5) renders → we can embed Excalidraw diagrams directly on any wiki page using that pattern.
57
- Excalidraw read-only links allow students to **view and pan** the diagram but not edit — perfect for embedded reference figures.
58
59
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.