简介

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

相关项目

• XiHan.Framework - .NET 模块化开发框架
• XiHan.UI - 框架无关 Headless UI 组件库
• XiHan.BasicApp - 基于 XiHan.Framework 和 XiHan.UI 的超高颜值通用中后台内核
• XiHan.PrintDesigner - 框架无关打印设计器
• XiHan.FormDesigner - 框架无关表单设计器
• XiHan.ReportDesigner - 框架无关报表设计器

贡献

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

支持&赞助

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

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

版权&授权

Copyright (c) 2021-Present XiHanFun and contributors.

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

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

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