文件引用

<script src="gojs/go-debug_ok.js"></script>

可以用cdn上面的最新版本，也可以引用本地down下来的文件。

或者使用 npm 下载到项目中，引入使用import go, { ChangedEvent } from "gojs"

创建画布

随便定义一个html元素，作为我们的画布

<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;">
</div>

然后使用gojs的api初始化画布

// 创建画布
var objGo = go.GraphObject.make;
var myDiagram = objGo(go.Diagram, "myDiagramDiv", {
  //模型图的中心位置所在坐标
  initialContentAlignment: go.Spot.Center,

  //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
  "undoManager.isEnabled": true,

  //不运行用户改变图表的规模
  allowZoom: false,

  //画布上面是否出现网格
  "grid.visible": true,

  //允许在画布上面双击的时候创建节点
  "clickCreatingTool.archetypeNodeData": { text: "Node" },

  //允许使用ctrl+c、ctrl+v复制粘贴
  "commandHandler.copiesTree": true,

  //允许使用delete键删除节点
  "commandHandler.deletesTree": true,

  // dragging for both move and copy
  "draggingTool.dragsTree": true,
});
this.diagram = $(go.Diagram, "chart-diagram",
{
    // 画布初始位置
    initialContentAlignment: go.Spot.LeftSide, // 居中显示
    "undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
    // 初始坐标
    // initialPosition: new go.Point(0, 0),
    //allowSelect:false,  ///禁止选中
    // "toolManager.hoverDelay": 100, //tooltip提示显示延时
    // "toolManager.toolTipDuration": 10000, //tooltip持续显示时间
    //  isReadOnly:true,//只读

    //禁止水平拖动画布
    //禁止水平滚动条
    allowHorizontalScroll: false,
    // 禁止垂直拖动画布
    //禁止垂直滚动条
    allowVerticalScroll: false,
    allowZoom: true,//画布是否可以缩放
    "grid.visible": false, //显示网格
    // allowMove: true, //允许拖动
    // allowDragOut:true,
    allowDelete: true,//禁止删除节点
    allowCopy: true,//禁止复制
    // 禁止撤销和重做
    // "undoManager.isEnabled": false,
    // 画布比例
    // scale:1.5，
    // minScale:1.2,//画布最小比例
    // maxScale:2.0,//画布最大比例
    // 画布初始化动画时间
    // "animationManager.duration": 600,
    // 禁止画布初始化动画
    "animationManager.isEnabled": false,
    // autoScale:go.Diagram.Uniform,//自适应

    // autoScale:go.Diagram.UniformToFill,//自适应
    //    "draggingTool.dragsLink": false,//拖动线
    // autoScale:go.Diagram.None,//默认值不自适应
    // 画布边距padding
    // padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
    // validCycle: go.Diagram.CycleDestinationTree，//只允许有一个父节点
    //节点模块动画  S
    // "animationManager.initialAnimationStyle":go.Animation.EaseOutExpo,
    // "animationManager.initialAnimationStyle": go.Animation.EaseInOutQuad,
    "animationManager.initialAnimationStyle": go.AnimationManager.None,
    // "animationManager.initialAnimationStyle":go.AnimationManager.AnimateLocations,
    //节点模块动画   D
    // validCycle: go.Diagram.CycleNotUndirected，

    // validCycle: go.Diagram.CycleNotDirected，
    // validCycle: go.Diagram.CycleSourceTree，
    //ismodelfied:true //禁止拖拽
    // 禁止鼠标拖动区域选中
    // "dragSelectingTool.isEnabled" : false,
    //允许使用delete键删除模块
    "commandHandler.deletesTree": true,
    // "hasHorizontalScrollbar":false,//去除水平滚动条
    // "hasVerticalScrollbar":false,//去除竖直滚动条
    // "canStart":false,
    // allowClipboard: true,
    // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
    // layout: $(go.TreeLayout,
    //  { angle: 90, layerSpacing: 80 }),
}
);

官方文档：

var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
// the entire node will have a light-blue background
{ background: "#44CCFF" },
$(go.Picture,
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{ margin: 10, width: 50, height: 50, background: "red" },
// Picture.source is data bound to the "source" attribute of the model data
new go.Binding("source")),
$(go.TextBlock,
"Default Text",  // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
// TextBlock.text is data bound to the "name" attribute of the model data
new go.Binding("text", "name"))
);
var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
{ name: "Don Meow", source: "/images/learn/cat1.png" },
{ name: "Copricat", source: "/images/learn/cat2.png" },
{ name: "Demeter",  source: "/images/learn/cat3.png" },
{ /* Empty node data */  }
];
myDiagram.model = model;

创建模型数据

在model中添加模型节点数据

var myModel = objGo(go.Model);//创建Model对象
// model中的数据每一个js对象都代表着一个相应的模型图中的元素
myModel.nodeDataArray = [
    { key: "key0" },
    { key: "key1" },
    { key: "key2" },
    { key: "key3" },
];
myDiagram.model = myModel; //将模型数据绑定到画布图上

创建节点

上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试

在gojs里面给我们提供了几种模型节点的可选项，官方文档：

Shape:形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
TextBlock:文本域（可编辑）
Picture:图片
Panel:容器来保存其他Node的集合默认的节点模型代码只是由一个TextBlock组件构建成

GoJS上手

文件引用

创建画布

创建模型数据

创建节点