feat(web): add Mermaid diagram rendering and off-thread KaTeX/Mermaid workers#1226
Conversation
… workers Enable Mermaid diagram support in the web chat via markstream-vue's enableMermaid(). Set up Web Workers for both KaTeX rendering and Mermaid parsing using markstream-vue's pre-built workers (katexRenderer.worker, mermaidParser.worker), keeping heavy computation off the main thread during live streaming.
🦋 Changeset detectedLatest commit: dfd2715 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a2c6e40aee
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…writers processFileLinks() uses a TreeWalker that scans all text nodes in mdRef. Mermaid diagrams render as inline SVG, and diagram labels containing file-path-like strings (e.g. src/App.vue) would be replaced with HTML <button> elements inside SVG <text> nodes, corrupting the rendered diagram. processMarkdownLinks() similarly queries a[href] inside SVGs; while isLocalLink() mostly filters these out, explicitly skipping SVG subtrees is safer. Add svg to the closest() exclusion in processFileLinks(), and skip links inside svg in processMarkdownLinks().
commit: |
|
Codex Review: Didn't find any major issues. Can't wait for the next one! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
thanks for your contribution~ |
2 participants
Problem
The web chat currently only supports KaTeX math rendering. Mermaid diagrams (```mermaid` fenced blocks) are not rendered. Additionally, both KaTeX rendering and Mermaid parsing run on the main thread, which can block the UI during live streaming when many diagrams or equations arrive.
What changed
enableMermaid()inMarkdown.vueto register the default mermaid loader, somarkstream-vue's MermaidBlockNode renders fenced mermaid blocks as SVG diagrams.katexRenderer.worker,mermaidParser.worker) via Vite's?workersyntax and registered them withsetKaTeXWorker()/setMermaidWorker(). markstream-vue's MathBlockNode and MermaidBlockNode auto-detect the workers and dispatch heavy computation off the main thread, keeping the UI responsive during streaming.worker.format: 'es': Mermaid uses dynamic imports for per-diagram-type code-splitting, which requires ES module worker format; IIFE cannot split chunks.mermaid@^11.15.0to explicit dependencies (was already a peer dep of markstream-vue).Verification
pnpm typecheck— passespnpm build— passes, worker chunks emitted correctlypnpm test— all 173 tests pass