create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
504 lines (462 loc) • 22.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<meta itemprop="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<meta property="og:description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<meta name="twitter:description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Entity Relationship Diagram Nodes have Collapsible Lists of Attributes" />
<meta property="og:title" content="Entity Relationship Diagram Nodes have Collapsible Lists of Attributes" />
<meta name="twitter:title" content="Entity Relationship Diagram Nodes have Collapsible Lists of Attributes" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/entityrelationship.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/entityrelationship.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/entityrelationship.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/entityRelationship.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/entityRelationship.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Entity Relationship Diagram Nodes have Collapsible Lists of Attributes | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="../extensions/Figures.js"></script>
<script src="../extensions/Themes.js"></script>
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
allowDelete: false,
allowCopy: false,
layout: new go.ForceDirectedLayout({ isInitial: false }),
'undoManager.isEnabled': true,
// use "Modern" themes from extensions/Themes
'themeManager.themeMap': new go.Map([
{ key: 'light', value: Modern },
{ key: 'dark', value: ModernDark }
]),
'themeManager.changesDivBackground': true,
'themeManager.currentTheme': document.getElementById('theme').value
});
myDiagram.themeManager.set('light', {
colors: {
primary: '#f7f9fc',
green: '#62bd8e',
blue: '#3999bf',
purple: '#7f36b0',
red: '#c41000'
}
});
myDiagram.themeManager.set('dark', {
colors: {
primary: '#4a4a4a',
green: '#429e6f',
blue: '#3f9fc6',
purple: '#9951c9',
red: '#ff4d3d'
}
});
// the template for each attribute in a node's array of item data
const itemTempl =
new go.Panel('Horizontal', { margin: new go.Margin(2, 0) })
.add(
new go.Shape({
desiredSize: new go.Size(15, 15),
strokeWidth: 0,
margin: new go.Margin(0, 5, 0, 0)
})
.bind('figure')
.themeData('fill', 'color'),
new go.TextBlock({
font: '14px sans-serif',
stroke: 'black'
})
.bind('text', 'name')
.bind('font', 'iskey', k => k ? 'italic 14px sans-serif' : '14px sans-serif')
.theme('stroke', 'text')
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
new go.Node('Auto', { // the whole node panel
selectionAdorned: true,
resizable: true,
layoutConditions: go.LayoutConditions.Standard & ~go.LayoutConditions.NodeSized,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides
})
.bindTwoWay('location')
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
.bindObject('desiredSize', 'visible', v => new go.Size(NaN, NaN), undefined, 'LIST')
.add(
// define the node's outer shape, which will surround the Table
new go.Shape('RoundedRectangle', {
stroke: '#e8f1ff',
strokeWidth: 3
})
.theme('fill', 'primary'),
new go.Panel('Table', {
margin: 8,
stretch: go.Stretch.Fill
})
.addRowDefinition(0, { sizing: go.Sizing.None })
.add(
// the table header
new go.TextBlock({
row: 0,
alignment: go.Spot.Center,
margin: new go.Margin(0, 24, 0, 2), // leave room for Button
font: 'bold 18px sans-serif'
})
.bind('text', 'key')
.theme('stroke', 'text'),
// the collapse/expand button
go.GraphObject.build('PanelExpanderButton', {
row: 0,
alignment: go.Spot.TopRight
},'LIST') // the name of the element whose visibility this button toggles
.theme('ButtonIcon.stroke', 'text'),
new go.Panel('Table', {
name: 'LIST',
row: 1,
alignment: go.Spot.TopLeft
})
.add(
new go.TextBlock('Attributes', {
row: 0,
alignment: go.Spot.Left,
margin: new go.Margin(3, 24, 3, 2),
font: 'bold 15px sans-serif'
})
.theme('stroke', 'text'),
go.GraphObject.build('PanelExpanderButton', {
row: 0,
alignment: go.Spot.Right
}, 'NonInherited')
.theme('ButtonIcon.stroke', 'text'),
new go.Panel('Vertical', {
row: 1,
name: 'NonInherited',
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
itemTemplate: itemTempl
})
.bind('itemArray', 'items'),
new go.TextBlock('Inherited Attributes', {
row: 2,
alignment: go.Spot.Left,
margin: new go.Margin(3, 24, 3, 2), // leave room for Button
font: 'bold 15px sans-serif'
})
.bind('visible', 'inheritedItems', arr => Array.isArray(arr) && arr.length > 0)
.theme('stroke', 'text'),
go.GraphObject.build('PanelExpanderButton', {
row: 2,
alignment: go.Spot.Right
}, 'Inherited')
.bind('visible', 'inheritedItems', arr => Array.isArray(arr) && arr.length > 0)
.theme('ButtonIcon.stroke', 'text'),
new go.Panel('Vertical', {
row: 3,
name: 'Inherited',
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
itemTemplate: itemTempl
})
.bind('itemArray', 'inheritedItems')
)
)
);
// define the Link template, representing a relationship
myDiagram.linkTemplate =
new go.Link({ // the whole link panel
selectionAdorned: true,
layerName: 'Background',
reshapable: true,
routing: go.Routing.AvoidsNodes,
corner: 5,
curve: go.Curve.JumpOver
})
.add(
new go.Shape({ // the link shape
stroke: '#f7f9fc',
strokeWidth: 3
})
.theme('stroke', 'link'),
new go.TextBlock({ // the "from" label
textAlign: 'center',
font: 'bold 14px sans-serif',
stroke: 'black',
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Orientation.Upright
})
.bind('text')
.theme('stroke', 'text'),
new go.TextBlock({ // the "to" label
textAlign: 'center',
font: 'bold 14px sans-serif',
stroke: 'black',
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Orientation.Upright
})
.bind('text', 'toText')
.theme('stroke', 'text')
);
// create the model for the E-R diagram
const nodeDataArray = [
{
key: 'Products',
location: new go.Point(250, 250),
items: [
{ name: 'ProductID', iskey: true, figure: 'Decision', color: 'purple' },
{ name: 'ProductName', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'ItemDescription', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'WholesalePrice', iskey: false, figure: 'Circle', color: 'green' },
{ name: 'ProductPhoto', iskey: false, figure: 'TriangleUp', color: 'red' }
],
inheritedItems: [
{ name: 'SupplierID', iskey: false, figure: 'Decision', color: 'purple' },
{ name: 'CategoryID', iskey: false, figure: 'Decision', color: 'purple' }
]
},
{
key: 'Suppliers',
location: new go.Point(500, 0),
items: [
{ name: 'SupplierID', iskey: true, figure: 'Decision', color: 'purple' },
{ name: 'CompanyName', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'ContactName', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'Address', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'ShippingDistance', iskey: false, figure: 'Circle', color: 'green' },
{ name: 'Logo', iskey: false, figure: 'TriangleUp', color: 'red' }
],
inheritedItems: []
},
{
key: 'Categories',
location: new go.Point(0, 30),
items: [
{ name: 'CategoryID', iskey: true, figure: 'Decision', color: 'purple' },
{ name: 'CategoryName', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'Description', iskey: false, figure: 'Hexagon', color: 'blue' },
{ name: 'Icon', iskey: false, figure: 'TriangleUp', color: 'red' }
],
inheritedItems: [{ name: 'SupplierID', iskey: false, figure: 'Decision', color: 'purple' }]
},
{
key: 'Order Details',
location: new go.Point(600, 350),
items: [
{ name: 'OrderID', iskey: true, figure: 'Decision', color: 'purple' },
{ name: 'UnitPrice', iskey: false, figure: 'Circle', color: 'green' },
{ name: 'Quantity', iskey: false, figure: 'Circle', color: 'green' },
{ name: 'Discount', iskey: false, figure: 'Circle', color: 'green' }
],
inheritedItems: [{ name: 'ProductID', iskey: false, figure: 'Decision', color: 'purple' }]
}
];
const linkDataArray = [
{ from: 'Products', to: 'Suppliers', text: '0..N', toText: '1' },
{ from: 'Products', to: 'Categories', text: '0..N', toText: '1' },
{ from: 'Order Details', to: 'Products', text: '0..N', toText: '1' },
{ from: 'Categories', to: 'Suppliers', text: '0..N', toText: '1' }
];
myDiagram.model = new go.GraphLinksModel({
copiesArrays: true,
copiesArrayObjects: true,
nodeDataArray: nodeDataArray,
linkDataArray: linkDataArray
});
}
const changeTheme = () => {
const myDiagram = go.Diagram.fromDiv('myDiagramDiv');
if (myDiagram) {
myDiagram.themeManager.currentTheme = document.getElementById('theme').value;
}
};
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 700px"></div>
Theme:
<select id="theme" onchange="changeTheme()">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<p>
Sample for representing the relationship between various entities. Try dragging the nodes -- their links will avoid other nodes, by virtue of the
<a>Routing.AvoidsNodes</a> property assigned to the custom link template's <a>Link.routing</a>. Also note the use of
<a href="../intro/buttons.html" target="_blank">Panel Expander Buttons</a> to allow for expandable/collapsible node data.
</p>
<p>Buttons are defined in <a href="../extensions/Buttons.js">Buttons.js</a>.</p>
<p>The dark and light themes are controlled using the <a>ThemeManager</a>.</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Table Panels</h4>
<p>
The "Table" Panel, <a href="../api/symbols/Panel.html#static-Table" target="api">Panel.Table</a>, arranges objects in rows and columns.
Each object in a Table Panel is put into the cell indexed by the value of <a href="../api/symbols/GraphObject.html#row" target="api">GraphObject.row</a> and <a href="../api/symbols/GraphObject.html#column" target="api">GraphObject.column</a>.
The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.
More information can be found in the <a href="../intro/tablePanels.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tables">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Item Arrays</h4>
<p>
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array.
In GoJS, this is simply achieved by binding (or setting) <a href="../api/symbols/Panel.html#itemArray" target="api">Panel.itemArray</a>.
The <a href="../api/symbols/Panel.html" target="api">Panel</a> will create an element in the panel for each value in the Array.
More information can be found in the <a href="../intro/itemArrays.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#itemarrays">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Force Directed Layout</h4>
<p>
This predefined layout treats the graph as if it were a system of physical bodies with forces acting on and between them.
The layout iteratively moves nodes and links to minimize the total sum of forces on each node. The resulting layout will normally not contain
overlapping Nodes, excluding cases where the graph is densely interconnected.
More information can be found in the <a href="../intro/layouts.html#ForceDirectedLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#force-directed">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Buttons</h4>
<p>
GoJS defines several <a href="../api/symbols/Panel.html" target="api">Panel</a>s for common uses.
These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton".
"ContextMenuButton"s are typically used inside of "ContextMenu" Panels;
"CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
</p>
<p>
These predefined panels can be used as if they were <a href="../api/symbols/Panel.html" target="api">Panel</a>-derived classes in calls to <a href="../api/symbols/GraphObject.html#build" target="api">GraphObject.build</a>.
They are implemented as simple visual trees of <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>s in <a href="../api/symbols/Panel.html" target="api">Panel</a>s,
with pre-set properties and event handlers.
</p>
<p>
More information can be found in the <a href="../intro/buttons.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#buttons">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Theming</h4>
<p>
<b>GoJS</b> allows diagrams to be themed. This is commonly used to provide a light and dark mode for diagrams.
</p>
<p>
The <a href="../api/symbols/Diagram.html#themeManager" target="api">Diagram.themeManager</a> handles themes within a <a href="../api/symbols/Diagram.html" target="api">Diagram</a>.
The <a href="../api/symbols/ThemeManager.html" target="api">ThemeManager</a> can by shared by multiple diagrams,
and is responsible to managing the current theme and default theme, along with any theme updates.
More information can be found in the <a href="../intro/theming.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#theme">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>