Blazor WASM - Workflow Designer Using Blazor Diagrams

@using Blazor.Diagrams.Core;
@using Blazor.Diagrams.Core.Models;
@using Blazor.Diagrams.Components;
@using Blazor.Diagrams.Core.Geometry;

Step 4
Copy paste below code in your razor page, my case it’s an index.razor
@page "/"

<h1>Sample - Blazor Diagrams</h1>
<hr />

<!-- Add this where you want to show the diagram -->
<CascadingValue Value="Diagram">
    <DiagramCanvas></DiagramCanvas>
</CascadingValue>

@code {
    //Creating a diagram manager
    private Diagram? Diagram { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        //Changing options
        var options = new DiagramOptions
        {
            DeleteKey = "Delete", // What key deletes the selected nodes/links
            DefaultNodeComponent = null, // Default component for nodes
            AllowMultiSelection = true, // Whether to allow multi selection using CTRL
            Links = new DiagramLinkOptions
            {
                // Options related to link
            },
            Zoom = new DiagramZoomOptions
            {
                Minimum = 0.5, // Minimum zoom value
                Inverse = false, // Whether to inverse the direction of the zoom when using the wheel
                // Other
            }
        };

        Diagram = new Diagram(options);

        Setup();
    }

    //Nodes - functions
    private void Setup()
    {
        var node1 = NewNode(50, 50);
        var node2 = NewNode(300, 300);
        var node3 = NewNode(300, 50);
        Diagram?.Nodes.Add(new[] { node1, node2, node3 });
        Diagram?.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
    }

    private NodeModel NewNode(double x, double y)
    {
        var node = new NodeModel(new Point(x, y));
        node.AddPort(PortAlignment.Bottom);
        node.AddPort(PortAlignment.Top);
        node.AddPort(PortAlignment.Left);
        node.AddPort(PortAlignment.Right);
        return node;
    }
}

Explanation

• Diagram – It’s a component from this library that will create this flowchart diagram as a whole
• DiagramOptions – we can set options for the diagram component with lot of operations like delete, zoom, node selection and so on.
• DiagramLinkOptions – option related to links
• DiagramZoomOptions – option to set zooming values, direction
• Diagram = new Diagram(options) – pass all the option configuration to the diagram component
• Nodes - these would be created from data received from the backend
• NodeModel.Port – will add connecting ports for each node
• Setup() – will create 3 nodes with all the connecting ports and passed it into diagram component
• LinkModel - The AddLink method adds a link of type LinkModel, which is the default link type. It also returns the created link. We can link the different connecting ports of one node with other
• CascadingValue – this is a method to add the diagram canvas into your blazor component with parameter diagram

Step 5

If you run and wanted to see the output, I guess it won’t show unless or until you add the below styling in your index.html file

<style>
    .diagram-canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        outline: none;
        overflow: hidden;
        cursor: -webkit-grab;
        cursor: grab;
        touch-action: none;
    }
</style>

Step 6

If you did everything correctly and used the default styles, you should see this: output

You can build complex flowchat customely using this free library.

*** !!! Happy coding !!! ***