Skip to content

实战业务场景大赏 (Use Cases)

`YH-UI Flow` 的本质不仅仅是一个“连线库”,它底层极具弹性的无渲染(Renderless)设计及高性能的虚拟视口计算,使得它可以被轻易改造成几乎所有类型的图可视化应用。

以下是几个真实业务场景下高度特化的使用案例:

1. 实体关系图 (Entity Relationship - ER)

ER 图常用于数据库表结构设计或复杂模型依赖分析。利用 Flow 的自适应宽高、表格化 HTML 支持配合跨节点的动态锚点(Handles),我们能迅速构建工业级的 ER 结构查看器。

1 : 1
UsersCore
🔑id
uuid
username
varchar(50)
email
varchar(100)
created_at
timestamp
OrdersTransaction
🔑id
uuid
user_id
uuid
total_amount
decimal
status
varchar(20)
User ProfilesDetails
🔑id
uuid
user_id
uuid
avatar_url
varchar(255)
ER 结构模型演示

TIP

`erNode` 内置了纯 Vue JSX 逻辑。利用自定义节点的灵活性,甚至可以在表格节点内部嵌套滚动条和复选框!

2. 组织架构图 (Organization Chart)

借助 Dagre 层级布局配合 `step` 直角连线(Ortho Edges),我们能轻易组合成传统树状的组织架构展现模型。

👔
Alex JohnsonCEO
💻
Sarah ChenCTO
📈
Michael RossCMO
Dev Team AFrontend
⚙️
Dev Team BBackend
组织人员树状图

3. 系统设计架构图 (System Architecture Topology)

使用自定义图标与多配色方案组合,极速搭建包含云服务、客户端、中间件、数据库等标准架构图模型。

💻
Client
⚙️
API
🗄️
SQL
📨
MQ
☁️
Cloud
系统设计架构图

4. 纯净流式时间轴 (Horizontal Timeline)

仅仅通过去除画布背景、替换简单的钻石或圆形节点,Flow 即可被快速退化为优雅的里程碑时间轴。

Start Point
UI Design
Development
QA Test
Launch
简单时间轴

5. 可交互数据折叠树 (Expandable JSON Tree)

实现经典的思维导图或者层级折叠树!利用组件层面的 `hidden` 方法,可以无缝呈现高度复杂的深层级结构数据的收缩/展开。

[ ]fathers-
{ }0-
Aaid1024
Aaname"Eric"
[ ]daughters+
展开/折叠树

Released under the MIT License.