Native Mermaid diagram rendering in Lumo chat interface
Description:
Mermaid.ai is the de facto standard for text-to-diagram visualization, natively supported by GitHub, GitLab, Notion, Obsidian, and VS Code. Currently, when Lumo generates Mermaid syntax in a fenced ```mermaid code block, the Lumo web UI displays it as raw text instead of rendering the diagram visually. This significantly reduces the utility of Lumo for technical users who rely on diagrams — flowcharts, sequence diagrams, architecture diagrams, state machines, ER diagrams, and more.
Proposed implementation:
Integrate the Mermaid.js library into the Lumo web UI Markdown renderer to automatically detect and render ```mermaid fenced code blocks as interactive SVG diagrams within chat messages.
Support the full range of Mermaid diagram types (flowchart, sequence, class, state, ER, Gantt, journey, timeline, mindmap, gitGraph, etc.).
Ensure rendering occurs client-side to maintain Lumo's zero-access encryption and privacy-first architecture.
Consider a fallback: if rendering fails, display the raw Mermaid source with a copy button.
Extend support to the iOS and Android apps where feasible.
Why this matters:
Lumo already generates Mermaid syntax in responses — the gap is purely in rendering.
Competing AI assistants (Claude, ChatGPT, Gemini) render Mermaid natively.
The Mermaid.js library is lightweight, MIT-licensed, and runs entirely in the browser.
Privacy is preserved: no server-side diagram generation is required.
Technical professionals (developers, architects, IAM consultants) represent a key Lumo Plus subscriber demographic that depends heavily on visual documentation.
Related existing requests:
Syntax-highlighted code blocks (18 votes on UserVoice) — Mermaid rendering would naturally complement this feature.