# XiHan.FlowDesigner

**Repository Path**: null_947_6831/XiHan.FlowDesigner

## Basic Information

- **Project Name**: XiHan.FlowDesigner
- **Description**: 快速、轻量、高效、用心的框架无关流程设计器。曦寒懿（XiHanFun）开源生态的一部分。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://flow.docs.xihanfun.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-10-31
- **Last Updated**: 2026-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<h1>XiHan.FlowDesigner</h1>

<p><b>A fast, lightweight, efficient and thoughtfully built framework-agnostic flow designer</b></p>

<p>Delivered as Web Components: compose flowcharts and approval flows visually and export engine-neutral flow definitions for your own engine</p>

<p><b>English</b> | <a href="./README_cn.md">简体中文</a></p>

<p>
  <a href="https://github.com/XiHanFun/XiHan.FlowDesigner/stargazers"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/XiHanFun/XiHan.FlowDesigner?style=flat-square&logo=github&label=Stars&color=1f6feb" /></a>
  <a href="https://gitee.com/XiHanFun/XiHan.FlowDesigner"><img alt="Gitee Stars" src="https://gitee.com/XiHanFun/XiHan.FlowDesigner/badge/star.svg" /></a>
  <a href="https://gitcode.com/XiHanFun/XiHan.FlowDesigner"><img alt="GitCode Stars" src="https://gitcode.com/XiHanFun/XiHan.FlowDesigner/star/badge.svg" /></a>
</p>

<p>
  <img alt="Web Components" src="https://img.shields.io/badge/Web_Components-29ABE2?style=flat-square&logo=webcomponentsdotorg&logoColor=white" />
  <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" />
  <a href="https://www.npmjs.com/package/@xihan-flow/designer"><img alt="npm" src="https://img.shields.io/npm/v/@xihan-flow/designer?style=flat-square&logo=npm&logoColor=white" /></a>
  <a href="./LICENSE"><img alt="License" src="https://img.shields.io/github/license/XiHanFun/XiHan.FlowDesigner?style=flat-square&color=green" /></a>
</p>

<p>
  <a href="https://flow.docs.xihanfun.com"><img alt="Docs" src="https://img.shields.io/badge/Docs-flow.docs.xihanfun.com-2496ED?style=flat-square&logo=readthedocs&logoColor=white" /></a>
  <a href="https://deepwiki.com/XiHanFun/XiHan.FlowDesigner"><img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
  <a href="https://qm.qq.com/q/qYp1Urv3z2"><img alt="QQ Group" src="https://img.shields.io/badge/QQ_Group-462371834-EB1923?style=flat-square&logo=tencentqq&logoColor=white" /></a>
</p>

</div>

## Introduction

XiHan.FlowDesigner is a framework-agnostic flow designer delivered as native Web Components, so it works in Vue, React, Angular or framework-free pages alike. It is part of the XiHanFun open-source ecosystem.

## Principles

- **Framework-agnostic** - delivered as native Web Components, bound to no frontend framework
- **No third-party runtime dependencies** - nothing third-party ships at runtime
- **Templates are data** - a template is plain JSON that neither contains nor runs code, so importing one cannot inject scripts
- **The host owns the data** - components make no network requests; data, storage and permissions are handed to the host through callbacks

## Packages

| Package | Description |
| --- | --- |
| `@xihan-flow/core` | Model layer: flow graph schema, validation, layout algorithms and edit commands; pure TypeScript, no DOM |
| `@xihan-flow/runtime` | Runtime: flow graph viewing and run-state display for business pages |
| `@xihan-flow/designer` | Designer: visual flow designer |

Dependencies point `designer → runtime → core`. Business pages only need the runtime; the designer is loaded only where templates are edited.

## Development

Requires Node.js 24+ and pnpm 11+.

```bash
cd flow
pnpm install
pnpm build
```

Other commands: `pnpm typecheck`, `pnpm test`, `pnpm lint`.

Development preview (a demo of the viewer and the designer, not a product): start it from `flow/` and open http://localhost:5190 .

```bash
pnpm dev
```

## Related projects

- [XiHan.Framework](https://github.com/XiHanFun/XiHan.Framework) - .NET modular development framework
- [XiHan.UI](https://github.com/XiHanFun/XiHan.UI) - Framework-agnostic headless UI component library
- [XiHan.BasicApp](https://github.com/XiHanFun/XiHan.BasicApp) - A polished general-purpose admin core built on XiHan.Framework and XiHan.UI
- [XiHan.PrintDesigner](https://github.com/XiHanFun/XiHan.PrintDesigner) - Framework-agnostic print designer
- [XiHan.FormDesigner](https://github.com/XiHanFun/XiHan.FormDesigner) - Framework-agnostic form designer
- [XiHan.ReportDesigner](https://github.com/XiHanFun/XiHan.ReportDesigner) - Framework-agnostic report designer

## Contributing

Issues and pull requests are welcome. Commits follow the conventional commits format, and changes must pass CI lint, type checking, build and tests.

## Sponsorship

If this project helps your work, you are welcome to buy the author a coffee.

Sponsorship page: https://docs.xihanfun.com/cosmos/sponsor

## Copyright & License

Copyright (c) 2021-Present XiHanFun and contributors.

Licensed under the MIT License; see [License](./LICENSE).

The XiHan.FlowDesigner name, interface visual design and original visual expression belong to the author. Third-party services follow their own licenses and terms.

This project is provided for learning and reference only; the author assumes no risk arising from its use.