krthr / Vue Dataflow Editor
Vue 2 dataflow graph editor
Stars: ✭ 73
Projects that are alternatives of or similar to Vue Dataflow Editor
Vue Blocks
Vue2 dataflow graph editor
Stars: ✭ 201 (+175.34%)
Mutual labels: graph, dataflow, editor, vuejs2
Blocks.js
JavaScript dataflow graph editor
Stars: ✭ 165 (+126.03%)
Mutual labels: graph, dataflow, editor
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+494.52%)
Mutual labels: graphics, vuejs2
Core2d
A multi-platform data driven 2D diagram editor.
Stars: ✭ 475 (+550.68%)
Mutual labels: graphics, editor
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+2757.53%)
Mutual labels: graph, editor
Litegraph.js
A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.
Stars: ✭ 2,735 (+3646.58%)
Mutual labels: graph, editor
Aachartkit Swift
📈📊📱💻🖥️An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. 极其精美而又强大的跨平台数据可视化图表框架,支持柱状图、条形图、…
Stars: ✭ 1,962 (+2587.67%)
Mutual labels: graph, graphics
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+9316.44%)
Mutual labels: editor, vuejs2
Macsvg
macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
Stars: ✭ 789 (+980.82%)
Mutual labels: graphics, editor
The Graph
SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
Stars: ✭ 896 (+1127.4%)
Mutual labels: graph, editor
Pyflowgraph
Python Module for displaying flowgraphs using Pyside or PyQt.
Stars: ✭ 61 (-16.44%)
Mutual labels: graph, dataflow
Ggeditor
A visual graph editor based on G6 and React
Stars: ✭ 3,220 (+4310.96%)
Mutual labels: graphics, editor
Baklavajs
Graph / node editor in the browser using VueJS
Stars: ✭ 157 (+115.07%)
Mutual labels: graph, editor
Luban H5
[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.
Stars: ✭ 4,991 (+6736.99%)
Mutual labels: editor, vuejs2
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (+14995.89%)
Mutual labels: graph, graphics
Xnode
Unity Node Editor: Lets you view and edit node graphs inside Unity
Stars: ✭ 2,077 (+2745.21%)
Mutual labels: graph, editor
Diagram
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
Stars: ✭ 510 (+598.63%)
Mutual labels: graph, editor
vue-dataflow-editor
Hey, you can use https://github.com/jagenjo/litegraph.js.
Based on vue-blocks. A @ghostiam's project.
npm
npm i @krthr/vue-dataflow-editor
Import the lib on app.js
// app.js or main.js, or the main file
// where you create the vue app
import Vue from "vue";
// other imports
import "@krthr/vue-dataflow-editor";
import "@krthr/vue-dataflow-editor/dist/vue-dataflow-editor.css";
const app = new Vue({
/* ... */
});
<template>
<vue-blocks-container
class="container"
:blocks-content="[]"
:scene.sync="{}"
/>
</template>
browser
<body>
<div id="app">
<vue-blocks-container
ref="container"
:blocks-content="[]"
:scene.sync="{}"
class="container"
/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@krthr/[email protected]/dist/vue-dataflow-editor.umd.min.js"></script>
<script>
new Vue({
el: "#app",
// ...
});
</script>
</body>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].