实战业务场景大赏 (Use Cases)
`YH-UI Flow` 的本质不仅仅是一个“连线库”,它底层极具弹性的无渲染(Renderless)设计及高性能的虚拟视口计算,使得它可以被轻易改造成几乎所有类型的图可视化应用。
以下是几个真实业务场景下高度特化的使用案例:
1. 实体关系图 (Entity Relationship - ER)
ER 图常用于数据库表结构设计或复杂模型依赖分析。利用 Flow 的自适应宽高、表格化 HTML 支持配合跨节点的动态锚点(Handles),我们能迅速构建工业级的 ER 结构查看器。
ER 结构模型演示
TIP
`erNode` 内置了纯 Vue JSX 逻辑。利用自定义节点的灵活性,甚至可以在表格节点内部嵌套滚动条和复选框!
2. 组织架构图 (Organization Chart)
借助 Dagre 层级布局配合 `step` 直角连线(Ortho Edges),我们能轻易组合成传统树状的组织架构展现模型。
组织人员树状图
3. 系统设计架构图 (System Architecture Topology)
使用自定义图标与多配色方案组合,极速搭建包含云服务、客户端、中间件、数据库等标准架构图模型。
系统设计架构图
4. 纯净流式时间轴 (Horizontal Timeline)
仅仅通过去除画布背景、替换简单的钻石或圆形节点,Flow 即可被快速退化为优雅的里程碑时间轴。
简单时间轴
5. 可交互数据折叠树 (Expandable JSON Tree)
实现经典的思维导图或者层级折叠树!利用组件层面的 `hidden` 方法,可以无缝呈现高度复杂的深层级结构数据的收缩/展开。
展开/折叠树