Skip to content

feature: Added Mermaid module to support Mermaid charts#1

Open
tse-wei-chen wants to merge 5 commits into
ClassIsland:masterfrom
tse-wei-chen:master
Open

feature: Added Mermaid module to support Mermaid charts#1
tse-wei-chen wants to merge 5 commits into
ClassIsland:masterfrom
tse-wei-chen:master

Conversation

@tse-wei-chen

Copy link
Copy Markdown

This package add Mermaid diagram support to Markdown.

Screenshot 2026-01-10 133530

How to use

In XAML, add MermaidBlockHandler to MdAvPlugins.

<Window 
	xmlns:mermaid="clr-namespace:Markdown.Avalonia.Mermaid;assembly=Markdown.Avalonia.Mermaid"
>

...another xaml...

<md:MarkdownScrollViewer>
  <md:MarkdownScrollViewer.Plugins>
	<md:MdAvPlugins>
	  <mermaid:MermaidBlockHandler />
	</md:MdAvPlugins>
  </md:MarkdownScrollViewer.Plugins>
</md:MarkdownScrollViewer>

theme support

Mermaid diagrams support light and dark theme. You need to set Theme property in MermaidBlockHandler.

<mermaid:MermaidBlockHandler Theme="dark" />

You can also set BackgroundColor property to make the background transparent.

<mermaid:MermaidBlockHandler BackgroundColor="transparent" />

⚠️ First Run Requirement

The first time a Mermaid diagram is rendered, the library will automatically download a standalone Chromium browser instance (managed by Microsoft.Playwright). This one-time setup requires an active internet connection and may take a few moments depending on your network speed.

Markdown example

```mermaid
graph TD
	A[Start] --> B{Decision}
	B -->|Yes| C[Do X]
	B -->|No| D[Do Y]
	C --> E[End]
	D --> E
``` 

dependencies:

  • Markdown.Avalonia.Tight
  • Microsoft.Playwright - MIT license
  • cdn for mermaid.min.js

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.

1 participant