Skip to content

feat: render Mermaid diagrams with an interactive viewer - #7

Merged
jamesainslie merged 3 commits into
mainfrom
render-mermaid-diagrams
Sep 8, 2026
Merged

jamesainslie merged 3 commits into
mainfrom
render-mermaid-diagrams

Conversation

@jamesainslie

@jamesainslie jamesainslie commented Sep 8, 2026 •

Copy link
Copy Markdown
Owner

Mermaid fences currently appear as raw code in chat, and large diagrams cannot be inspected comfortably. This adds themed inline rendering and an expanded viewer with fit, center, pan, zoom, mouse, touch, and keyboard controls across web, desktop, and mobile.

Invalid diagrams retain their source and expose retry and a repair draft action. Streaming fences wait until complete. Rendering is lazy, cached, isolated in SVG images, and bundled locally for mobile use without a CDN.

The commits separate shared rendering and dependency setup, web integration, and mobile integration.

Validation: 54 focused tests passed, scoped web/mobile/client-runtime typechecks and formatting passed, and web production build plus Android Expo export succeeded. Browser checks covered both themes, pan/zoom, keyboard focus and Escape, invalid source, and repair drafts. The exported mobile DOM viewer passed offline rendering and touch-pinch checks; a native device or simulator was not available.

Visual evidence follows below.

Before After
Raw Mermaid fence Rendered inline diagram

Expanded diagram viewer

Invalid diagram recovery

Pan and zoom recording · Offline mobile DOM viewer capture

@jamesainslie
jamesainslie merged commit d407044 into main Sep 8, 2026
3 checks passed
@jamesainslie
jamesainslie deleted the render-mermaid-diagrams branch September 21, 2026 20: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