Feature Request: Add Mermaid Renderer Support in Chat Window #5402
Description
Feature Description
Enable Mermaid.js rendering in the chat window so that Flowise can visualize charts and diagrams written using Mermaid syntax directly within chat responses.
Feature Category
UI/UX Improvement
Problem Statement
Currently, when an LLM or custom node outputs Mermaid syntax (e.g. mermaid graphs) in the chat window, it is displayed as plain text.
This limits the ability to present structured information visually such as flowcharts, sequence diagrams, mind maps, and other relationships that are naturally expressed with Mermaid.
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Fix it]
Instead of rendering as a diagram, the above appears as text.
Proposed Solution
Integrate Mermaid.js into the chat message renderer so that any Markdown code block with a mermaid language tag is rendered as a live diagram.
Example desired behavior:
When a node or LLM outputs:
graph TD
A[User Input] --> B[Flowise Node]
B --> C[LLM Response]
…it should render the corresponding diagram visually in the chat.
Mockups or References
Additional Context
No response