LLM node outputs mermaid graph with error message

[love01211]

Self Checks

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

Dify version

1.13.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

LLM node outputs mermaid graph with error message

Rendering chart failed, please refresh and try again

But after clicking on the app. theme. swithdark of the graphics generated by Mermaid, everything is normal

DSL：

app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  mode: advanced-chat
  name: mermaid测试
  use_icon_as_answer_icon: false
dependencies:
- current_identifier: null
  type: package
  value:
    plugin_unique_identifier: langgenius/localai:0.0.3@6df6f497c1a49f49fbed2ec17f1e9cc410fc16cbf62734f414daa1793af55d76
kind: app
version: 0.2.0
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      allowed_file_extensions:
      - .JPG
      - .JPEG
      - .PNG
      - .GIF
      - .WEBP
      - .SVG
      allowed_file_types:
      - image
      allowed_file_upload_methods:
      - local_file
      - remote_url
      enabled: false
      fileUploadConfig:
        audio_file_size_limit: 50
        batch_count_limit: 5
        file_size_limit: 50
        image_file_size_limit: 10
        video_file_size_limit: 100
        workflow_file_upload_limit: 10
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
      number_limits: 3
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInIteration: false
        isInLoop: false
        sourceType: start
        targetType: llm
      id: 1746864627560-source-1746866398886-target
      source: '1746864627560'
      sourceHandle: source
      target: '1746866398886'
      targetHandle: target
      type: custom
      zIndex: 0
    - data:
        isInIteration: false
        isInLoop: false
        sourceType: llm
        targetType: answer
      id: 1746866398886-source-answer-target
      source: '1746866398886'
      sourceHandle: source
      target: answer
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        desc: ''
        selected: false
        title: 开始
        type: start
        variables: []
      height: 53
      id: '1746864627560'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    - data:
        answer: '{{#1746866398886.text#}}'
        desc: ''
        selected: false
        title: 直接回复
        type: answer
        variables: []
      height: 104
      id: answer
      position:
        x: 994
        y: 299
      positionAbsolute:
        x: 994
        y: 299
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    - data:
        context:
          enabled: false
          variable_selector: []
        desc: ''
        model:
          completion_params: {}
          mode: chat
          name: Qwen3-4B
          provider: langgenius/localai/localai
        prompt_template:
        - id: b8642357-702d-4550-9f17-d5e41e7986f6
          role: system
          text: "你是一个乐于助人的助手，帮我生成随机的数字，并在Mermaid饼图中展示\n\npie\n%%{init: {'theme': 'base',\
            \ 'themeVariables': { 'pie1': '#5470c6', 'pie2': '#91cc75','pie3':'#fac858','pie4':'#ee6666','pie5':'#73c0de','pie6':'#3ba272','pie7':'#fc8452','pie8':'#9a60b4','pie9':'#ea7ccc'}}}%%\n\
            \    title \"专利类型分布\"\n    \"发明公开\" : 1794\n    \"发明授权\" : 325\n    \"\
            实用新型\" : 661"
        - id: fd6239da-f6bf-4ce9-9d74-8ac8915e0497
          role: user
          text: '{{#sys.query#}}'
        selected: false
        title: LLM
        type: llm
        variables: []
        vision:
          enabled: false
      height: 89
      id: '1746866398886'
      position:
        x: 589
        y: 287
      positionAbsolute:
        x: 589
        y: 287
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    viewport:
      x: -399.5
      y: 116.5
      zoom: 1

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

The issue you're experiencing with Mermaid chart rendering in Dify version 1.13.0 seems to be related to theme switching. When you switch to the dark theme, the charts render correctly. This suggests that the problem might be linked to how the theme affects the SVG attributes of the Mermaid charts. Specifically, the theme switching mechanism changes the stroke and fill colors of the SVG elements to match the theme's color scheme ^[1].

To address this, you might want to check the theme settings and ensure that the colors are correctly defined for both light and dark themes. Additionally, verify that the Mermaid initialization settings in your prompt template are correctly configured to handle theme variables. If the issue persists, consider reviewing the Mermaid configuration or updating the theme settings to ensure compatibility with the chart rendering process.

To continue talking to Dosu, mention @dosu.

---

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

[love01211]

This answer is not helpful at all

[crazywoola]

Can you clarify the version number? Since we do not have 1.13.0.

[love01211]

@crazywoola sorry,version is 1.3.0

[water-in-stone]

How can I reproduce this issue with your DSL? 基于你的DSL 我要如何复现问题？

[love01211]

How can I reproduce this issue with your DSL? 基于你的DSL 我要如何复现问题？

导入后，任意问一个问题，应该会生成一个饼图，但是会有提示报错

[opswfit]

Version v1.4.0 also reports the same error when using mermaid code to create

[scxhwhb]

@crazywoola I reported an error when using echarts on 1.4.0, but it worked fine on version 1.3.0. Perhaps they are not the same issue? I have found that it is caused by two commits of the markdown component, and I am not sure if one or both of them have an impact. When using streaming output and the output contains echarts blocks, an error will be reported, causing the chart to not be displayed.

[crazywoola]

I see a PR related to this part https://github.com/langgenius/dify/issues/20100. @scxhwhb

[love01211]

@crazywoola hi，update 1.4.1 version ,echarts Solved,but mermaid graph same question,

[water-in-stone]

@crazywoola hi，update 1.4.1 version ,echarts Solved,but mermaid graph same question,

How can I reproduce your problem with a specific DSL? @love01211