run-llama/chat-ui
1
0
Fork 0
mirror of https://github.com/run-llama/chat-ui.git synced 2026-07-21 03:15:21 -04:00
Code Issues 13 Packages Projects Releases 10 Wiki Activity

[PR #85] [MERGED] Feature/mermaid support #107

New Issue
Closed
opened 2026-02-16 03:15:11 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 03:15:11 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/run-llama/chat-ui/pull/85
Author: @chiradeepv
Created: 5/12/2025
Status: ✅ Merged
Merged: 5/27/2025
Merged by: @marcusschiesser

Base: main ← Head: feature/mermaid-support

📝 Commits (10+)

  • 9b55efd feat: integrate Mermaid for diagram rendering in chat UI
  • 769dac4 revert tsconfig change
  • e56a961 handle inevitable mermaid errors when generated by llm
  • f0614fb formatting
  • 7da0a18 refactor: move mermaid out of codeblock
  • f5a007b refactor: move mermaid out of codeblock
  • a17f681 make mermaid dependency a peer
  • 24a9017 make mermaid dependency a peer
  • 0f0217e refactor mermaid demo to its own page
  • 2423ea4 refactor mermaid support

📊 Changes

14 files changed (+2212 additions, -1290 deletions)

View changed files

➕ .changeset/social-jokes-design.md (+6 -0)
📝 README.md (+4 -0)
➕ apps/web/app/demo/mermaid/mermaid-diagram.tsx (+166 -0)
➕ apps/web/app/demo/mermaid/page.tsx (+132 -0)
📝 apps/web/app/page.tsx (+5 -0)
➕ apps/web/components/ui/button.tsx (+59 -0)
📝 apps/web/package.json (+5 -3)
📝 packages/chat-ui/package.json (+19 -19)
📝 packages/chat-ui/src/chat/chat-message.tsx (+7 -1)
📝 packages/chat-ui/src/widgets/index.tsx (+1 -1)
📝 packages/chat-ui/src/widgets/markdown.tsx (+17 -2)
📝 packages/chat-ui/tsconfig.json (+1 -1)
➖ packages/chat-ui/tsup.config.js (+0 -25)
📝 pnpm-lock.yaml (+1790 -1238)

📄 Description

Add Mermaid Diagram Rendering and SVG Download to CodeBlock

Summary

This PR adds robust support for rendering Mermaid diagrams in code blocks within the chat UI. It also introduces the ability to download rendered Mermaid diagrams as SVG files, and provides user-friendly error handling for invalid Mermaid syntax.

Features

  • Mermaid Diagram Rendering:

    • Code blocks with language="mermaid" are now rendered as diagrams using Mermaid.js.

  • SVG Download:

    • Users can download rendered Mermaid diagrams as SVG files via a dedicated button in the code block header.
    • The default file extension for Mermaid downloads is .mmd.

  • Error Handling:

    • If Mermaid rendering fails (e.g., due to syntax errors), a clear, styled error message is displayed in the code block area instead of a blank or broken diagram.

Closes: #83
Type: Feature

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/run-llama/chat-ui/pull/85 **Author:** [@chiradeepv](https://github.com/chiradeepv) **Created:** 5/12/2025 **Status:** ✅ Merged **Merged:** 5/27/2025 **Merged by:** [@marcusschiesser](https://github.com/marcusschiesser) **Base:** `main` ← **Head:** `feature/mermaid-support` --- ### 📝 Commits (10+) - [`9b55efd`](https://github.com/run-llama/chat-ui/commit/9b55efd6529d3a0c7c3598771edcb785373635a0) feat: integrate Mermaid for diagram rendering in chat UI - [`769dac4`](https://github.com/run-llama/chat-ui/commit/769dac4bef0faf1ca5a1211eda1c1837a196361c) revert tsconfig change - [`e56a961`](https://github.com/run-llama/chat-ui/commit/e56a961d09154053f7f00e3775c0b1bb66a1c281) handle inevitable mermaid errors when generated by llm - [`f0614fb`](https://github.com/run-llama/chat-ui/commit/f0614fb831d9cca69520c621259dca69a28f177f) formatting - [`7da0a18`](https://github.com/run-llama/chat-ui/commit/7da0a18e4ce2d5e95a43ad398e4a5bb96a7a0d90) refactor: move mermaid out of codeblock - [`f5a007b`](https://github.com/run-llama/chat-ui/commit/f5a007b156ee565fc25e1af7f2adb590b351ef2e) refactor: move mermaid out of codeblock - [`a17f681`](https://github.com/run-llama/chat-ui/commit/a17f6817cedaab98d6523cc389e9876a073e461d) make mermaid dependency a peer - [`24a9017`](https://github.com/run-llama/chat-ui/commit/24a901720834178b20566049033ddda87fd0411e) make mermaid dependency a peer - [`0f0217e`](https://github.com/run-llama/chat-ui/commit/0f0217e57088e380cf7b758b67844a532ecf260e) refactor mermaid demo to its own page - [`2423ea4`](https://github.com/run-llama/chat-ui/commit/2423ea40c013c165df69de3ad5c9f06c42db043c) refactor mermaid support ### 📊 Changes **14 files changed** (+2212 additions, -1290 deletions) <details> <summary>View changed files</summary> ➕ `.changeset/social-jokes-design.md` (+6 -0) 📝 `README.md` (+4 -0) ➕ `apps/web/app/demo/mermaid/mermaid-diagram.tsx` (+166 -0) ➕ `apps/web/app/demo/mermaid/page.tsx` (+132 -0) 📝 `apps/web/app/page.tsx` (+5 -0) ➕ `apps/web/components/ui/button.tsx` (+59 -0) 📝 `apps/web/package.json` (+5 -3) 📝 `packages/chat-ui/package.json` (+19 -19) 📝 `packages/chat-ui/src/chat/chat-message.tsx` (+7 -1) 📝 `packages/chat-ui/src/widgets/index.tsx` (+1 -1) 📝 `packages/chat-ui/src/widgets/markdown.tsx` (+17 -2) 📝 `packages/chat-ui/tsconfig.json` (+1 -1) ➖ `packages/chat-ui/tsup.config.js` (+0 -25) 📝 `pnpm-lock.yaml` (+1790 -1238) </details> ### 📄 Description ## Add Mermaid Diagram Rendering and SVG Download to CodeBlock ### Summary This PR adds robust support for rendering Mermaid diagrams in code blocks within the chat UI. It also introduces the ability to download rendered Mermaid diagrams as SVG files, and provides user-friendly error handling for invalid Mermaid syntax. --- ### Features - **Mermaid Diagram Rendering:** - Code blocks with `language="mermaid"` are now rendered as diagrams using Mermaid.js. - **SVG Download:** - Users can download rendered Mermaid diagrams as SVG files via a dedicated button in the code block header. - The default file extension for Mermaid downloads is `.mmd`. - **Error Handling:** - If Mermaid rendering fails (e.g., due to syntax errors), a clear, styled error message is displayed in the code block area instead of a blank or broken diagram. --- **Closes:** #83 **Type:** Feature --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-16 03:15:11 -05:00
yindo closed this issue 2026-02-16 03:15:11 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: run-llama/chat-ui#107
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?