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: 5 days 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 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-27T07:55:14.000Z (10 months ago)
• Last Synced: 2024-09-30T04:02:20.729Z (5 days ago)
• Topics: blazor-wasm, cs-ops, nuget-package
• Language: C#
• Size: 220 KB
• Stars: 24
• Watchers: 6
• 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

```