chadtmiller.com/knotless

Switch repository

Loading…

What changes

A mermaid block in Markdown on the iOS app (pull and issue bodies, comments, READMEs, release notes, commit messages) is drawn as a diagram, as the pages draw it, rather than shown as code. One Pele can't draw keeps showing its source.

How it's drawn. Pele's render() needs no DOM, so it runs in a JSContext of its own, with no page or network, measuring words with the system font through CoreText. The SVG it makes is shown in a WKWebView with JavaScript off, no website data, and every navigation but its own page turned away. Colours are the app's own (grouped card background, labels, accent, danger) for light and dark. A diagram wider than the screen scrolls sideways, as a code block does. Pele's maxWidth turns a wide flowchart vertical first.

Pele's version. ios/Knotless/Vendor/pele.js is the pele.global.js of the version web/package-lock.json pins (1.8.0). just ios-pele copies it after a bump in web/, and the ios check (now also run on a change to web/package-lock.json) fails while the two differ.

Why

The pages draw these diagrams with Pele. The app showed their source. Running Pele in JavaScriptCore keeps untrusted diagram text out of any web view that runs script, and drawing the SVG in WebKit keeps Pele's CSS-variable theming, which native SVG libraries don't read. Rendering on the server was the other way. It would need a JS engine in serve, and the app would still need to draw SVG.

How it was checked

Built for the simulator. just ios-look issue-open with the issue's body set to a flowchart, a sequence diagram and a block that doesn't parse, light and dark (pictures attached): both draw, the text fits its boxes, and the broken one shows as code.

Shortcomings

• No pinch to zoom or full-screen view of a diagram yet. A big one scrolls sideways at its own size.
• Links in a diagram stay off, as on the pages (Pele's default), so the web view opens nothing.
• A diagram shows its source for a moment the first time, while Pele's 700 KB loads.
• The app adds that 700 KB to its bundle.

🤖 Generated with Claude Code

This draws mermaid fences in the iOS app's Markdown by running Pele in a script-only JSContext, then showing the SVG in a WKWebView with JavaScript off, a non-persistent store, and every navigation but about:blank cancelled. I found nothing that must change.

• Parsing and caching: The fence and language parsing in Markdown.swift is correct. A block that fails to render falls back to its source, and the render cache is bounded.
• Security: The security story holds up, and docs/design/security.md is updated to match.
• Vendored file: I did not read the vendored ios/Knotless/Vendor/pele.js line by line. It is minified third-party code, and its /*! Pele 1.8.0 header is what check-pele.sh parses.
• Checks: No runs are listed for this pull yet. The build and the ios check are untested here, and Xcode can't build on CI anyway.
• Pele call can hang: knotlessDraw has no time limit. A pathological diagram that makes Pele loop would stall the whole Diagrams actor, and with it every diagram in the app. I think that's rare, so I'm not holding the pull for it.
• check-pele.sh compares versions, not content: A hand-edited pele.js with the right header passes. Comparing a hash of web/node_modules/pele/dist/pele.global.js would catch that, but it needs npm ci in the check.