Blazor流程编排的艺术：深入Z.Blazor.Diagrams库的使用与实践
为现代网页应用开发提供动力的其中一个重要方面就是前端框架的强大功能与灵活性。而在.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能为你打开一扇通往高效、可扩展前端编程的大门。别忘了，探索技术的旅途从来不会孤单，我们一路并肩前行。
未来已来，让我们拭目以待。
Blazor流程编排的艺术：深入Z.Blazor.Diagrams库的使用与实践的更多相关文章
- jsplumbWithVue实现流程编排
最近业务需求,通过拖拽,实现流程编排,包括编排元素中的各种属性,刚开始拿到这个需求,一头雾水啊,找度娘渡了好久,FQ翻了很久,各种博客CSDN搜索,最终技术选型还是定在了jsplumb,这要感谢@萌级 ...
- 流程编排、如此简单-通用流程编排组件JDEasyFlow介绍
作者:李玉亮 JDEasyFlow是企业金融研发部自研的通用流程编排技术组件,适用于服务编排.工作流.审批流等场景,该组件已开源(https://github.com/JDEasyFlow/jd-ea ...
- 《进击吧！Blazor！》第一章 1.初识 Blazor
作者介绍 陈超超 Ant Design Blazor 项目贡献者 拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,Ant Design Blazor 项目贡献者,现就职于正泰集团 ...
- 《进击吧！Blazor！》第一章 2.Hello Blazor
第二次写专栏,开头还是不知道说什么,所以--先来段广告<进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门系列视频,此系列能让一个从未接触过Blazor的程序员掌握开发 ...
- 我在学习Blazor当中踩的巨坑！Blazor WebAssembly调试
最近嘛,看看Blazor已经蛮成熟的.顺便想在自家的框架里使用这个东西,毕竟我还是很念旧的,而且Blazor的技术栈也不麻烦.然后呢,在调试这一关我可是踩了大坑. 我的VS是2019,很早以前装的.然 ...
- App开发流程之数据持久化和编译静态链接库
先记录数据持久化. iOS客户端提供的常用数据持久化方案:NSUserDefaults代表的用户设置,NSKeydArchiver代表的归档,plist文件存储,SQLite数据库(包括上层使用的Co ...
- 浅谈Blazor开发的那些事
在这篇文章中,我们将解决一些常见的Blazor问题.具体来说就是"什么是Blazor",但更重要的是"为什么要用Blazor".既然我们已经有了Angular. ...
- Blazor 机制初探以及什么是前后端分离，还不赶紧上车？
标签: Blazor .Net 上一篇文章发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前端的,传送门:https://www.cnblogs.com/ ...
- [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本
前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...
- 初尝 Blazor WebAssembly
一. 前言 Blazor 的整体介绍以及特点与优势,建议翻阅 Blazor 介绍. Blazor 是一个可是使用 .NET/C# 来编写交互式客户端的 Web UI 框架,在官网有一句话概括 &quo ...
随机推荐
- 如何使用文件传输协议ftp,教你使用文件传输协议命令行
FTP是文件传输协议的缩写.顾名思义,FTP用于在网络上的计算机之间传输文件.您可以使用文件传输协议在计算机帐户之间交换文件,在帐户和台式计算机之间传输文件或访问在线软件档案.但是请记住,许多文件传输 ...
- KingbaseES 如何在日志文件记录查询执行计划
KingbaseES数据库提供了插件auto_explain,用于在日志中自动记录慢速语句的执行计划. 相比于explain与对象管理工具,auto_explain对于在大型应用程序中跟踪未优化的查询 ...
- 2024-03-30：用go语言，集团里有 n 名员工，他们可以完成各种各样的工作创造利润， 第 i 种工作会产生 profit[i] 的利润，它要求 group[i] 名成员共同参与， 如果成员参与
2024-03-30:用go语言,集团里有 n 名员工,他们可以完成各种各样的工作创造利润, 第 i 种工作会产生 profit[i] 的利润,它要求 group[i] 名成员共同参与, 如果成员参与 ...
- VK2C21A:抗干扰/抗噪/高稳定性LCD屏显示驱动，抗干扰LCD驱动段码屏芯片
产品型号:VK2C21A/B/C/D 产品品牌:VINKA/永嘉微/永嘉微电 封装形式:SOP28/24/20/16 产品年份:新年份 原厂直销,工程服务,技术支持,价格最具优势! VK2C21A/B ...
- Git 教程：解密 .gitignore 文件、合并分支、解决冲突、及 Git 帮助
Git 帮助 如果你忘记了命令或命令的选项,你可以使用 Git 帮助. 在命令行中,有几种不同的使用帮助命令的方式: git command -help - 查看特定命令的所有可用选项 git hel ...
- VS2019快捷键
快捷键功能CTRL + SHIFT + B生成解决方案CTRL + F7 生成编译CTRL + O 打开文件CTRL + SHIFT + O打开项目CTRL + SHIFT + C显示类视图窗口F4 ...
- 医疗BI系统如何使医疗行业完成精细化管理转型？
不久前在北京召开的全国医疗管理工作会议,确定了今年的医疗管理工作重点.会议强调,推动医疗管理改革工作的过程中要对形势.规律准确把握,积极应对可能面临的挑战,以"三个转变.三个提高" ...
- 千字干货分享：一文教你ABI增强分析，BI的未来就在这里！
自2017年以来,智能概念开始出现,各类商业智能BI应用的使用门槛逐渐降低,商业智能BI制造商主要竞争增强分析的能力.<2020年Gartner分析与BI平台魔法象限报告>指出,2020年 ...
- win7系统部署django项目
win7系统部署django项目,在Windows电脑上我使用的是 Apache + mod_wsgi 来部署的 # 背景 Python 3.8.3 Django 3.1.7 Apach ...
- 【#HDC2022】HarmonyOS体验官活动正式开启，赶快投稿赢限量奖品吧！
1. [活动简介] HDC 2022 于11月4日线上线下正式开启.历时一年,在无数开发者的共同努力下,我们汇聚了HarmonyOS生态的新成果.新体验.新开放能力,邀你参与到HarmonyOS的 ...