Skip to content

feat: render Mermaid diagrams in code blocks #227

Description

@tstapler

Problem

Fenced code blocks tagged ```mermaid are not rendered as diagrams — grepped for "mermaid" across kmp/src, zero hits anywhere in the codebase.

Trilium Notes ships this as a native note type (https://docs.triliumnotes.org/user-guide/note-types/mermaid-diagrams): flowcharts, class/sequence diagrams, Gantt charts, etc. rendered from Mermaid syntax.

Why this matters

  • Low effort relative to the other gaps in this batch: this is "detect a mermaid fenced code block and render it with a Mermaid renderer" rather than a new note type or data model change — SteleKit already has generic fenced code block parsing/rendering to hook into.
  • Markdown compatibility: GitHub, GitLab, Obsidian, and Logseq (via plugin) all render mermaid fences the same way — supporting it keeps SteleKit's markdown files portable and "renders the same everywhere."

Suggested scope (v1)

  • Detect ```mermaid fenced blocks in the block renderer.
  • Render via an embeddable Mermaid renderer appropriate to each KMP target (JVM/Desktop, Android, WASM/Web) — likely a WebView/JS-engine-based renderer given Mermaid itself is a JS library; scope may differ per platform and is worth a short design note before implementation.
  • Fall back to showing the raw code block (current behavior) if rendering fails or isn't supported on a given platform.

References

  • No existing code or project_plans/ entry addresses this

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions