feat(ui): add lazy-loaded mermaid diagram rendering#23475
Conversation
|
Hi @StrikeOner, thanks for your contribution! Per our contribution guidelines, the automated PR checker found the following issue(s) that need your attention:
Please note that maintainers reserve the right to make final decisions on PRs. If you believe there is a mistake, please comment below. |
- add mermaid-pre rehype plugin for detecting mermaid code blocks - integrate plugin into MarkdownContent component - add mermaid dependency to package.json chore: add mermaid patch file for standalone distribution docs: add README for mermaid patch chore: remove patches folder (not for upstream)
|
In action: 
|
|
Very nice! I wanted to implement Mermaid for quite some time. Will review, test a bit and get back to u |
allozaur
left a comment
allozaur
left a comment
There was a problem hiding this comment.
Just QA'ed it and before we dive into the code review, I think these things should be addressed:
- The chart item in the MarkdownContent should be zoomable/draggable
- We also need to reuse this component inside of
DialogMermaidPreview.sveltecomponent to have a full screen preview of mermaid chart with the standard controls - I think it'd be a better UX to see some skeleton UI loading in the place of the chart rather than have a streamed text block that then jumps to change into a Mermaid render when finished.
Lemme know if this is sth you feel confident with implementing or if i should take over this.
|
Created #23477 to track this feature |
|
heya, thanks for the fast feedback. according the feature requests: 2. and 3. shouldnt be a problem i think ( will look into them tonight ) but i dont see anything where and how the drag and drop/zoom function is implemented so far. did i miss something? do you have something special in mind for that? |
I can take care of no. 1 later, no problem. |
|
Points 1 and 2 are done — inline zoom/drag is working and I've added On the skeleton UI — I did experiment with it but landed on keeping the raw syntax visible during streaming instead. My concern is that LLMs fairly often produce invalid or incomplete Mermaid syntax, and a skeleton placeholder doesn't communicate anything useful in those failure cases. The raw code at least tells the user what was generated. Once the stream completes and syntax is valid, the diagram snaps in cleanly which feels acceptable to me. That said if you have a specific approach in mind for handling the failure states gracefully I'm open to it — just didn't want to ship a skeleton that silently fails. |
|
@allozaur sorry for my late reply, i unfortunately will be out of a computer for some days, how many is not realy clear right now (can be days or months). if you want to overtake, do it, its yours! it would be nice to see this feature added when i return to my computer. |
sure thing! will do :) thanks for the heads up and good luck with whatever u have in the meantime :) |
|
Superseded by #24032 |
2 participants
Overview
What this does
Close #23477
Adds Mermaid diagram rendering to the built-in server UI. Code blocks annotated with
```mermaidare rendered as interactive diagrams client-side instead of displaying raw text.To keep the loading time as is mermaid is loaded lazily - only when a mermaid diagram is actually present in the response. Conversations without diagrams pay zero cost.
Implementation
mermaidnpm dependency added totools/ui/package.jsonmermaid-pre.ts— rehype plugin that converts```mermaidblocks into<pre class="mermaid">elements, runs beforerehypeEnhanceCodeBlocksmermaid.run()is called post-stream to avoid rendering partial syntax during generationRequirements
All code has been reviewed, tested, and is understood by me.