~ knotless

chadtmiller.com/knotless

Git hosted in your atproto account, on any stock PDS, fast enough for agents.

git clone knotless://chadtmiller.com/knotless

needs the knotless git helper. set it up

Render Mermaid diagrams in Markdown with Pele

Open chadtmiller.com wants to merge into web/markdown-preview from chadtmiller.com/knotless:web/mermaid 0 comments
chadtmiller.com opened on Oct 22, 2026

Stacked on #markdown-preview (web/markdown-preview). Retarget to main once that merges.


**How**
- Server unchanged: pulldown-cmark still emits `<pre><code class="language-mermaid">`, so no-JS pages show the source.
- New `diagrams` Svelte action (`web/src/lib/mermaid.ts`) swaps each block for a `mountAsync()` diagram. It uses `pele/lazy`, dynamically imported, so pages without diagrams load nothing and each diagram type is fetched on first use.
- Re-runs when the HTML changes, tears down stale mounts, and puts the source back if a diagram chunk fails to load. Syntax errors show Pele's inline error.
- Pele variables map to the site's tokens on `.prose .diagram`, so diagrams follow dark mode without re-rendering.

**Security**
- Pele escapes text, drops script callbacks, blocks `javascript:`/`data:` URLs, and caps input size. Links get `rel="noopener nofollow ugc"`. No icon or math resolvers are passed, so nothing unfiltered is inserted.
- Fits the existing CSP: chunks load from `self`, inline styles already allowed. Diagram images (http/https) fall under the existing `img-src https:`.

**Checked**
- `mermaid.ts` type-checks (`tsc --strict --noUnusedLocals`) against `pele@1.8.0`'s published types.
- Lockfile entry matches the registry integrity for 1.8.0.

**Not checked**
- Didn't run `svelte-check`, a build, or a browser. Worth a quick look at a flowchart and a sequence diagram in light and dark.
- Screenshot baselines will change wherever a fixture has a mermaid block (none that I found).