Skip to content

feat: add mermaid diagram support - #3

Merged
ezyuzin merged 1 commit into
ezyuzin:masterfrom
MassimilianoPili:feat/mermaid-support
Aug 17, 2026
Merged

ezyuzin merged 1 commit into
ezyuzin:masterfrom
MassimilianoPili:feat/mermaid-support

Conversation

@MassimilianoPili

Copy link
Copy Markdown

Adds rendering of mermaid diagrams from mermaid fenced code blocks, toggleable
via the new "mermaid" markdown extension.

How it works

  • A markdown-it fence override emits
     for mermaid blocks.
  • The runtime loads on demand and runs after each preview render via the existing
    MarkdownRenderContext.postRender hook. Documents without a diagram never load it.
  • Runtime handling mirrors highlightjs: mermaid is an npm dependency and its prebuilt
    UMD is copied into dist/js at build time (build:mermaid), then deployed to
    assets/markdown by the existing packaging step. No runtime blob is committed.
  • Diagram theme follows the preview: dark is detected from the injected markdown-dark stylesheet.

Why a copy and not a webpack entry: mermaid lazy-loads diagram types with dynamic
import(); bundling would emit chunks the runtime loader never fetches. The published
UMD already inlines everything and assigns window.mermaid.

Enable via Settings, checking "mermaid" in the Markdown Plugins list.

Render fenced `mermaid` blocks as SVG via the mermaid runtime, copied into
the build and loaded on demand like highlightjs. Toggle with the "mermaid" extension.
@ezyuzin
ezyuzin merged commit 257337e into ezyuzin:master Aug 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants