Feature Request: Add Mermaid Renderer Support in Chat Window

[snowfluke]

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

https://mermaid.js.org/

Additional Context

No response

[aibysid]

Hi @snowfluke was exploring this project this looks like something that might help me as well. will create a PR for this.

[snowfluke]

@aibysid yepp it will definitely help, here im experimenting it as well, but I think I'll leave the PR for the appropriate people as Im not confident in following the coding standard

Maybe we should need to enforce the agent at following the syntax correctly