Включение диаграмм Mermaid в Blazor WebAssembly и dotnet 7.

Русалочьи диаграммы - это фантастика. MermaidJS предлагает все: диаграммы Ганнта, блок-схемы, круговые диаграммы и многое другое для вашего веб-приложения, и все это с использованием простой, похожей на маркдаун формулы для описания ваших диаграмм.

В этом посте я расскажу, как включить последнюю версию MermaidJS в ваше приложение Blazor WebAssembly.

Для этого мы воспользуемся новой функцией в dotnet 7 - возможностью импортировать модуль javascript во время выполнения, именно тогда, когда он вам нужен.

Мы построим одну из простых схем из собственной документации MermaidJS.

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

При визуализации вы должны увидеть схему, показанную ниже:

User Flow diagram from mermaidJS

Чтобы это работало, мы создадим новое приложение Blazor Web Assembly, напишем несколько простых Javascript, склеим все вместе и начнем.

Во-первых, создайте новую папку, войдите в нее и создайте новое приложение Blazor WebAssembly App.

dotnet new blazorwasm

Далее перейдите в каталог wwwroot, создайте папку modules и создайте приведенный ниже файл. Назовите его mermaidmodule.js

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';

export function Initialize() {
 mermaid.initialize({ startOnLoad: true, flowchart: { useMaxWidth: true } });
}

export function Render(componentId, definition) {
 const cb = function (svgGraph) {
  //console.logg(svgGraph);
 };
 var elements = document.getElementsByClassName(componentId);
 for(const element of elements)
 {
  const diagramdefinition = htmlDecode(element.innerHTML);
  const id = "mmd" + Math.round(Math.random() * 10000);
  mermaid.render(`${id}-mermaid-svg`, diagramdefinition, (svg, bind) => {
   const host = element;
   host.innerHTML = svg
   //bind(host);

  });
 }
}

function htmlDecode(input) {
 var doc = new DOMParser().parseFromString(input, "text/html");
 return doc.documentElement.textContent;
}

Он будет искать каждый элемент с выбранным вами классом (мы будем использовать mermaid) и заменять его содержимое SVG диаграммой.

Далее перейдите в папку ./Pages вашего приложения и измените файл index.razor следующим образом:

@page "/"
@inject IJSRuntime JSRuntime
<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="mermaid">
    journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
    </div>

@code {
IJSObjectReference mermaidmodule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
 {
  if(firstRender)
  {
   mermaidmodule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./modules/mermaidmodule.js");
   await mermaidmodule.InvokeVoidAsync("Initialize");
   await mermaidmodule.InvokeVoidAsync("Render", "mermaid");
  }
  else
  {
   await mermaidmodule.InvokeVoidAsync("Render", "mermaid");
  }
 }
}

Наконец, вам нужно будет избавиться от IJSObjectReference на этой странице, чтобы сделать ее более готовой к производству. На выходе мы получим следующее:

Final Working App

Как видите, заставить MermaidJS и Blazor работать вместе в dotnet 7 очень просто!

Правда, есть некоторые нюансы:

• Я использовал имя класса mermaid, но это может быть что угодно.
• Это поддерживает все диаграммы русалок. Обратите внимание, что я использовал новую функцию в Javascript для декодирования HTML, который не может быть правильно разобран.

Наконец, надеюсь, вам понравится, диаграммы MermaidJS действительно классные и теперь невероятно просто работают с Blazor.