LogicFlow案例分享

[wumail]

描述

LogicFlow为了提供足够的扩展性，默认情况下并不会做过多的样式、交互上的效果。我们提供了足够多的API支持您去实现您们产品、UI的效果。 在不涉及公司信息安全的情况下，欢迎您把LogicFlow在您们项目中的实际效果分享出来。

你可以分享

1. 分享项目中的效果截图。
2. 分享自己用LogicFlow实现的开源项目github地址。
3. 分享使用了LogicFlow的网址。

我们还会做什么

1. 在收集到足够多的分享后，我们会从中选区一些用的多的效果做成内置插件。
2. 为后续提供案例展示模块收集素材。

示例站点：https://docs.logic-flow.cn/examples/#/gallery

[wumail]

一键美化 by hsole

https://hsole.github.io/layoutFlow/
https://github.com/hsole/layoutFlow

[wumail]

预测LOL S12晋级图 by hsole

在线地址：https://hsole.github.io/S12/
源码地址：https://github.com/hsole/S12

[wumail]

入门demo学习 by chenweihan

入门demo学习,请跳转:
Angular版本LogicFlow的入门DEMO实例请参考
码云 https://gitee.com/copperpeas/logicflow-angular
github https://github.com/chenweihan/logicflow-angular
Vue3LogicFlow的入门DEMO实例请参考((Vue2可参考))
码云 https://gitee.com/copperpeas/logicflow-vue3
github https://github.com/chenweihan/logicflow-vue3

[wumail]

vue2 示例 by Waym1ng

这是vue2版本，一个简单的demo https://github.com/Waym1ng/logicflow_editing_demo 可以查看json，导入导出，编辑属性的示例

[eyea]

使用 astro + preact + ci 的一个例子集合，较为完整的演示了项目开发和自动部署到 githubpages

效果预览
源码

[sx1989827]

公司或组织：阿尔方斯
产品：基于人工智能的团队协作平台Teamlinker，
访问地址：Teamlinker Teamlinker开源项目
截图：

[whki]

产品：RuleGo-Editor RuleGo 规则引擎可视化编辑器
RuleGo项目地址：RuleGo
演示地址：https://editor.rulego.cc/
截图：

[OSpoon]

自定义插件-拖拽面板：

1. 使用 Quarkc 开发 WebComponent 组件，实现自定义拖转面板：

对于一般的前端开发者来说，接触 WebComponent 少可能是这块的一个难点

2. 使用 Ant Design Vue 的 Collapse 组件，实现自定义拖拽面板：

对于一般的前端开发者来说，h 函数使用的少可能是这块的一个难点

3. 使用 Ant Design React 的 Collapse 组件，实现自定义拖拽面板：

对于非的 React 的前端开发者来说，掌握简单的 React 知识即可完成

Tip：

源码地址：https://github.com/OSpoon/lf-dnd-panel

[gaoyakang]

项目地址：https://github.com/gaoyakang/online_logisim

在线预览：https://mrx.wiki/