murongqimiao / Dag Diagram
Licence: mit
VUE plugin for DAG graph , u can use it 4 flow diagram or machine learning visualization
Stars: ✭ 286
Projects that are alternatives of or similar to Dag Diagram
Butterfly
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+719.23%)
Mutual labels: dag, diagram
X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+839.16%)
Mutual labels: dag, diagram
plantuml-libs
A set of PlantUML libraries and a NPM cli tool to design diagrams which focus on several technologies/approaches: Amazon Web Services (AWS), Azure, Google Cloud Platform (GCP), C4 Model or even EventStorming and more.
Stars: ✭ 75 (-73.78%)
Mutual labels: diagram
idle
parse source code(objective-c, java) generate uml(class diagram)
Stars: ✭ 44 (-84.62%)
Mutual labels: diagram
pinout
An open source Python package that generates hardware pinout diagrams as SVG images.
Stars: ✭ 298 (+4.2%)
Mutual labels: diagram
react-visual-modeling
A DAG React Component for visualization modeling, suitable for UML, database modeling, data warehouse construction.(一个基于React的数据可视化建模的DAG图,适用于UML,数据库建模,数据仓库建设等业务)
Stars: ✭ 96 (-66.43%)
Mutual labels: dag
vue-dag
🏗 Data-driven directed acyclic graph (DAG) builder for Vue.js
Stars: ✭ 37 (-87.06%)
Mutual labels: dag
SCView
Simple Express-G Viewer. Tiny implementation. Based on STEPCode
Stars: ✭ 35 (-87.76%)
Mutual labels: diagram
fc4-framework
A Docs as Code tool that helps software creators and documentarians author software architecture diagrams using the C4 model for visualising software architecture.
Stars: ✭ 121 (-57.69%)
Mutual labels: diagram
Swift Diagram Playgrounds
Drawing diagrams in Swift using a recursive enum data structure
Stars: ✭ 264 (-7.69%)
Mutual labels: diagram
eddy
A graphical editor for the specification and visualization of Graphol ontologies
Stars: ✭ 24 (-91.61%)
Mutual labels: diagram
GiGraph
Simple yet versatile library for generating graphs in the DOT language
Stars: ✭ 25 (-91.26%)
Mutual labels: diagram
VUE DAG diagram
=========== for English guide , click there
使用说明
B站视频 https://www.bilibili.com/video/av80288517/
效果展示
使用方法
- 基础安装
npm install --save dag-board
vue项目的main.js中
import DAGBoard from 'dag-board'
Vue.use(DAGBoard)
具体文件里中
<DAGBoard :DataAll="DataAll" @updateDAG="updateDAG" @editNodeDetails="editNodeDetails"></DAGBoard>
DataAll: 数据源
updateDAG:每次动作行为会抛出最新的数据, 和对应事件名称.
editNodeDetails: 可选内容,右键点击节点会带出节点数据,用此方法接受, 进行二次开发.比如更改节点携带的数据等.
- 高级安装 (动态添加节点的时候模拟用)
<node-bus v-if="nodeBusDragging" // 是否正在添加节点
:value="nodeName" // 模拟的节点名称
:pos_x="nodeBusPositionX" // 动态赋值 鼠标位置的x坐标
:pos_y="nodeBusPositionY" /> // 动态赋值 鼠标位置的y坐标
以上内容均可前往github 下载项目查看使用过程, 熟练使用vue即可无障碍阅读代码.
数据源的扩展性 / 样式自定义
为了更多同学能友好体验,在github右侧有JSON模拟器.使用如下图.
一份完整的节点包括以下几个内容
{
"id": 1, // 节点id
"in_ports": [ 0 ], // 入口下标
"name": "NODE_PARENT", // 节点名称
"out_ports": [ 0, 1 ], // 出口下标
"pos_x": 157, // 节点坐标 距离左侧
"pos_y": 120, // 节点坐标 距离顶部
"nodeStyle": { /* 非必要 节点样式 */
"border": "2px solid red"
},
"iconStyle": { /* 非必要 节点icon样式 */
"background": "red"
},
"iconClassName": "el-icon-link", /* 非必要 节点icon的类名 */
"nameDescribe": "气泡内容", /* 非必要 气泡内容 */
},
// 一份完整的节点关系包括以下几个内容
"edges": [
{
"dst_input_idx": 0, // 目标节点出口的下标
"dst_node_id": 2, // 目标节点的id
"id": 1, // 节点的id
"src_node_id": 1, // 来源节点的id
"src_output_idx": 0 // 来源节点的入口下标
"style": { } /* 非必要 自定义节点样式 */
}
],
很多内容致敬了阿里PAI的早期样式
如果使用当中有任何问题或者实现不了的需求,
可以qq群艾特我.793841737.
更新说明 2020年10月17日15:44:49
增加了删除按钮的取消范围 增加了path的可选范围 正在做自动布局
更新说明 2020年04月29日17:30:15
增加新示范页, 可以进行节点拖拽添加,及单节点表单信息编辑功能,以帮助新用户快速上手.
更新说明 2019-12-04 15:55:15
增加横版模式 ( demo页点击右上角 change version 体验 )
开启横版模式
缓存放入
GlobalConfig: {
isVertical: Boolean // true是默认模式 false为横版模式
}
拖拽更加顺滑 缩放效率更加合理
更新说明 2019年09月23日17:34:22
节点可以添加
rightClickEvent": [
{
"label": "do some thing1",
"eventName": "eventOfDoSomeThingFirst"
},
{
"label": "do some thing2",
"eventName": "evnetOfDoSomeThingSecond"
}
],
属性来实现私有方法追加, 右键的面板会展示私有方法名.点击可以触发 doSthPersonal方法, 第一个参数为你定义的方法名, 第二个参数可以拿到节点id, 具体看demo即可.
<DAGBoard :DataAll="DataAll" @updateDAG="updateDAG" @editNodeDetails="editNodeDetails" @doSthPersonal="doSthPersonal"></DAGBoard>
更新说明 2019年10月09日12:26:25
节点可以添加
edgesText
textStyle
{
"dst_input_idx": 0,
"dst_node_id": 2,
"id": 1,
"src_node_id": 1,
"src_output_idx": 3,
"edgesText": "example text"
},
{
"dst_input_idx": 1,
"dst_node_id": 3,
"id": 2,
"src_node_id": 1,
"src_output_idx": 1,
"edgesText": "personal style",
"textStyle": {
"fontSize": "12px",
"stroke": "yellow"
}
},
属性来实现文字的展示, edgesText是文字内容, textStyle是文字的私有样式,注意是svg的标签, 字段与普通dom不同
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].