dify icon indicating copy to clipboard operation
dify copied to clipboard

The Mermaid diagram cannot be displayed properly

Open rechardwang opened this issue 8 months ago • 3 comments

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

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

If I use a slightly more complex code, it will throw an error, but this code can be fully displayed in https://mermaid.live/, please help me see what the problem is

Image

```mermaid
graph TD
    classDef structure fill:#e6f7ff,stroke:#3399ff
    classDef mechanism fill:#e6ffe6,stroke:#33cc33
    classDef effect fill:#fff5e6,stroke:#ff9933
    classDef application fill:#f9e6ff,stroke:#cc33ff
    subgraph "聚二甲基硅氧烷(PDMS)结构特性"
        A["化学结构:重复-O-Si(CH3)2-单元"]:::structure
        B["分子量:100-10000 Da"]:::structure
        C["性质:疏水/低表面张力"]:::structure
    end
    subgraph "作用层级与靶点"
        D["皮肤屏障系统"]:::mechanism
        E["毛发表面"]:::mechanism
        A -->|"高分子量<br>线性结构"| D
        A -->|"低粘度特性"| E
    end
    subgraph "分子作用机制"
        F["物理屏障形成"]:::mechanism
        G["摩擦系数降低"]:::mechanism
        D --> F
        E --> G
        F -->|"膜层氧渗透率>10000 Barrer"| H["透氧不透水"]:::effect
        G -->|"摩擦系数<0.1"| I["顺滑触感"]:::effect
    end
    subgraph "生物学效应"
        H --> J["减少TEWL(经皮水分流失)"]:::effect
        J -->|"24小时角质层含水量+30%"| K["长效保湿"]:::effect
        I --> L["梳理阻力降低50%"]:::effect
    end
    subgraph "应用场景"
        M["护肤:防晒/保湿霜膜架构"]:::application
        N["护发:洗发水顺滑剂"]:::application
        K --> M
        L --> N
    end
    style A stroke-width:2px
    style D stroke-dasharray:5 5
    linkStyle 0 stroke:#3399ff,stroke-width:2px
    linkStyle 3 stroke:#33cc33,stroke-width:1.5px



An error is displayed in dify

<img width="591" alt="Image" src="https://github.com/user-attachments/assets/bd32f2bb-b7e7-4630-a254-6e217d776fc0" />


### ✔️ Expected Behavior

_No response_

### ❌ Actual Behavior

_No response_

rechardwang avatar Apr 28 '25 02:04 rechardwang

nope

hacksider avatar Apr 29 '25 14:04 hacksider