https://github.com/truecommerce/mermaidjs.blazor
A simple MermaidDiagram component for Blazor.
https://github.com/truecommerce/mermaidjs.blazor
blazor-wasm cs-ops nuget-package
Last synced: 2 months ago
JSON representation
A simple MermaidDiagram component for Blazor.
- Host: GitHub
- URL: https://github.com/truecommerce/mermaidjs.blazor
- Owner: TrueCommerce
- License: mit
- Created: 2021-06-25T15:22:58.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-27T07:55:14.000Z (almost 2 years ago)
- Last Synced: 2025-04-12T03:52:23.061Z (7 months ago)
- Topics: blazor-wasm, cs-ops, nuget-package
- Language: C#
- Size: 220 KB
- Stars: 29
- Watchers: 5
- Forks: 11
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MermaidJS.Blazor
A simple MermaidDiagram component for Blazor.
For more information on MermaidJS including the diagram definition syntax, JavaScript API, or other supported features, please visit: https://mermaid-js.github.io/.
## Getting Started
### 1. Install the `MermaidJS.Blazor` NuGet package.
```bash
> dotnet add package MermaidJS.Blazor
```
### 2. Add `builder.Services.AddMermaidJS()` to your `Program.cs`.
```csharp
using Microsoft.Extensions.DependencyInjection;
// ... //
builder.Services.AddMermaidJS();
```
> NOTE: You do not need to include mermaid.js or mermaid.min.js in your index.html. MermaidJS.Blazor will load the library on demand at runtime.
### 3. Use the `MermaidDiagram` component in your app.
```html
@using MermaidJS.Blazor
@code
{
string diagramDefinition = "graph TB\nA-->B";
void OnClickNode(string nodeId)
{
// TODO: do something with nodeId
}
}
```
## Handling Node Clicks
To raise node click events back to your blazor component, set your click callback to `onClickMermaidNode`:
```mermaid
graph TB
A--B
click A onClickMermaidNode
```