langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

LLM node outputs mermaid graph with error message #13752

New Issue
Closed
opened 2026-02-21 19:13:41 -05:00 by yindo · 11 comments
yindo commented 2026-02-21 19:13:41 -05:00
Owner
Copy Link
Copy Source

Originally created by @love01211 on GitHub (May 10, 2025).

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

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

Image

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

Originally created by @love01211 on GitHub (May 10, 2025). ### Self Checks - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [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** ![Image](https://github.com/user-attachments/assets/b2accad5-b669-487a-81ab-595709fdd48f) ## 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_
yindo added the 🐞 bug🙏 help wanted labels 2026-02-21 19:13:41 -05:00
yindo closed this issue 2026-02-21 19:13:41 -05:00
yindo commented 2026-02-21 19:13:41 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (May 10, 2025):

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

@dosubot[bot] commented on GitHub (May 10, 2025): <!-- Answer --> 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 <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/base/mermaid/utils.ts)</sup>. 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. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/f5954bec-799c-44ae-9b21-c81c893a453c?feedback_type=other)</sup>
yindo commented 2026-02-21 19:13:41 -05:00
Author
Owner
Copy Link
Copy Source

@love01211 commented on GitHub (May 10, 2025):

This answer is not helpful at all

@love01211 commented on GitHub (May 10, 2025): This answer is not helpful at all
yindo commented 2026-02-21 19:13:41 -05:00
Author
Owner
Copy Link
Copy Source

@crazywoola commented on GitHub (May 10, 2025):

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

@crazywoola commented on GitHub (May 10, 2025): Can you clarify the version number? Since we do not have `1.13.0`.
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@love01211 commented on GitHub (May 10, 2025):

@crazywoola sorry,version is 1.3.0

@love01211 commented on GitHub (May 10, 2025): @crazywoola sorry,version is 1.3.0
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@water-in-stone commented on GitHub (May 10, 2025):

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

@water-in-stone commented on GitHub (May 10, 2025): How can I reproduce this issue with your DSL? 基于你的DSL 我要如何复现问题？
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@love01211 commented on GitHub (May 10, 2025):

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

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

@love01211 commented on GitHub (May 10, 2025): > How can I reproduce this issue with your DSL? 基于你的DSL 我要如何复现问题？ 导入后，任意问一个问题，应该会生成一个饼图，但是会有提示报错
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@opswfit commented on GitHub (May 19, 2025):

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

Image

@opswfit commented on GitHub (May 19, 2025): Version v1.4.0 also reports the same error when using mermaid code to create ![Image](https://github.com/user-attachments/assets/92558bb5-6135-47ca-bfc5-48ecc19bfb30)
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@scxhwhb commented on GitHub (May 21, 2025):

Image

@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.

@scxhwhb commented on GitHub (May 21, 2025): ![Image](https://github.com/user-attachments/assets/3f953e9f-1756-4e94-a700-d858cc323e86) @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.
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@crazywoola commented on GitHub (May 22, 2025):

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

@crazywoola commented on GitHub (May 22, 2025): I see a PR related to this part https://github.com/langgenius/dify/issues/20100. @scxhwhb
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@love01211 commented on GitHub (May 27, 2025):

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

@love01211 commented on GitHub (May 27, 2025): @crazywoola hi，update 1.4.1 version ,echarts Solved,but mermaid graph same question,
yindo commented 2026-02-21 19:13:42 -05:00
Author
Owner
Copy Link
Copy Source

@water-in-stone commented on GitHub (Jun 2, 2025):

@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

@water-in-stone commented on GitHub (Jun 2, 2025): > [@crazywoola](https://github.com/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
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug 🙏 help wanted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#13752
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?