Skip to content

feat(frontend): render Mermaid markdown diagrams (#462)#994

Open
rodboev wants to merge 6 commits into
kenn-io:mainfrom
rodboev:pr/mermaid-markdown-rendering
Open

feat(frontend): render Mermaid markdown diagrams (#462)#994
rodboev wants to merge 6 commits into
kenn-io:mainfrom
rodboev:pr/mermaid-markdown-rendering

Conversation

@rodboev

@rodboev rodboev commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Mermaid fenced blocks in transcript Markdown currently go through the same code-block path as TypeScript, shell, and other ordinary source snippets, so diagrams appear as raw Mermaid text in the session viewer. This adds a frontend-only Mermaid rendering path for session message content while keeping backend export, storage, parser, and API behavior unchanged.

The implementation routes mermaid code segments from the transcript viewer into a dedicated Mermaid component, initializes the official Mermaid browser library through a small wrapper with SVG text labels, and sanitizes rendered SVG before insertion. Non-Mermaid fences continue through the existing code block component. Invalid Mermaid syntax falls back inside the message with localized status text and the original source still readable instead of breaking the surrounding transcript.

Focused validation covers the Markdown renderer, message-content behavior for rendered and failed Mermaid blocks, the Mermaid wrapper sanitation boundary, and the Svelte/TypeScript frontend check. Mermaid's own syntax breadth and browser layout fidelity stay owned by the Mermaid runtime; this change proves the agentsview routing, sanitation boundary, and graceful fallback behavior.

Fixes #462

@roborev-ci

roborev-ci Bot commented Jul 4, 2026

Copy link
Copy Markdown

roborev: Combined Review (7749634)

Medium issue found; no Critical or High findings.

Medium

  • frontend/src/lib/components/content/MessageContent.svelte:463
    Mermaid code fences no longer receive highlightQuery / isCurrentHighlight, so in-session search can force the block visible but cannot mark or reveal matches in the original Mermaid source.
    Fix: Pass the search props into MermaidBlock and apply highlighting to a source view, or render the normal CodeBlock when a search query is active.

Reviewers: 2 done | Synthesis: codex, 5s | Total: 5m11s

@roborev-ci

roborev-ci Bot commented Jul 4, 2026

Copy link
Copy Markdown

roborev: Combined Review (27ea0c1)

No issues found.


Reviewers: 2 done | Synthesis: codex | Total: 8m0s

@rodboev rodboev force-pushed the pr/mermaid-markdown-rendering branch from 27ea0c1 to 383d87d Compare July 6, 2026 11:01
@roborev-ci

roborev-ci Bot commented Jul 6, 2026

Copy link
Copy Markdown

roborev: Combined Review (383d87d)

The PR is clean for Medium, High, and Critical findings.

No Medium-or-higher findings were reported after deduplication.


Reviewers: 2 done | Synthesis: codex, 5s | Total: 8m35s

@roborev-ci

roborev-ci Bot commented Jul 6, 2026

Copy link
Copy Markdown

roborev: Combined Review (60d7024)

Medium issue found.

  • Medium: frontend/src/lib/components/content/MermaidBlock.svelte:67 renders Mermaid SVGs on var(--code-bg), which is dark in both app themes, while Mermaid’s default SVG output uses dark strokes/text on a transparent background. Arrow lines and some labels may be hard or impossible to read. Use a contrasting rendered-diagram surface, or configure Mermaid with a theme that matches the app background and re-render when the theme changes.

Reviewers: 2 done | Synthesis: codex, 6s | Total: 8m8s

@roborev-ci

roborev-ci Bot commented Jul 6, 2026

Copy link
Copy Markdown

roborev: Combined Review (34ac5d8)

No Medium, High, or Critical findings were reported.

Reviewers found the Mermaid rendering path acceptable; the only reported issue was Low severity and is omitted per instructions.


Reviewers: 2 done | Synthesis: codex, 6s | Total: 8m11s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

feat: render Mermaid diagrams in Markdown content

1 participant