Skip to content

feat: add Mermaid diagram rendering in chat#101

Merged
nashsu merged 3 commits intonashsu:mainfrom
PengyiZhang:claude/mermaid-enhancement
May 1, 2026
Merged

feat: add Mermaid diagram rendering in chat#101
nashsu merged 3 commits intonashsu:mainfrom
PengyiZhang:claude/mermaid-enhancement

Conversation

@PengyiZhang
Copy link
Copy Markdown

Summary

  • Add Mermaid diagram rendering support in chat messages using react-markdown code block detection
  • Render diagrams lazily via IntersectionObserver to avoid layout shift on scroll
  • Support click-to-zoom overlay with +/- scaling controls for large diagrams

Test plan

  • Send a chat message containing a ```mermaid fenced code block (e.g. graph TD, sequenceDiagram) and verify it renders as an SVG diagram
  • Scroll a page with multiple mermaid diagrams — verify no layout jumping
  • Click a rendered diagram — verify fullscreen overlay opens with zoom controls
  • Test zoom in/out buttons and Esc to close
  • Verify non-mermaid code blocks still render normally

🤖 Generated with Claude Code

PyZhangBIT and others added 3 commits April 30, 2026 14:16
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…min-height)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@nashsu nashsu merged commit 7dc5eca into nashsu:main May 1, 2026
3 checks passed
nashsu added a commit that referenced this pull request May 1, 2026
PR #101's lockfile was based on 0.4.3 and bumped only to 0.4.4. After
merge, the lockfile's `version` field disagreed with package.json
(0.4.5) until the first local `npm install` reconciled it. Lock that
in so a fresh clone doesn't see drift.
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.

3 participants