XiHan.FlowDesigner:基于 Web Components 的框架无关流程设计器项目

快速、轻量、高效、用心的框架无关流程设计器。曦寒懿(XiHanFun)开源生态的一部分。

分支3Tags2
文件最后提交记录最后更新时间
13 天前
14 天前
20 天前
20 天前
17 天前
13 天前
13 天前
20 天前
14 天前
13 天前
20 天前
20 天前
14 天前
14 天前

XiHan.FlowDesigner

快速、轻量、高效、用心的框架无关流程设计器

以 Web Components 交付,可视化编排流程图与审批流,产出与流程引擎无关的流程定义,由使用方对接自己的引擎

English | 简体中文

GitHub Stars Gitee Stars GitCode Stars

Web Components TypeScript npm License

Docs Ask DeepWiki QQ Group

简介

XiHan.FlowDesigner 是一款框架无关的流程设计器,以原生 Web Components 交付,Vue、React、Angular 或不使用框架的页面都能直接使用。属于曦寒懿(XiHanFun)开源生态。

设计原则

  • 框架无关 - 以原生 Web Components 交付,不绑定任何前端框架
  • 零第三方依赖 - 运行时不引入任何第三方包
  • 模板即数据 - 模板只是 JSON,不含也不执行任何代码,导入模板不会带来脚本注入
  • 数据由使用方掌控 - 组件不发网络请求,数据、存储与权限都经回调交给使用方

包结构

包 说明
@xihan-flow/core 模型层:流程图 schema、校验、布局算法与编辑命令,纯 TypeScript,不依赖 DOM
@xihan-flow/runtime 运行时:业务页面使用的流程图查看与运行状态展示
@xihan-flow/designer 设计器:可视化流程设计器

依赖方向为 designer → runtime → core。业务页面只需要 runtime,设计器只在需要编辑模板的地方加载。

本地开发

需要 Node.js 24+ 与 pnpm 11+。

cd flow
pnpm install
pnpm build

其余命令:pnpm typecheck、pnpm test、pnpm lint。

开发预览页(查看器与设计器的演示,不是产品):在 flow/ 下启动,打开 http://localhost:5190 。

pnpm dev

相关项目

贡献

欢迎提交 Issue 和 Pull Request。提交遵循 conventional commits 规范,改动需通过 CI 的 lint、类型检查、构建与测试。

支持&赞助

如果此项目对你的开发有助益,也欢迎请作者一杯咖啡。

官方赞助页 https://docs.xihanfun.com/cosmos/sponsor

版权&授权

Copyright (c) 2021-Present XiHanFun and contributors.

本项目采用 MIT 授权,详见 License

XiHan.FlowDesigner 名称、界面视觉设计与原创视觉表达归作者所有,第三方服务分别遵循其各自授权与服务条款。

项目仅供学习参考,作者不承担任何软件的使用风险。

项目介绍

快速、轻量、高效、用心的框架无关流程设计器。曦寒懿(XiHanFun)开源生态的一部分。

https://flow.docs.xihanfun.com定制我的领域