Repository navigation
feat(session-ui): render mermaid code blocks as diagrams in chat - #38175
Closed
ben-fornefeld wants to merge 8 commits into
Closed
ben-fornefeld wants to merge 8 commits into
ben-fornefeld wants to merge 8 commits into
Conversation
Mermaid fenced code blocks now render as charts by default in the chat markdown view (desktop and web), while the code block's copy button keeps copying the original mermaid source. - Split settled mermaid fences into standalone code blocks so both the streaming and settled render paths route through one diagram handler. - Render diagrams from a lazily imported, serialized mermaid instance and fall back to the source while streaming, incomplete, or on parse errors. - Track the app color scheme via a reactive signal on data-color-scheme so diagrams re-render when the theme flips.
github-actions
Bot
added
the
needs:compliance
Contributor
|
This PR doesn't fully meet our contributing guidelines and PR template. What needs to be fixed:
Please edit this PR description to address the above within 2 hours, or it will be automatically closed. If you believe this was flagged incorrectly, please let a maintainer know. |
Contributor
|
The following comment was made by an LLM, it may be inaccurate: Found a potential related PR: PR #23688: feat(app): add markdown preview with mermaid diagram support
|
- Gate the settled-path mermaid split behind a fence regex so messages without diagrams stay lexer-free. - Collapse the mermaid/shiki resource branches into one block construction. - Track only the last started render (source, scheme, request) per block; failed parses no longer re-render on identical effect re-runs. - Drop dead rejection handling from the serialized render queue.
Clicking a rendered mermaid diagram (or the new hover-revealed expand button beside the copy button) opens a fullscreen viewer. - Viewer uses Kobalte Dialog primitives for Escape, focus trap, and portal; re-renders the SVG fresh so IDs never collide with the inline chart, and follows theme flips while open. - Zoom via toolbar buttons, Ctrl/Cmd+wheel, and a percentage readout that resets to fit; initial zoom fits the viewport without upscaling. - Expand button reuses the mounted-host pattern of the copy button and only appears once the diagram has rendered. - Adds a minus icon and ui.mermaid.* strings (locales fall back to en).
- Replace the scroll container with a transform-driven canvas: drag to pan, plain wheel pans, ctrl/cmd + wheel (trackpad pinch) zooms at the cursor, double-click zooms in, toolbar buttons zoom at center, and the percentage readout resets to a centered fit. - Viewer panel now spans the viewport with padding to its edges. - Fit fills the padded canvas (vector output upscales crisply) and the camera math lives in pure, tested helpers. - Swap the expand icon for a new four-corner fullscreen icon.
Wheel and pointer events fire faster than the display refreshes, so the viewer now keeps the camera in a plain value and writes the stage transform directly in one requestAnimationFrame per burst instead of per-event reactive style updates. Only the toolbar percentage readout stays on a signal.
Replace mermaid's stock default/dark themes with a curated slate palette on the "base" theme engine: neutral node surfaces, higher-contrast edges and borders, amber-tinted notes, and eight desaturated categorical hues (cScale/git scales) so large state, timeline, and git charts stay parseable. Diagram text uses the app sans font resolved to a concrete value, since mermaid measures text with it.
Flowchart nodes all render as class="node default", so per-type color comes from two layers injected via themeCSS (stylis scopes it under the diagram id): - Shape buckets: polygons (decisions and branch-like shapes) tint amber, circles and stadium groups (terminals) tint blue, cylinder paths (storage) tint violet, and plain rects stay slate. - Semantic author classes: `A:::info|success|warning|danger|muted` pass through without a classDef and style any shape with theme-consistent accents in both schemes; explicit classDef inline styles still win. Adds a MermaidShapes story covering every node shape, edge style, subgraph, and a `:::warning` node for tuning.
Contributor
|
This pull request has been automatically closed because it was not updated to meet our contributing guidelines within the 2-hour window. Feel free to open a new pull request that follows our guidelines. |
github-actions
Bot
removed
the
needs:compliance
4 of 6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Mermaid fenced code blocks now render as diagrams by default in the chat markdown view. The code block keeps its copy button, which continues to copy the original mermaid source (not the rendered SVG).
This targets the desktop app, but the change lives in the shared
session-uiMarkdowncomponent that powers desktop chat (and web), so both benefit at no cost to bundles that never show a diagram.UX
```mermaidblock in a chat message renders as a chart.How it works
markdown-stream.ts: settled (non-streaming) messages are one "full" block, so mermaid fences are now split into standalonecodeblocks. Both the streaming and settled paths therefore flow through a single diagram handler. Non-mermaid content stays coalesced, and messages with link reference definitions fall back to the existing single-block behavior.markdown-mermaid.ts(new): lazilyimport("mermaid")(code-split; only loaded when a diagram appears), serialized renders (mermaid keeps global state + scratch DOM),securityLevel: "strict", and a reactivedata-color-schemesignal so diagrams re-render when the app theme flips.markdown.tsx: mermaidcodeblocks are routed to an imperative renderer that keeps a hidden<pre><code>source (for copy + fallback) alongside the rendered SVG, guarded against stale async renders. Nomorphdomis involved for mermaid.markdown.css: source/diagram visibility driven bydata-mermaid-state.Testing
bun test srcinpackages/session-ui(83 pass), including new unit tests for the mermaid language/theme helpers and the settled-mode fence splitting.bun typecheckacross the workspace (all 30 packages).UI/Markdownfixture now includes a mermaid flowchart for visual verification.Notes
basetheme engine: neutral node surfaces, contrasty edges, and eight desaturated categorical hues for state/timeline/git scales. It does not yet adapt to custom OpenCode theme palettes (would need CSS-var probing; noted as a possible follow-up).Fullscreen viewer (added in iteration)