Sample1

Sample: Update Diagram

This sample shows how you can update the diagram rendered in one <MermaidDiagram /> component.

<h1>Mermaid Diagrams</h1>

<div>
    <button @onclick="() => this.definition = def1">Flowchart</button>
    | <button @onclick="() => this.definition = def2">Sequence Diagram</button>
    | <button @onclick="() => this.definition = def3">XY Chart</button>
</div>

<MermaidDiagram Definition="@this.definition" />

@code {

    string definition = string.Empty;
    const string def1 = @"
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
";

    const string def2 = @"
sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
";

    const string def3 = @"
xychart-beta
title ""Sales Revenue""
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis ""Revenue (in $)"" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
";
}