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

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions