Skip to content

feat(ui): render mermaid diagrams in chat (experimental, admin opt-in)#25

Merged
albanm merged 21 commits into
mainfrom
feat-mermaid
Jun 16, 2026
Merged

feat(ui): render mermaid diagrams in chat (experimental, admin opt-in)#25
albanm merged 21 commits into
mainfrom
feat-mermaid

Conversation

@albanm

@albanm albanm commented Jun 16, 2026

Copy link
Copy Markdown
Member

Add experimental Mermaid diagram rendering to the agent chat UI, behind an
admin-only, per-user opt-in toggle.

What changed

  • New mermaid dependency (dynamically imported, kept out of the initial bundle).
  • Markdown renderer emits a <pre class="mermaid"> container for ```mermaid fences
    when the flag is on; a post-render pass (utils/mermaid.ts) turns each into an SVG
    independently, so one bad diagram can't break the rest of a message.
  • Mermaid theme variables are derived from the live Vuetify palette (incl. an
    xyChart block so xychart-beta plots/axes stay on-brand and legible).
  • New MarkdownContent.vue wrapper replaces the inline v-html render in
    AgentChatMessages; re-renders on stream end and theme change.
  • Inline error fallback for invalid diagrams with a "Fix this diagram" button that
    sends a correction turn (visible user message + hidden context built by
    formatMermaidFix).
  • mermaid few-shot (xychart-beta) appended to the system prompt when enabled.
  • Settings/debug dialog opened to all users (was admin-only); the mermaid toggle
    inside is gated behind isAdmin.
  • Unit tests for markdown rendering, theme-variable mapping, and formatMermaidFix;
    dev chat mocks gain a valid and an intentionally-invalid diagram.

Why: experiment with letting the assistant visualize quantitative data as charts
directly in the chat, without committing it to all users yet.

Regression risks:

  • Settings dialog opened to all users (AgentChatHeader lost v-if="isAdmin" on
    the cog). The dialog's Info tab is not gated — it now exposes the full system
    prompt and every tool's description + JSON input schema to any user, including
    anonymous/external users in embedded widgets. Previously this was reachable only by
    admins. Confirm this disclosure is intended; if only trace-consent settings were
    meant to be exposed, the Info tab (and tool-exploration toggle) should stay
    admin-gated.
  • Markdown rendering for assistant messages now flows through the new
    MarkdownContent.vue wrapper instead of inline v-html. Behavior should be
    identical when mermaid is off, but it's a shared rendering path for every message.
  • renderMarkdown/renderStreamingMarkdown gained an optional opts.mermaid arg
    backed by a module-level mermaidActive flag set synchronously before each parse.
    Safe today (only consumed by MarkdownContent, parsing is synchronous), but it is
    shared mutable state to keep in mind.

Cleanup (non-blocking):

  • AgentChatHeader isAdmin prop is now dead (and still passed from AgentChat.vue).
  • MarkdownContent.vue introduces one vue/no-v-html lint warning — the
    eslint-disable-next-line comment targets the <div> line, not the v-html
    attribute line, so it doesn't suppress.

albanm and others added 21 commits June 16, 2026 15:14
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
xychart-beta ignores the generic mermaid themeVariables and reads its own
nested xyChart block, so plots fell back to mermaid's default palette and the
title/axis text was near-invisible on the chat background. Drive its plot
colors from the theme primary/secondary and all text/axis colors from
on-surface, keeping XY charts on-brand and legible in light and dark mode.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
xychart-beta is the newest, least-represented mermaid syntax in model
training data — exactly the diagram type we prioritize — so models (and
especially smaller/local ones) often emit invalid xychart code. Anchor it
with one known-valid example in the system prompt; the well-known diagram
types still rely on the capability hint alone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mermaid rendering is still experimental, so restrict the opt-in to admins
(mirroring the tool-exploration pattern): hide the toggle in the settings
dialog for non-admins and gate the localStorage-backed flag on isAdmin. The
dialog itself stays open to all users (the trace-consent toggle still needs
to be reachable by everyone).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Permanent manual-testing fixture: visualizes the PM2.5 per-station averages
already in the mock conversation as an xychart-beta, so the mermaid rendering
path is easy to exercise on the _dev/chat page (toggle the experimental
Mermaid option on).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Standing fixture for the inline render error and the "Corriger ce diagramme"
fix button. Clearly labelled and commented as broken on purpose.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@albanm albanm merged commit e19c50a into main Jun 16, 2026
3 checks passed
@albanm albanm deleted the feat-mermaid branch June 16, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant