<body onload="init()">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myDiagramDiv" style="width: 150px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black; "></div>
<div id="myDiagramDiv2" style="flex-grow: 1; height: 400px; border: solid 1px black; "></div>
</div>
<p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
var model = new go.GraphLinksModel(
[
{ key: 0, text: "Group 1", isGroup: true, color: "red" },
{ key: 1, text: "Node 1", color: "orange", group: 0 },
{ key: 2, text: "Node 2", color: "lightgreen", group: 0 },
{ key: 3, text: "Group 2", isGroup: true, group: 0, color: "blue" },
{ key: 4, text: "Node 3", color: "pink", group: 3 }
],
[
{ from: 1, to: 2 }
]);
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
"undoManager.isEnabled": true, // enable undo & redo
"animationManager.isEnabled": false,
layout: $(go.GridLayout, { alignment: go.GridLayout.Position })
});
myDiagram2 = $(go.Diagram, "myDiagramDiv2",
{
"undoManager.isEnabled": true, // enable undo & redo
layout: $(go.GridLayout, { alignment: go.GridLayout.Position })
});
myDiagram.nodeTemplate =
$(go.Node,
$(go.TextBlock, { margin: 2 }, new go.Binding("text"))
);
// no links in navigation diagram
myDiagram.linkTemplate = $(go.Link);
myDiagram.groupTemplate =
$(go.Group,
{
layout: $(go.GridLayout,
{
alignment: go.GridLayout.Position,
spacing: new go.Size(0, 2),
cellSize: new go.Size(1, 1),
wrappingColumn: 1
})
},
new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
$(go.Panel, "Table",
$("SubGraphExpanderButton",
{ row: 0, column: 0, margin: new go.Margin(0, 1, 0, 0) }
),
$(go.TextBlock,
{
row: 0, column: 1,
alignment: go.Spot.Left,
editable: true,
margin: 2
},
new go.Binding("text", "text").makeTwoWay()
),
$(go.Placeholder, { row: 1, column: 1, padding: 0 })
)
);
myDiagram2.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")
),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text")
)
);
myDiagram2.groupTemplate =
$(go.Group, "Auto",
{
background: "transparent",
layout: $(go.GridLayout, { wrappingColumn: 2 })
},
new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 16px sans-serif",
opacity: 0.75,
stroke: "#404040"
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5, alignment: go.Spot.TopLeft })
) // end Vertical Panel
); // end Group and call to add to template Map
// but use the default Link template, by not setting Diagram.linkTemplate
// create the model data that will be represented by Nodes and Links
myDiagram.model = model;
myDiagram2.model = model;
}
External CSS
This Pen doesn't use any external CSS resources.