github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-03-18 04:51:23 -05:00
Code Issues 308 Packages Projects Releases 100 Wiki Activity

feat: rendering Mermaid diagrams in the chat response #923

New Issue
Closed
opened 2025-11-11 14:33:46 -06:00 by GiteaMirror · 5 comments
GiteaMirror commented 2025-11-11 14:33:46 -06:00
Owner
Copy Link

Originally created by @joelmnz on GitHub (May 15, 2024).

Is your feature request related to a problem? Please describe.
I'm always frustrated when I need to copy generated Mermaid script from the chat window into Mermaid Live just to see the diagram.

Describe the solution you'd like
It would be amazing if the chat renderer could detect the Mermaid script tag and render the diagram using Mermaid.js.
This feature could be enabled or disabled via a user setting or controlled by an inline toggle in the chat when you hover over the Mermaid script. This setting should be sticky, remembering the last used preference.

Basically, I'm looking for the "Diagram" feature from big-aig

Describe alternatives you've considered
The only alternative I've found is to copy and paste the generated Mermaid code from the chat into an online renderer.

Additional context
This project is great, and I am looking forward to seeing how it evolves.

Originally created by @joelmnz on GitHub (May 15, 2024). **Is your feature request related to a problem? Please describe.** I'm always frustrated when I need to copy generated Mermaid script from the chat window into Mermaid Live just to see the diagram. **Describe the solution you'd like** It would be amazing if the chat renderer could detect the Mermaid script tag and render the diagram using Mermaid.js. This feature could be enabled or disabled via a user setting or controlled by an inline toggle in the chat when you hover over the Mermaid script. This setting should be sticky, remembering the last used preference. > Basically, I'm looking for the "Diagram" feature from big-aig **Describe alternatives you've considered** The only alternative I've found is to copy and paste the generated Mermaid code from the chat into an online renderer. **Additional context** This project is great, and I am looking forward to seeing how it evolves.
GiteaMirror commented 2025-11-11 14:33:47 -06:00
Author
Owner
Copy Link

@newzealandpaul commented on GitHub (May 29, 2024):

This is support in some LLM clients. It is a very useful feature. Is there a plugin interface to open-webui to enable content filters?

@newzealandpaul commented on GitHub (May 29, 2024): This is support in some LLM clients. It is a very useful feature. Is there a plugin interface to open-webui to enable content filters?
GiteaMirror commented 2025-11-11 14:33:47 -06:00
Author
Owner
Copy Link

@tjbck commented on GitHub (May 29, 2024):

@newzealandpaul We're planning on pushing our plugin framework Pipelines to allow such actions, stay tuned!

@tjbck commented on GitHub (May 29, 2024): @newzealandpaul We're planning on pushing our plugin framework [Pipelines](https://github.com/open-webui/pipelines) to allow such actions, stay tuned!
GiteaMirror commented 2025-11-11 14:33:47 -06:00
Author
Owner
Copy Link

@newzealandpaul commented on GitHub (May 29, 2024):

@tjbck great! I Looked at the example, does it allow modifying how LLM responses are rendered?

Here is an example conversation below. Ideally some JS could be inserted inside the web ui that simply renders a mermaid chart above or below the response. Just like how GitHub issues does it.

User: Generate a mermaid 10.0.7 diagram showing relationships inside a transformer neural network

Assistant: Creating a diagram in Mermaid 10.0.7 to show the relationship in a Transformer Neural Network is a great idea. A Transformer model comprises an encoder and a decoder, with multiple layers for attention mechanism and feedforward neural networks. I'll outline a basic structure for you.

Here's the Mermaid diagram code to demonstrate the components and how they relate to each other:

graph TB
    subgraph Encoder Layer
        EncoderSelfAttention[Self-Attention Mechanism]
        EncoderAddNorm1[Add & Norm]
        EncoderFeedForward[Feed Forward Network]
        EncoderAddNorm2[Add & Norm]
        Encoder1((Encoder Layer n))

        EncoderSelfAttention --> EncoderAddNorm1
        EncoderAddNorm1 --> EncoderFeedForward
        EncoderFeedForward --> EncoderAddNorm2
        EncoderAddNorm2 --> Encoder1
    end
    
    subgraph Decoder Layer
        DecoderSelfAttention[Masked Self-Attention Mechanism]
        DecoderAddNorm1[Add & Norm]
        EncoderDecoderAttention[Encoder-Decoder Attention]
        DecoderAddNorm2[Add & Norm]
        DecoderFeedForward[Feed Forward Network]
        DecoderAddNorm3[Add & Norm]
        Decoder1((Decoder Layer n))

        DecoderSelfAttention --> DecoderAddNorm1
        DecoderAddNorm1 --> EncoderDecoderAttention
        EncoderDecoderAttention --> DecoderAddNorm2
        DecoderAddNorm2 --> DecoderFeedForward
        DecoderFeedForward --> DecoderAddNorm3
        DecoderAddNorm3 --> Decoder1
    end
    
    Input -->|Token Embedding + Positional Encoding| Encoder1
    Encoder1 -->|Output of Encoder Layer n| Decoder1
    Decoder1 -->|Output of Decoder Layer n| Linear
    Linear --> Softmax
    Softmax --> Output

    style Input fill:#f9f,stroke:#333,stroke-width:2px;
    style Output fill:#f9f,stroke:#333,stroke-width:2px;

Here's the Mermaid diagram code to demonstrate the components and how they relate to each other:

'''mermaid
graph TB
subgraph Encoder Layer
EncoderSelfAttention[Self-Attention Mechanism]
EncoderAddNorm1[Add & Norm]
EncoderFeedForward[Feed Forward Network]
EncoderAddNorm2[Add & Norm]
Encoder1((Encoder Layer n))

    EncoderSelfAttention --> EncoderAddNorm1
    EncoderAddNorm1 --> EncoderFeedForward
    EncoderFeedForward --> EncoderAddNorm2
    EncoderAddNorm2 --> Encoder1
end

subgraph Decoder Layer
    DecoderSelfAttention[Masked Self-Attention Mechanism]
    DecoderAddNorm1[Add & Norm]
    EncoderDecoderAttention[Encoder-Decoder Attention]
    DecoderAddNorm2[Add & Norm]
    DecoderFeedForward[Feed Forward Network]
    DecoderAddNorm3[Add & Norm]
    Decoder1((Decoder Layer n))

    DecoderSelfAttention --> DecoderAddNorm1
    DecoderAddNorm1 --> EncoderDecoderAttention
    EncoderDecoderAttention --> DecoderAddNorm2
    DecoderAddNorm2 --> DecoderFeedForward
    DecoderFeedForward --> DecoderAddNorm3
    DecoderAddNorm3 --> Decoder1
end

Input -->|Token Embedding + Positional Encoding| Encoder1
Encoder1 -->|Output of Encoder Layer n| Decoder1
Decoder1 -->|Output of Decoder Layer n| Linear
Linear --> Softmax
Softmax --> Output

style Input fill:#f9f,stroke:#333,stroke-width:2px;
style Output fill:#f9f,stroke:#333,stroke-width:2px;

'''

@newzealandpaul commented on GitHub (May 29, 2024): @tjbck great! I Looked at the example, does it allow modifying how LLM responses are rendered? Here is an example conversation below. Ideally some JS could be inserted inside the web ui that simply renders a mermaid chart above or below the response. Just like how GitHub issues does it. **User**: Generate a mermaid 10.0.7 diagram showing relationships inside a transformer neural network **Assistant**: Creating a diagram in Mermaid 10.0.7 to show the relationship in a Transformer Neural Network is a great idea. A Transformer model comprises an encoder and a decoder, with multiple layers for attention mechanism and feedforward neural networks. I'll outline a basic structure for you. Here's the Mermaid diagram code to demonstrate the components and how they relate to each other: ```mermaid graph TB subgraph Encoder Layer EncoderSelfAttention[Self-Attention Mechanism] EncoderAddNorm1[Add & Norm] EncoderFeedForward[Feed Forward Network] EncoderAddNorm2[Add & Norm] Encoder1((Encoder Layer n)) EncoderSelfAttention --> EncoderAddNorm1 EncoderAddNorm1 --> EncoderFeedForward EncoderFeedForward --> EncoderAddNorm2 EncoderAddNorm2 --> Encoder1 end subgraph Decoder Layer DecoderSelfAttention[Masked Self-Attention Mechanism] DecoderAddNorm1[Add & Norm] EncoderDecoderAttention[Encoder-Decoder Attention] DecoderAddNorm2[Add & Norm] DecoderFeedForward[Feed Forward Network] DecoderAddNorm3[Add & Norm] Decoder1((Decoder Layer n)) DecoderSelfAttention --> DecoderAddNorm1 DecoderAddNorm1 --> EncoderDecoderAttention EncoderDecoderAttention --> DecoderAddNorm2 DecoderAddNorm2 --> DecoderFeedForward DecoderFeedForward --> DecoderAddNorm3 DecoderAddNorm3 --> Decoder1 end Input -->|Token Embedding + Positional Encoding| Encoder1 Encoder1 -->|Output of Encoder Layer n| Decoder1 Decoder1 -->|Output of Decoder Layer n| Linear Linear --> Softmax Softmax --> Output style Input fill:#f9f,stroke:#333,stroke-width:2px; style Output fill:#f9f,stroke:#333,stroke-width:2px; ``` Here's the Mermaid diagram code to demonstrate the components and how they relate to each other: > '''mermaid > graph TB > subgraph Encoder Layer > EncoderSelfAttention[Self-Attention Mechanism] > EncoderAddNorm1[Add & Norm] > EncoderFeedForward[Feed Forward Network] > EncoderAddNorm2[Add & Norm] > Encoder1((Encoder Layer n)) > > EncoderSelfAttention --> EncoderAddNorm1 > EncoderAddNorm1 --> EncoderFeedForward > EncoderFeedForward --> EncoderAddNorm2 > EncoderAddNorm2 --> Encoder1 > end > > subgraph Decoder Layer > DecoderSelfAttention[Masked Self-Attention Mechanism] > DecoderAddNorm1[Add & Norm] > EncoderDecoderAttention[Encoder-Decoder Attention] > DecoderAddNorm2[Add & Norm] > DecoderFeedForward[Feed Forward Network] > DecoderAddNorm3[Add & Norm] > Decoder1((Decoder Layer n)) > > DecoderSelfAttention --> DecoderAddNorm1 > DecoderAddNorm1 --> EncoderDecoderAttention > EncoderDecoderAttention --> DecoderAddNorm2 > DecoderAddNorm2 --> DecoderFeedForward > DecoderFeedForward --> DecoderAddNorm3 > DecoderAddNorm3 --> Decoder1 > end > > Input -->|Token Embedding + Positional Encoding| Encoder1 > Encoder1 -->|Output of Encoder Layer n| Decoder1 > Decoder1 -->|Output of Decoder Layer n| Linear > Linear --> Softmax > Softmax --> Output > > style Input fill:#f9f,stroke:#333,stroke-width:2px; > style Output fill:#f9f,stroke:#333,stroke-width:2px; > ''' >
GiteaMirror commented 2025-11-11 14:33:47 -06:00
Author
Owner
Copy Link

@newzealandpaul commented on GitHub (May 29, 2024):

Mermaid as generated by GPT4 start with the following (where ' is a `)

'''mermaid

Its very hard showing this in Github issues because Github aggressively renders mermaid

@newzealandpaul commented on GitHub (May 29, 2024): Mermaid as generated by GPT4 start with the following (where ' is a `) '''mermaid Its very hard showing this in Github issues because Github aggressively renders mermaid
GiteaMirror commented 2025-11-11 14:33:47 -06:00
Author
Owner
Copy Link

@tjbck commented on GitHub (Jun 3, 2024):

Added to dev, releasing 0.2.2 soon!

image

@tjbck commented on GitHub (Jun 3, 2024): Added to dev, releasing 0.2.2 soon! ![image](https://github.com/open-webui/open-webui/assets/25473318/fbb70c11-e051-4bce-99d6-49e33ff51abf)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#923
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?