Issue Station
Sign In
Tools hereToolbox

openclaw - ✅(Solved) Fix feat(webchat): 支持 mermaid 渲染 [3 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#48996•Fetched 2026-04-08 00:49:59
View on GitHub
Comments
0
Participants
1
Timeline
1
Reactions
0
Author
jiazhizhuojiazhizhuo
Participants
jiazhizhuojiazhizhuo
Timeline (top)
cross-referenced ×1

Fix Action

Fixed

PR fix notes

PR #49358: feat(webchat): add mermaid diagram support

Description (problem / solution / changelog)

Closes #48996

Summary

Add mermaid diagram rendering support to OpenClaw Web UI with interactive features.

Changes

  • ✅ Add mermaid.js dependency (v11.13.0)
  • ✅ Implement mermaid code block detection and rendering
  • ✅ Add copy-to-clipboard button for mermaid source code
  • ✅ Add collapsible source code view
  • ✅ Add error handling and user-friendly error messages
  • ✅ Optimize rendering timing with requestAnimationFrame
  • ✅ Add responsive styles for mermaid diagrams

Technical Details

  • Mermaid diagrams are rendered in markdown.ts using the official mermaid library
  • Rendering is triggered in app-lifecycle.ts after DOM updates
  • Global copy handler avoids inline event handlers for better security
  • SVG detection prevents duplicate rendering
  • Error states are gracefully handled with styled error messages

Testing

  • ✅ Build passes: pnpm build
  • ✅ No lint errors
  • ✅ TypeScript type checking passes

Screenshots

(Mermaid diagrams will render in the web UI when users send markdown with mermaid code blocks)

Example usage:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]

## Changed files

- `pnpm-lock.yaml` (modified, +26/-43)
- `ui/package.json` (modified, +5/-1)
- `ui/src/styles/components.css` (modified, +128/-0)
- `ui/src/ui/app-lifecycle.ts` (modified, +32/-1)
- `ui/src/ui/markdown.ts` (modified, +140/-0)
- `ui/src/ui/views/chat.ts` (modified, +2/-0)
RAW_BUFFERClick to expand / collapse

描述

在 webchat 对话框中支持 mermaid 图表渲染，方便用户展示流程图、时序图等。

期望行为

用户在对话中输入 mermaid 代码块时，能够自动渲染为图表。

参考

  • 现有 mermaid 相关 Issue: #7165, #15157
  • 文档中已有 mermaid 使用经验

可能的实现方式

  • 使用 mermaid.js 在前端渲染
  • 检测消息中的 ```mermaid 代码块

AI-assisted

extent analysis

Fix Plan

To support mermaid graph rendering in the webchat conversation box, we will use the mermaid.js library to render the graphs on the frontend. Here are the steps:

  • Detect mermaid code blocks in user input messages
  • Use mermaid.js to render the code blocks as graphs
  • Display the rendered graphs in the conversation box

Example Code

// Import mermaid.js library
import mermaid from 'mermaid';

// Function to render mermaid code block as graph
function renderMermaid(code) {
  const graph = mermaid.render('graph', code);
  return graph;
}

// Detect mermaid code blocks in user input messages
function detectMermaidCode(message) {
  const regex = /^```mermaid([\s\S]*?)```$/m;
  const match = message.match(regex);
  if (match) {
    const code = match[1];
    return code;
  }
  return null;
}

// Example usage
const message = '```mermaid\ngraph LR\nA --> B\n```';
const code = detectMermaidCode(message);
if (code) {
  const graph = renderMermaid(code);
  // Display the rendered graph in the conversation box
  console.log(graph);
}

Verification

To verify that the fix worked, test the following scenarios:

  • User inputs a valid mermaid code block
  • User inputs an invalid mermaid code block
  • User inputs a message without a mermaid code block

Check that the graph is rendered correctly in the conversation box for valid code blocks, and that an error message is displayed for invalid code blocks.

Extra Tips

  • Make sure to handle errors and exceptions properly when rendering the graphs
  • Consider adding a loading indicator or placeholder while the graph is being rendered
  • Refer to the mermaid.js documentation for more information on customizing the graph rendering options.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error#device allocation#model download#tokenizer error#prompt formatting#chain error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

openclaw - ✅(Solved) Fix feat(webchat): 支持 mermaid 渲染 [3 pull requests, 1 participants]