Skip to content

feat(expert): render mermaid diagrams in messages - #9011

Open
andypalmi wants to merge 8 commits into
mainfrom
feat/expert-mermaid-diagrams
Open

andypalmi wants to merge 8 commits into
mainfrom
feat/expert-mermaid-diagrams

Conversation

@andypalmi

@andypalmi andypalmi commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Closes #9010
Closes FlowFuse/engineering#577
Closes FlowFuse/engineering#578

  1. Mermaid blocks in Expert messages are rendered as diagrams. The diagrams are generated in the backend and sent with the message, so the frontend ships no diagram library.
  2. Each diagram shows as soon as its closing fence has streamed in, so the first diagram of a message doesn't wait for the rest of the message.
  3. The diagram is styled with the FlowFuse theme colours and the SVG is sanitized before it is shown.
  4. The copy button copies the Mermaid source. A Code toggle switches between the diagram and the source.
  5. A diagram can be copied as SVG, copied as an image, or downloaded as a PNG. These buttons only appear when a diagram renders.
  6. Blocks without a rendered diagram keep showing the source.
  7. Mermaid code is syntax highlighted.
  8. Expert text streams about 12x faster.

Testing

  1. Unit tests for the markup and the mermaid highlighting.
  2. Manual check in the Expert chat against Expert dev.

Mermaid code blocks render as diagrams once streaming completes, with a copy button for the source and a toggle between the diagram and the source.
@andypalmi andypalmi self-assigned this Oct 21, 2026
@andypalmi
andypalmi requested a review from Steve-Mcl October 21, 2026 10:20
@codecov

codecov Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.46%. Comparing base (3ef2877) to head (7b9e098).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #9011   +/-   ##
=======================================
  Coverage   79.46%   79.46%           
=======================================
  Files         475      475           
  Lines       26028    26028           
  Branches     6938     6938           
=======================================
  Hits        20684    20684           
  Misses       5344     5344           
Flag Coverage Δ
backend 79.46% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

… speed up streaming

Add copy as SVG, copy as image and download PNG to rendered mermaid blocks, using the shared ff-btn styles. Diagrams render as soon as their closing fence has streamed in, and text streams several words per tick.
@andypalmi
andypalmi marked this pull request as draft October 21, 2026 10:52
…d of bundling mermaid

The Expert now sends each rendered diagram's SVG alongside the message, so the
frontend no longer needs the mermaid dependency. The SVG is sanitized, matched
to its code block by source, and recoloured with the FlowFuse theme variables.
… whitespace

Streaming collapses runs of whitespace in code, so the indented source of a block no longer equalled the source the diagram was rendered from.
The diagrams take their colours from variables, so one set of values follows the FlowFuse theme instead of overriding the diagram's own classes.
… highlight mermaid code

Mermaid blocks are now a plain code block variant. The Code toggle and export buttons are added once the diagram is shown and the toggle uses the hidden attribute, which removes the state-driven CSS and leaves other code blocks as they were. Mermaid sources get a highlight.js grammar.
@andypalmi
andypalmi marked this pull request as ready for review October 21, 2026 16:49
@andypalmi
andypalmi requested a review from cstns October 21, 2026 16:49

This branch was successfully deployed

1 active deployment
staging — 7b9e098c Deployed Oct 21, 2026 by andypalmi via Deploy application #12676
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render Mermaid diagrams in Expert messages

1 participant