create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
564 lines (515 loc) • 27.5 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="An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses." />
<meta itemprop="description" content="An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses." />
<meta property="og:description" content="An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses." />
<meta name="twitter:description" content="An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses." />
<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="Interactive Voice Response Tree Diagram with Collapsible List of Details" />
<meta property="og:title" content="Interactive Voice Response Tree Diagram with Collapsible List of Details" />
<meta name="twitter:title" content="Interactive Voice Response Tree Diagram with Collapsible List of Details" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/ivrtree.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/ivrtree.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/ivrtree.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/IVRtree.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/IVRtree.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Interactive Voice Response Tree Diagram with Collapsible List of Details | 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', {
allowCopy: false,
'draggingTool.dragsTree': true,
'commandHandler.deletesTree': true,
'commandHandler.liveElementId': 'screenreader',
'commandHandler.focusChanged': (oldfocus, newfocus, cmd) => updateFocus(newfocus, oldfocus),
'TreeCollapsed': e => updateFocus(e.subject.first().findObject('TreeExpander')),
'TreeExpanded': e => updateFocus(e.subject.first().findObject('TreeExpander')),
'Changed': e => { // there's no DiagramEvent for 'PanelExpanderButton' actions
if (e.change === go.ChangeType.Property && e.object.name === 'COLLAPSIBLE' && e.propertyName === 'visible') {
updateFocus(e.object.part.findObject('PanelExpander'));
}
},
layout: new go.TreeLayout({ angle: 90, arrangement: go.TreeArrangement.FixedRoots }),
'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
});
function updateFocus(newfocus, oldfocus) {
const cmd = myDiagram.commandHandler;
if (!newfocus) newfocus = cmd.focus;
if (!oldfocus) oldfocus = null;
let msg = '';
if (newfocus instanceof go.Link) {
msg = cmd.describe(oldfocus, newfocus);
} else {
const node = (newfocus && !(newfocus instanceof go.Node) && newfocus.part instanceof go.Node) ? newfocus.part : null;
if (newfocus instanceof go.Node) {
msg = newfocus.data.question || newfocus.data.text;
if (Array.isArray(newfocus.data.actions) && newfocus.data.actions.length > 0) {
msg += '. Choices: ' + newfocus.data.actions.map(act => act.text).join(', ');
}
} else if (newfocus && newfocus.name === 'PanelExpander') {
msg = 'Button: ' + (newfocus.part.findObject('COLLAPSIBLE').visible ? 'Collapse' : 'Expand') + ' list of choices';
if (node) msg += '. Type Escape to focus on ' + (node.data.question || node.data.text);
} else if (newfocus && newfocus.name === 'TreeExpander') {
msg = 'Button: ' + (newfocus.part.isTreeExpanded ? 'Collapse' : 'Expand') + ' subtree of choices or people';
if (node) msg += '. Type Escape to focus on ' + (node.data.question || node.data.text);
}
}
// normal use of the <span> holding content that is read aloud:
const screenreader = document.getElementById('screenreader');
if (screenreader) screenreader.textContent = msg;
}
myDiagram.themeManager.set('', {
colors: {
primary: '#155e75',
terminal: '#047857'
}
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener('Modified', e => {
const button = document.getElementById('SaveButton');
if (button) button.disabled = !myDiagram.isModified;
const idx = document.title.indexOf('*');
if (myDiagram.isModified) {
if (idx < 0) document.title += '*';
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
go.Shape.defineFigureGenerator('Van', (shape, w, h) => {
var geo = go.Geometry.parse(
'M37.409,18.905l-4.946-7.924c-0.548-0.878-1.51-1.411-2.545-1.411H3c-1.657,0-3,1.343-3,3v16.86c0,1.657,1.343,3,3,3h0.787 c0.758,1.618,2.391,2.75,4.293,2.75s3.534-1.132,4.292-2.75h20.007c0.758,1.618,2.391,2.75,4.293,2.75 c1.9,0,3.534-1.132,4.291-2.75h0.787c1.656,0,3-1.343,3-3v-2.496C44.75,22.737,41.516,19.272,37.409,18.905z M8.087,32.395 c-1.084,0-1.963-0.879-1.963-1.963s0.879-1.964,1.963-1.964s1.963,0.88,1.963,1.964S9.171,32.395,8.087,32.395z M26.042,21.001 V15.57v-2.999h3.876l5.264,8.43H26.042z M36.671,32.395c-1.084,0-1.963-0.879-1.963-1.963s0.879-1.964,1.963-1.964 s1.963,0.88,1.963,1.964S37.755,32.395,36.671,32.395z'
);
return geo.scale(w / geo.bounds.width, h / geo.bounds.height);
});
go.Shape.defineFigureGenerator('SUV', (shape, w, h) => {
var geo = go.Geometry.parse(
'M246,90.011V59.995c0-5.523-4.48-9.995-10-9.995h-50L156.97,6.416C155.11,3.634,152.34,2,149,2H28 c-5.52,0-10,4.446-10,9.969V30h-8c-4.42,0-8,3.56-8,7.983v40.022C2,82.427,5.58,86,10,86h8v20h16.458 c2.8-15.959,16.702-28.066,33.462-28.066c16.75,0,30.708,12.107,33.518,28.066h72.958c2.8-15.959,16.764-28.066,33.524-28.066 c16.75,0,30.624,12.107,33.434,28.066H250c4.42,0,8-3.563,8-7.985v-8.004H246z M86,50H30V13.97h56V50z M98,50V13.97h48L170,50H98z M68,138c-14.336,0-26.083-11.706-26.083-26.051s11.664-26.014,26-26.014s26,11.669,26,26.014S82.336,138,68,138z M67.917,99.943 c-6.617,0-12,5.386-12,12.006c0,6.621,5.383,12.006,12,12.006s12-5.386,12-12.006C79.917,105.329,74.534,99.943,67.917,99.943z M208,138c-14.337,0-26.083-11.706-26.083-26.051s11.663-26.014,26-26.014s26,11.669,26,26.014S222.337,138,208,138z M207.917,99.943c-6.617,0-12,5.386-12,12.006c0,6.621,5.383,12.006,12,12.006s12-5.386,12-12.006 C219.917,105.329,214.534,99.943,207.917,99.943z'
);
return geo.scale(w / geo.bounds.width, h / geo.bounds.height);
});
go.Shape.defineFigureGenerator('Hammer', (shape, w, h) => {
var geo = go.Geometry.parse(
'M19 5.5a4.5 4.5 0 01-4.791 4.49c-.873-.055-1.808.128-2.368.8l-6.024 7.23a2.724 2.724 0 11-3.837-3.837L9.21 8.16c.672-.56.855-1.495.8-2.368a4.5 4.5 0 015.873-4.575c.324.105.39.51.15.752L13.34 4.66a.455.455 0 00-.11.494 3.01 3.01 0 001.617 1.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15.14.435.216.9.216 1.382zM4 17a1 1 0 100-2 1 1 0 000 2z'
);
return geo.scale(w / geo.bounds.width, h / geo.bounds.height);
});
// each action is represented by a shape and some text
var actionTemplate =
new go.Panel('TableRow')
.add(
new go.Shape({ column: 0, width: 20, height: 20, fill: null })
.bind('figure')
.theme('stroke', 'text'),
new go.TextBlock({ column: 1, font: '11pt Verdana, sans-serif' })
.bind('text')
.theme('stroke', 'text'),
new go.TextBlock({ column: 2, font: '11pt Verdana, sans-serif' })
.bindObject('text', 'itemIndex', i => `[${i}]`)
.theme('stroke', 'text')
);
// each regular Node has body consisting of a title followed by a collapsible list of actions,
// controlled by a PanelExpanderButton, with a TreeExpanderButton underneath the body
myDiagram.nodeTemplate = // the default node template
new go.Node('Vertical', {
selectionObjectName: 'BODY',
locationSpot: go.Spot.Top // centered vertically, aligned at top horizontally
})
// the main "BODY" consists of a RoundedRectangle surrounding nested Panels
.bindTwoWay('isTreeExpanded') // remember the expansion state for
.bindTwoWay('wasTreeExpanded') // when the model is re-loaded
.add(
new go.Panel('Auto', { name: 'BODY' })
.add(
new go.Shape('RoundedRectangle', { strokeWidth: 0 })
.theme('fill', 'primary'),
new go.Panel('Vertical', { margin: 3 })
.add(
// the title
new go.TextBlock({
stretch: go.Stretch.Horizontal,
font: 'bold 12pt Verdana, sans-serif',
stroke: 'white'
})
.bind('text', 'question'),
// the optional list of actions
new go.Panel('Vertical', {
stretch: go.Stretch.Horizontal,
visible: false
}) // not visible unless there is at least one action
.bind('visible', 'actions', acts => Array.isArray(acts) && acts.length > 0)
.add(
// headered by a label and a PanelExpanderButton inside a Table
new go.Panel('Table', { stretch: go.Stretch.Horizontal })
.add(
new go.TextBlock('Choices', {
alignment: go.Spot.Left,
font: '10pt Verdana, sans-serif',
stroke: 'white'
}),
go.GraphObject.build('PanelExpanderButton', {
name: 'PanelExpander',
column: 1,
alignment: go.Spot.Right,
'ButtonIcon.stroke': 'white'
},
'COLLAPSIBLE') // name of the object to make visible or invisible
), // end Table panel
// with the list data bound in the Table Panel
new go.Panel('Table', {
name: 'COLLAPSIBLE', // identify to the PanelExpanderButton
padding: 2,
stretch: go.Stretch.Horizontal, // take up whole available width
defaultAlignment: go.Spot.Left, // thus no need to specify alignment on each element
defaultSeparatorPadding: 3,
itemTemplate: actionTemplate // the Panel created for each item in Panel.itemArray
})
.theme('background', 'div')
.bind('itemArray', 'actions')
// bind Panel.itemArray to nodedata.actions
) // end optional Vertical Panel
) // end outer Vertical Panel
), // end "BODY" Auto Panel
new go.Panel({ // this is underneath the "BODY"
height: 17 // always this height, even if the TreeExpanderButton is not visible
})
.add(go.GraphObject.build('TreeExpanderButton', { name: 'TreeExpander' }))
);
// define a second kind of Node:
myDiagram.nodeTemplateMap.add('Terminal',
new go.Node('Spot', { locationSpot: go.Spot.Top })
.add(
new go.Shape('Circle', { width: 55, height: 55, strokeWidth: 0 })
.theme('fill', 'terminal'),
new go.TextBlock({ font: '10pt Verdana, sans-serif', stroke: 'white' })
.bind('text')
)
);
myDiagram.linkTemplate =
new go.Link({
routing: go.Routing.Orthogonal, corner: 10,
deletable: false, toShortLength: 4
})
.add(
new go.Shape({ strokeWidth: 2 })
.theme('stroke', 'link'),
new go.Shape({ toArrow: 'Standard', strokeWidth: 0 }) // the arrowhead
.theme('fill', 'link')
);
var nodeDataArray = [
{
key: 1,
question: 'Greeting',
actions: [
{ text: 'Sales', figure: 'BpmnEventConditional' },
{ text: 'Parts and Services', figure: 'Gear' },
{ text: 'Representative', figure: 'BpmnTaskUser' }
]
},
{
key: 2,
question: 'Sales',
actions: [
{ text: 'Compact', figure: 'RailShipment' },
{ text: 'Mid-Size', figure: 'Forklift' },
{ text: 'Large', figure: 'TruckShipment' }
]
},
{
key: 3,
question: 'Parts and Services',
actions: [
{ text: 'Maintenance', figure: 'Hammer' },
{ text: 'Repairs', figure: 'Caution' },
{ text: 'State Inspection', figure: 'BpmnTaskMessage' }
]
},
{ key: 4, question: 'Representative' },
{ key: 5, question: 'Compact' },
{ key: 6, question: 'Mid-Size' },
{
key: 7,
question: 'Large',
actions: [
{ text: 'SUV', figure: 'SUV' },
{ text: 'Van', figure: 'Van' }
]
},
{ key: 8, question: 'Maintenance' },
{ key: 9, question: 'Repairs' },
{ key: 10, question: 'State Inspection' },
{ key: 11, question: 'SUV' },
{ key: 12, question: 'Van' },
{ key: 13, category: 'Terminal', text: 'Susan' },
{ key: 14, category: 'Terminal', text: 'Eric' },
{ key: 15, category: 'Terminal', text: 'Steven' },
{ key: 16, category: 'Terminal', text: 'Tom' },
{ key: 17, category: 'Terminal', text: 'Emily' },
{ key: 18, category: 'Terminal', text: 'Tony' },
{ key: 19, category: 'Terminal', text: 'Ken' },
{ key: 20, category: 'Terminal', text: 'Rachel' },
{ key: 21, category: 'Terminal', text: 'John' },
{ key: 22, category: 'Terminal', text: 'Jake' }
];
var linkDataArray = [
{ from: 1, to: 2, answer: 1 },
{ from: 1, to: 3, answer: 2 },
{ from: 1, to: 4, answer: 3 },
{ from: 2, to: 5, answer: 1 },
{ from: 2, to: 6, answer: 2 },
{ from: 2, to: 7, answer: 3 },
{ from: 3, to: 8, answer: 1 },
{ from: 3, to: 9, answer: 2 },
{ from: 3, to: 10, answer: 3 },
{ from: 7, to: 11, answer: 1 },
{ from: 7, to: 12, answer: 2 },
{ from: 5, to: 13 },
{ from: 6, to: 14 },
{ from: 11, to: 15 },
{ from: 12, to: 16 },
{ from: 8, to: 17 },
{ from: 9, to: 18 },
{ from: 10, to: 19 },
{ from: 4, to: 20 },
{ from: 4, to: 21 },
{ from: 8, to: 22 }
];
// create the Model with the above data, and assign to the Diagram
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);
function enableKeyboard() {
window.removeEventListener('keydown', enableKeyboard);
myDiagram.commandHandler.isFocusEnabled = true;
myDiagram.commandHandler.isVirtualPointerEnabled = true;
}
window.addEventListener('keydown', enableKeyboard);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 500px"></div>
Theme:
<select id="theme" onchange="changeTheme()">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
Screen Reader: <span id="screenreader"></span>
<p>
An <em>IVR tree</em>, or Interactive Voice Response Tree, is typically used by automated answering systems to direct calls to the correct party. This
particular example is for a car dealership to route calls.
</p>
<p>
This Interactive Voice Response Tree (IVR tree) has nodes that contain a collapsible list of actions, controlled by a <b>PanelExpanderButton</b>, with a
<b>TreeExpanderButton</b> underneath the body. See the <a href="../intro/buttons.html">Intro page on Buttons</a> for more GoJS button information.
</p>
<p>
Once <a>CommandHandler.isFocusEnabled</a> has been set to true, the root node becomes the GoJS <a>CommandHandler.focus</a>,
as shown by a double-colored dashed box around the node.
This allows the user to use the arrow keys to change focus, <code>Space</code> to select the focused Part,
and <code>Enter</code> to go into Nodes and click buttons such as the "PanelExpanderButton" or "TreeExpanderButton".
Read more about <a href="../learn/interactivity.html#FocusKeyboardControlTools">Keyboard Control</a>.
</p>
<p>
Once <a>CommandHandler.isVirtualPointerEnabled</a> has also been set to true, then when the user holds down the <code>Shift</code> key,
it shows a virtual pointer that allows the user to use <code>Shift-Enter</code> and <code>Shift-arrow</code> keys to drag nodes.
The user can always toggle "keyboard control mode" using the <code>Ctrl-Alt-Enter</code> keyboard command.
</p>
<p>
For another sample demonstrating screen-reader assistance, see <a href="./Accessibility.html">Accessibility</a> sample.
</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>Tree Layout</h4>
<p>
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns).
For discussion and examples of the most commonly used properties of the <a href="../api/symbols/TreeLayout.html">TreeLayout</a>,
see the <a href="../intro/trees.html">Trees</a> page in the Introduction.
More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#treelayout">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>