Skip to content

feat(web): render Mermaid diagrams in chat messages#1789

Open
luzhongqiu wants to merge 4 commits intoMoonshotAI:mainfrom
luzhongqiu:feat/web-mermaid
Open

feat(web): render Mermaid diagrams in chat messages#1789
luzhongqiu wants to merge 4 commits intoMoonshotAI:mainfrom
luzhongqiu:feat/web-mermaid

Conversation

@luzhongqiu
Copy link
Copy Markdown
Contributor

@luzhongqiu luzhongqiu commented Apr 8, 2026

Summary

This PR adds Mermaid rendering support to Kimi Web chat messages.

Previously, Mermaid fenced code blocks in chat were displayed as plain code blocks, so flowcharts and other Mermaid diagrams could not be rendered inline in the web UI.

What Changed

  • detect mermaid fenced code blocks in the existing chat markdown/code-block rendering path
  • render Mermaid diagrams inline with a dedicated client-side Mermaid component
  • keep existing code block affordances such as copy/download for Mermaid content
  • add a safe fallback that shows the Mermaid source when rendering fails
  • add a preview screenshot for the rendered result

User Impact

Users can now paste or receive Mermaid flowcharts directly in Kimi Web chats and see them rendered as diagrams instead of raw code.

Screenshot

Mermaid render preview

Validation

  • npm --prefix web run typecheck
  • npm --prefix web run build
  • manual verification in uv run kimi web

Notes

  • npm --prefix web run lint still reports two pre-existing unrelated Biome issues in web/src/features/chat/components/approval-dialog.tsx and web/src/features/chat/components/session-files-panel.tsx.

Open with Devin

@luzhongqiu luzhongqiu changed the title [codex] feat(web): render Mermaid diagrams in chat messages feat(web): render Mermaid diagrams in chat messages Apr 8, 2026
@luzhongqiu luzhongqiu marked this pull request as ready for review April 8, 2026 05:10
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a47c936b6d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.

Open in Devin Review

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