MarkView.Avalonia.Mermaid 12.2.1

MarkView.Avalonia.Mermaid

Mermaid diagram rendering extension for MarkView.Avalonia. Renders fenced mermaid code blocks as vector diagrams using Mermaider — a pure managed .NET parser and renderer. No browser, no WebView, and no JavaScript runtime required.

Installation

dotnet add package MarkView.Avalonia.Mermaid

Quick Start

Call UseMermaid() before setting Markdown:

var viewer = new MarkdownViewer();
viewer.UseMermaid();
viewer.Markdown = markdownText;

Or activate globally at application startup:

// App.axaml.cs
MarkdownViewerDefaults.Extensions.AddMermaid();

Diagrams are written in standard Mermaid syntax inside a fenced code block:

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -- Yes --> C[End]
  B -- No  --> A
```

Supported Diagram Types

The extension targets the diagram types supported by the version of Mermaider this package depends on, including common diagrams such as:

• Flowcharts (graph TD, flowchart LR)
• Sequence diagrams (sequenceDiagram)
• Class diagrams (classDiagram)
• State diagrams (stateDiagram-v2)
• Entity-relationship diagrams (erDiagram)
• Gantt charts (gantt)
• Pie charts (pie)
• Git graphs (gitGraph)
• Mind maps (mindmap)
• Timeline (timeline)

See the Mermaid documentation for syntax reference. If a diagram fails to render, the extension falls back to a plain-text block containing the original source.

Theme Awareness

Diagram colours come from MermaidTheme.axaml, included the same way as the core package's theme:

<StyleInclude Source="avares://MarkView.Avalonia.Mermaid/Themes/MermaidTheme.axaml" />

It defines Dark/Light SolidColorBrush resources you can override in your own styles:

If the theme isn't included, the same values are used as a built-in fallback — the extension works standalone.

When the user switches between light and dark, the diagram is automatically re-rendered. The Border container stays in place — scroll position is preserved and other document elements are not affected.

Combining with Syntax Highlighting

When MarkView.Avalonia.SyntaxHighlighting is also registered, non-mermaid fenced code blocks in the same document get full syntax highlighting. Registration order does not matter:

// Per-instance
viewer
    .UseTextMateHighlighting()
    .UseMermaid();

// Or globally
MarkdownViewerDefaults.Extensions.AddTextMateHighlighting();
MarkdownViewerDefaults.Extensions.AddMermaid();

MermaidBlockRenderer handles all FencedCodeBlock nodes. Mermaid blocks are rendered as diagrams; all other fenced blocks are rendered as styled code blocks using any ICodeHighlighter registered by the SyntaxHighlighting extension.

How It Works

UseMermaid() registers a MermaidExtension which inserts MermaidBlockRenderer immediately before the first renderer that already accepts a FencedCodeBlock (not always at index 0 — this keeps registration order-independent when a sibling extension such as MarkView.Avalonia.Math is also registered), so it intercepts every FencedCodeBlock before the default CodeBlockRenderer.

For mermaid blocks:

1. Source lines are extracted from the fenced block.
2. MermaidRenderer.RenderSvg produces an SVG string with Mermaider's CSS custom properties.
3. CSS variable references (var(--_text) etc.) are inlined with computed hex values so SkiaSharp can render the diagram.
4. The SVG is loaded into an SvgImage and displayed in an Image control.
5. MaxWidth is constrained to the ScrollViewer viewport and updated on resize.

For non-mermaid blocks, rendering is delegated to the standard code block path (with theme-aware in-place TextBlock.Inlines rebuild if a IThemeAwareCodeHighlighter is registered).

License

MIT © Nicolas Musset