Mermaid rendering error due to line break(both "<br>" and "\n") in node content.

[WangJian-omo]

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Dify version

0.15.1

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

Mermaid flowchart rendered in neither flow-type or chat apps always failed due to the existence of line break(
, "\n") in mermaid code.

1. Error page when open the failed SVG file locally:
Error Info:

This page contains the following errors:
error on line 1 at column 8476: Opening and ending tag mismatch: br line 1 and p
Below is a rendering of the page up to the first error.

Screenshot:
https://img.picui.cn/free/2025/02/10/67a9bf2b85f7b.jpeg

2. Failed example in Chat App:
Sample code:

graph TD
    A[用户<br>开始操作] --> B[系统<br>接收请求]
    B --> C[验证<br>用户信息]
    C --> D[处理<br>请求]
    D --> E[返回<br>结果]

screenshot of failed page: https://img.picui.cn/free/2025/02/10/67a9bf2bbebd7.jpeg
screenshot of failed code: https://img.picui.cn/free/2025/02/10/67a9bf2bc93fa.jpeg

In other situations, mermaid code can rendered properly without any line break.

✔️ Expected Behavior

Mermaid code with line breaks rendered correctly.

❌ Actual Behavior

No response

[dosubot]

Hey, @KrianJ! 👋 I'm here to help you with any bugs, questions, or contributions you have for the project. Let's squash those bugs together!

The issue you're encountering with Mermaid rendering errors due to line breaks in node content is a known problem. Mermaid diagrams can sometimes have trouble processing HTML tags like <br> or escape sequences like \n within node labels.

To address this, you can try the following workaround:

1. Use \n for Line Breaks: Instead of using <br>, use \n within your Mermaid code. This is the recommended way to handle line breaks in Mermaid diagrams.

2. Check Mermaid Version: Ensure that you are using a version of Mermaid that supports the features you need. Sometimes, updating to the latest version can resolve rendering issues.

3. Configuration Settings: Review the Mermaid configuration settings in your Dify setup. The mermaid.initialize function allows you to set various options that might affect rendering. Ensure that these settings are correctly configured for your use case ^[1].

If these steps do not resolve the issue, it might be necessary to look into the specific Mermaid version used in your Dify setup or consider reporting this as a bug if it persists across different environments.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[WangJian-omo]

Noticed that dify 0.15.1 using mermaid 11.4.1 package in web. But i tried the same mermaid code in online editor with same version, which works as normal.

[haocheng6]

I can reproduce the issue when the message contains <br>. However, when "\n" is present, the SVG renders it verbatim, which aligns with the behavior of the Mermaid Live Editor, as shown in the screenshot below. Could you confirm whether the issue also affects messages containing newline characters?

[WangJian-omo]

I can reproduce the issue when the message contains <br>. However, when "\n" is present, the SVG renders it verbatim, which aligns with the behavior of the Mermaid Live Editor, as shown in the screenshot below. Could you confirm whether the issue also affects messages containing newline characters?

Sure, sry for the vague description of the rendering error cause by '\n'. The problem of line break should be:
The line break is not explicitly present within the node content; instead, it divides the text content within a single node into several lines through line breaks.

Sample mermaid for test:

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me
 think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Loading

In this case, some reproducible screenshots provided below:
err code: https://img.picui.cn/free/2025/02/17/67b29a035c61a.jpeg
err page: https://img.picui.cn/free/2025/02/17/67b29a035ce5b.jpeg

[haocheng6]

Thanks for the clarification, @KrianJ! #13792 should address both cases. Now we just need a review from the maintainers.

[crazywoola]

Sorry for the late response, busy fixing these bugs, I have approved the PR.