Skip to content

feat(client): render mermaid code blocks in comments - #477

Open
mosugi wants to merge 1 commit into
yoshiko-pg:mainfrom
mosugi:claude/mermaid-comment-support-yqfpkq
Open

mosugi wants to merge 1 commit into
yoshiko-pg:mainfrom
mosugi:claude/mermaid-comment-support-yqfpkq

Conversation

@mosugi

@mosugi mosugi commented Sep 25, 2026

Copy link
Copy Markdown

Summary

Implementation notes

  • src/client/components/CommentBodyRenderer.tsx: the pre renderer passes mermaid-language blocks to the existing MermaidDiagram component, wrapped in my-2 to match the spacing of other comment blocks
  • Reusing MermaidDiagram keeps the behavior identical to the file preview: mermaid is lazy-loaded, securityLevel: 'strict', the diagram follows the light/dark theme, and it falls back to the raw source when parsing fails
  • Empty mermaid blocks fall through to the existing empty-code-block path, same as in MarkdownDiffViewer

Screenshots

image

Test plan

  • Added tests in CommentBodyRenderer.test.tsx: a mermaid block renders as a diagram, and a parse error falls back to the source (mermaid is mocked as in MarkdownDiffViewer.test.tsx)
  • pnpm test — full Vitest suite passes (862 passed / 2 skipped)
  • pnpm check — oxlint type-aware checks pass
  • pnpm build — production build succeeds
  • Manually verified with --comment containing a mermaid block; the diagram renders inside the comment thread

Comment bodies now render fenced ```mermaid blocks as diagrams, matching
GitHub and the existing Markdown file preview. Reuses MermaidDiagram, so
theme switching and the fallback-to-source on parse errors behave the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DC3ZZGaUiyaYpb4F3Z864J
@mosugi

mosugi commented Sep 25, 2026

Copy link
Copy Markdown
Author

commentでもmermaidが表示できると嬉しいので、マージしてもらえると嬉しいです。レビューよろしくお願いします🙏

This branch has not been deployed

No deployments
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.

2 participants