为了更容易地搜索 JavaScript 代码和文档，或者通过修改示例进行实验， 您可以通过各种方式安装 GoJS 套件，从我们的下载页面下载一个ZIP文件。
Category:
GoJS
以下代码定义了一个节点模板和模型数据，生成一个包含少量节点和链接的小图。
// the node template describes how each Node should be constructed
diagram.nodeTemplate =
new go.Node("Auto")
.add( // the Shape will be sized to go around the TextBlock
new go.Shape("RoundedRectangle")
// Shape.fill is bound to Node.data.color
.bind("fill", "color"),
new go.TextBlock({ margin: 8}) // Specify a margin to add some room around the text
// TextBlock.text is bound to Node.data.text
.bind("text")
);
// the Model holds only the essential information describing the diagram
diagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node;
// the "color" property is added specifically for this app
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
// enable Ctrl-Z to undo and Ctrl-Y to redo
diagram.undoManager.isEnabled = true;您可以以多种方式与该图表进行互动：
- 你可以通过点击来选择一个部分（一个节点或一个连接）。 选定的节点会用一个装饰突出显示，该装饰是一个围绕节点的蓝色矩形。 选定的连接会用一条沿着连接路径的蓝色线条来突出显示。
- 可以同时选择多个部分。 点击时按住Shift键以添加到选择中。 点击时按住Control键以切换该部分是否被选中。
- 另一种多选方式是在背景上点击并按住鼠标（不在零件上），等待片刻，然后拖动一个框。 当松开鼠标时，框内完全包含的零件将被选中。 Shift 和 Control 修改键在该操作中也可以使用。
- Ctrl-A 选择图表中的所有部分。
- 通过选择并拖动一个或多个节点来移动它们。
- 复制选定部分可以使用复制/粘贴（Ctrl-C/Ctrl-V）或Ctrl-鼠标拖动。
- 使用删除键删除选定部分。
- 按Ctrl-Z撤销上一次修改，按Ctrl-Y恢复上一次修改。
- 如果滚动条可见，或者整个零件集合小于图表的可见区域（“视口”），在背景上按住鼠标不放（不在零件上），可以平移图表。
- 使用鼠标滚轮上下滚动，使用Shift + 鼠标滚轮左右滚动。 Ctrl + 鼠标滚轮用于放大和缩小。
您还可以在触摸设备上用手指进行平移、捏放缩放、选择、复制、移动、删除、撤销和重做。 大多数可以从键盘调用的命令，您可以通过按住手指静止片刻来调用默认的上下文菜单进行调用。
文档中所有示例的唯一特点是它们都是“动态”的——没有截图！ 它们是由源代码实现的真正的图表。 您可以与它们互动——有些甚至显示动画。
为了更容易地搜索 JavaScript 代码和文档，或者通过修改示例进行实验， 您可以通过各种方式安装 GoJS 套件：
- 从我们的下载页面下载一个ZIP文件。
- 克隆或下载自 GoJS 在 GitHub 上.
- 使用
npm install gojs和npm create gojs-kit@latest安装 GoJS。