复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv"></div>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "lightblue";
node.add(shape);
var textblock = new go.TextBlock();
textblock.text = "Hello!";
textblock.margin = 5;
node.add(textblock);
diagram.add(node);
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv"></div>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, go.Panel.Auto,
$(go.Shape, {
figure: "RoundedRectangle",
fill: "lightblue"
}),
$(go.TextBlock, {
text: "Hello!",
margin: 5
})
));
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv"></div>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "Hello!", {
margin: 5
})
));
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS实例</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv"></div>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: $(go.Brush, "Linear", {
0.0: "Violet",
1.0: "Lavender"
})
}),
$(go.TextBlock, "Hello!", {
margin: 5
})
));
</script>
</body>
复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hwl</title>
</head <body>
<div id="myDiagramDiv" style="border:solid 1px blue; width:400px; height:150px"></div>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = new go.GraphLinksModel(
[{
key: "wo"
}, {
key: "ai"
}, {
key: "ni"
}], // 数组中有3个节点数据
[{
from: "wo",
to: "ai"
}, {
from: "ai",
to: "ni"
}] // 数组中有3个连接数据
);
</script>
</body>
</html>
原文：https://www.cnblogs.com/Alwaysbecoding/p/11848273.html