GoJs制作简单的流程图

一、 简介

因为公司业务需求，要编写一个可配置的流程图。我老大给我推荐了Go.js这个功能强大的可视化图表库。这几天一直泡在GoJs的官网上，可惜全是英文看起来非常吃力。希望每天总结一下可以，梳理一下学习中的漏洞。

就从一个小demo开始吧

二、简单的流程图制作

利用GoJs制作一个简单的流程图

第一步

下载go.js
然后新建一个HTML文件

//引入go.js
<script src="./go.js"></script>

//创建存放画布的盒子
<div style="width: 100%; display: flex; justify-content: space-between">
     <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: #282c34;"></div>
     <div id="myDiagramDiv" style="flex-grow: 1; height: 750px; background-color: #282c34;"></div>
</div>

//创建画布
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");

第二步

给画布添加一个简单的流程图

//定义节点模板 go.Shape定义节点图形 
myDiagram.nodeTemplate =
    $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { //矩形
             fill: "white"//默认白色
        },
        new go.Binding("fill", "color")), //将Shape.fill绑定为node.data.color
        $(go.TextBlock, {
              margin: 5
        },
        new go.Binding("text", "key")) //将TextBlock.text绑定为node.data.key
     );
 //定义连接线的模板
 myDiagram.linkTemplate =
     $(go.Link,
          $(go.Shape, //连接线
          new go.Binding("stroke", "color"),
          new go.Binding("strokeWidth", "thick")),
          $(go.Shape, //箭头形状
               {
                   toArrow: "OpenTriangle",
                   fill: null
               },
          new go.Binding("stroke", "color"),
          new go.Binding("strokeWidth", "thick"))
      );
      //添加节点数据
          var nodeDataArray = [{
                key: "start",
                color: "lightblue",
            },
            {
                key: "yes",
                // color: "white",
            },
            {
                key: "end",
                color: "pink",
            }
        ];
       //添加连接线数据
        var linkDataArray = [{
            from: "start",
            to: "yes"
        }, {
            from: "yes",
            to: "end"
        }];
        //将节点挂载到模型上
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

第三步

添加画板

myPalette =
     $(go.Palette, "myPaletteDiv", {
           nodeTemplateMap: myDiagram.nodeTemplateMap, //共享画布的节点模板
           model: new go.GraphLinksModel([{ //在画板上添加需要的节点模板
                key: "Start"
           }])
      });

最终效果图

实在是太简单了😂
欢迎纠错 谢谢