Skip to content

feat: render Mermaid fences as diagrams - #579

Merged
Tryanks merged 1 commit into
mainfrom
feat/markdown-mermaid
Oct 3, 2026
Merged

Tryanks merged 1 commit into
mainfrom
feat/markdown-mermaid

Conversation

@Tryanks

@Tryanks Tryanks commented Oct 3, 2026

Copy link
Copy Markdown
Owner

What changes

A ```mermaid fence in any Markdown surface now renders as a diagram instead of highlighted code.

  • crates/ui/src/markdown/mermaid.rs lays the fence source out to SVG with mermaid-rs-renderer (pure Rust, no browser, default-features = false), picks the engine's light or dark theme from the shell theme mode, and makes its page background transparent so the fence surface shows through. The SVG goes through GPUI's own ImageSource::Image path, which rasterizes SVGs at 2x so the diagram is crisp on HiDPI.
  • Source that does not parse keeps rendering as a code block. That is the ordinary state of a fence still streaming in; once the source parses the picture replaces the code. A renderer panic on a partial source is contained so it cannot take the window down.
  • The diagram keeps the code block's right-click "Copy code" (copies the Mermaid source) and opens in the image lightbox on click, with an accessible label (markdown.mermaid_diagram, added to both locales).
  • A Mermaid block is one root-list item rather than a line-split one, since it is painted whole.
  • The bounded LRU behind the highlight cache is generalized to RecentCache<K, V> and shared by the diagram cache, so a repaint never re-lays-out a diagram.
  • The gallery example gains a Mermaid block for visual checks.

Test

markdown::view::tests::mermaid_fence_paints_a_diagram_and_unparsable_source_stays_code drives the real root list the way the app does and asserts the contract: a parsable fence paints a diagram and no code lines, and an unparsable fence stays a code block.

Checks run

  • cargo fmt --all --check, cargo clippy -p tcode-ui --all-targets --locked -- -D warnings, cargo test -p tcode-ui --locked (285 passed, including locale parity): pass
  • cargo check -p tcode-web --target wasm32-unknown-unknown, cargo check -p tcode-ios --target aarch64-apple-ios-sim, cargo machete: pass
  • Visual: gallery example in light and dark at 980px, diagram text and edges render and match the theme (macOS). Android not exercised.

Notes

  • First render on a machine loads system fonts for text metrics (about 200 ms once); the engine then caches the face under ~/.cache/mmdr and later first renders take about 15 ms. Subsequent renders are sub-millisecond and cached per source text.
  • Fuzzed every character prefix of eleven diagram types through the renderer: no panics.

A ```mermaid fence lays its source out to SVG with mermaid-rs-renderer and
paints it through GPUI's image pipeline, themed light or dark with the shell.
Source that does not parse, the usual state of a fence still streaming in,
stays a code block; the diagram keeps the code block's copy-source context
menu and opens in the image lightbox on click. The highlight cache's bounded
LRU is shared with the diagram cache as RecentCache.
@Tryanks
Tryanks enabled auto-merge October 3, 2026 03:22
@Tryanks
Tryanks merged commit 3cd4b94 into main Oct 3, 2026
13 of 14 checks passed
@Tryanks
Tryanks deleted the feat/markdown-mermaid branch October 3, 2026 03:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant