Blazor流程編排的藝術：深入Z.Blazor.Diagrams庫的使用與實踐

许泽宇發表於2024-05-05
Blazor

為現代網頁應用開發提供動力的其中一個重要方面就是前端框架的強大功能與靈活性。而在.NET生態中，Blazor以其獨特的工作方式和優勢逐漸獲得了開發者們的青睞。今天，在這篇文章中，我將帶你深入探索一個基於Blazor的優秀庫——Z.Blazor.Diagrams，我們將瞭解它是如何幫助開發者輕鬆實現流程編排的。

https://github.com/Blazor-Diagrams/Blazor.Diagrams

Z.Blazor.Diagrams淺析及應用實踐

最近，當我推進一個基於LLM的流程編排專案時，我需要為Blazor應用尋找一個強大的流程編排元件。在一番尋找之後，我發現了Z.Blazor.Diagrams這個庫。

Z.Blazor.Diagrams是一款適用於Blazor（伺服器端和WASM客戶端）的完全可定製和可擴充套件的通用圖形庫。這個庫最初受到了React生態中流行庫React圖的啟發，並在此基礎上發展壯大。開發者可以利用ZBD建立具有自定義設計的高階圖表，並根據個人的需求調節庫的行為特性。

你可以透過官方的文件來了解其更多資訊，相信我，官方的示例將給你留下深刻的印象。

https://blazor-diagrams.zhaytam.com/

　　

接下來，讓我們一起走進ZBD世界，探究它的魅力所在。

初始化設定

首先，讓我們來準備好我們的開發環境。引入ZBD到專案中你需要在你的.csproj檔案中新增下面的nuget包：

<PackageReference Include="Z.Blazor.Diagrams" Version="3.0.2" />
<PackageReference Include="Z.Blazor.Diagrams.Core" Version="3.0.2" />
<PackageReference Include="Z.Blazor.Diagrams.Algorithms" Version="3.0.2" />

　　

確保完成包的引入後，我們就可以開始踏上建立使用者介面的旅程了。

構建流程圖

流程圖的構建過程非常直觀，接下來我將向您展示如何在您的razor頁面中使用DiagramCanvas控制元件來實現這一點。

<div class="wrapper">
    <Content>
        <CascadingValue Value="BlazorDiagram">
            <div class="diagram-container">
                <DiagramCanvas>
                    <Widgets>
                        <NavigatorWidget Width="200"
                                         Height="150"
                                         Style="position: absolute; bottom: 15px; right: 15px;"></NavigatorWidget>
                    </Widgets>
                </DiagramCanvas>
            </div>
        </CascadingValue>
    </Content>
</div>

　　

如你所見，一旦配置好DiagramCanvas控制元件，基本的流程圖介面就已經搭建好了。

節點定製與互動

在ZBD中，定製節點是一項核心功能，這允許我們建立符合我們流程特色的節點。下面是如何在我們的應用中註冊自定義節點：

[Inject] protected MessageService? Message { get; set; }
  
protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();

    BlazorDiagram.RegisterComponent<StartNode, StartComponent>();
    BlazorDiagram.RegisterComponent<EndNode, EndComponent>();
    BlazorDiagram.RegisterComponent<AppNode, AppComponent>();

    var startNode = BlazorDiagram.Nodes.Add(new StartNode(new Point(80, 80)));
    startNode.AddPort(PortAlignment.Right);

    var endNode = BlazorDiagram.Nodes.Add(new EndNode(new Point(980, 80)));
    endNode.AddPort(PortAlignment.Left);

    var appNode = BlazorDiagram.Nodes.Add(new AppNode(new Point(450, 80)));
    appNode.AddPort(PortAlignment.Left);
    appNode.AddPort(PortAlignment.Right);

    BlazorDiagram.Links.Add(new LinkModel(startNode.Ports[0], appNode.Ports[0]));
}

　　 在進行節點註冊後，我們可以定義每種型別節點的外觀和行為。這裡是一個簡單的開始節點元件示例：

@using Blazor.Diagrams.Components.Renderers;
@using AntSK.Pages.Workflow.Node;

<div>
    <Card Size="small" TitleTemplate="titleTemplate" Style="width:300px;">
        <Body>
            <p>開始</p>
        </Body>
    </Card>

    @foreach (var port in Node.Ports)
    {
        // In case you have any ports to show
        // IMPORTANT: You are always in charge of rendering ports
        <PortRenderer @key="port" Port="port" />
    }
</div>

@code {
    [Parameter] public StartNode Node { get; set; } = null!;
    RenderFragment titleTemplate =@<div><Icon Type="play-circle" Theme="outline" />使用者問題(對話入口)</div>;
}

public class StartNode : NodeModel
{
    public StartNode(Point position = null) : base(position) {}
}

　　

這段程式碼將會建立一個簡約的“開始”節點，配合我們的樣式和業務邏輯，你可以建立很多個性化的節點型別來滿足實際專案需要。

檢視效果

成功定義節點和連結之後，我們便可以在瀏覽器中觀察到我們的流程編排圖。

總結

至此，我們已經概覽了Z.Blazor.Diagrams的核心特性和實用性。從靈活的定製設計到流暢的使用者互動，ZBD無疑是開發基於Blazor應用的流程圖的優選方案。結合自定義元件和演算法包的能力，開發者能夠以最少的程式碼實現最豐富的前端功能表現。

不論你是對Blazor感興趣的新手，還是希望為你的專案尋找更多可能性的資深開發者，我相信Z.Blazor.Diagrams能為你開啟一扇通往高效、可擴充套件前端程式設計的大門。別忘了，探索技術的旅途從來不會孤單，我們一路並肩前行。

未來已來，讓我們拭目以待。

相關文章