https://gojs.net/latest/_app/immutable/nodes/91.D87KlJqf.js

1import{B as e,F as t,G as n,K as r,L as i,O as a,P as o,R as s,T as c,Tt as l,U as u,V as d,X as f,_t as p,bt as m,ct as h,dt as g,i as _,it as v,kt as y,lt as b,mt as x,o as S,pt as C,st as w,tt as T,ut as E,w as D,wt as ee,xt as O,y as k,z as A}from"../chunks/DLg-vmKF.js";import{h as te,m as ne,o as j,p as M}from"../chunks/DTHc69UW.js";import"../chunks/xihTtKlq.js";import{t as re}from"../chunks/Pl-DEOOm.js";import{n as N}from"../chunks/BCTQZqmF.js";import"../chunks/BG3M9rDN.js";import{t as P}from"../chunks/-RZBX84i.js";import{t as F}from"../chunks/DKGl565N.js";import{A as I,C as L,D as R,E as z,M as B,O as V,S as H,T as U,_ as W,a as G,b as K,c as q,d as J,f as Y,g as X,h as ie,i as ae,j as oe,k as se,l as ce,m as le,n as ue,o as de,p as fe,r as pe,s as me,t as he,u as ge,v as _e,w as ve,x as ye,y as be}from"../chunks/C-zWKAeW2.js";var Z=[{slug:`flowchart`,url:`/samples/flowchart`,metadata:{title:`Interactive Diagram for Building Flowcharts`,titleShort:`Interactive Flowchart`,indexDescription:`A flowchart and palette, showing different node templates and data bindings. Each node has only one port element. Links are orthogonal and automatically route to avoid nodes.`,screenshot:`flowchart`,priority:.5,tags:[`palette`,`svg`,`process`,`theme`],description:`Interactive flowchart diagram implemented by GoJS in JavaScript for HTML.`}},{slug:`orgChartEditor`,url:`/samples/orgChartEditor`,metadata:{title:`Interactive Organizational Chart Diagram Editor`,titleShort:`Organizational Chart Editor`,indexDescription:`An organizational chart that allows user editing and re-organizing of the hierarchy.`,screenshot:`orgcharteditor`,priority:.5,tags:[`tables`,`treelayout`,`contextmenus`,`buttons`,`inspector`,`theme`],description:`An organization chart editor -- edit details and change relationships.`}},{slug:`familyTree`,url:`/samples/familyTree`,metadata:{title:`Family Tree Diagram of British Nobility`,titleShort:`Family Tree`,indexDescription:`Shows a standard family tree.`,screenshot:`familytree`,priority:.6,tags:[`tables`,`treelayout`],description:`A family tree diagram of British nobility.`}},{slug:`industrialMonitor`,url:`/samples/industrialMonitor`,metadata:{title:`Industrial Monitor SCADA Diagram`,titleShort:`SCADA Industrial Monitor`,indexDescription:`Example of a SCADA industrial monitoring diagram with updating data.`,screenshot:`industrialmonitor`,priority:.65,tags:[`geometries`,`links`,`process`,`monitoring`,`itemarrays`,`scada`,`theme`],description:`SCADA industrial monitoring diagram with updating data, built with the same GoJS concepts used for P&ID software and HMI operator screens.`}},{slug:`hmiOperatorScreen`,url:`/samples/hmiOperatorScreen`,metadata:{title:`High-Performance HMI Operator Screen`,titleShort:`HMI Operator Screen`,indexDescription:`A modern ISA-101 style high-performance HMI for a process skid: live simulation, an alarm banner, moving analog indicators, and clickable equipment icons.`,screenshot:`hmioperatorscreen`,priority:.68,tags:[`monitoring`,`scada`,`process`,`gauges`,`itemarrays`,`geometries`],description:`An ISA-101 high-performance HMI operator screen for a beverage mix & transfer skid: a live first-order-lag simulation, an alarm banner with per-row acknowledge and a 1 Hz unacknowledged blink, moving analog indicators, and click-to-command pumps and valves. Built with the same GoJS concepts used for P&ID software and SCADA monitoring diagrams.`}},{slug:`miningSim`,url:`/samples/miningSim`,metadata:{title:`Mining Site Haulage Simulator`,titleShort:`Mining Simulator`,indexDescription:`A mine haulage simulation over an aerial quarry photo: haul trucks with live telemetry HUDs drive the road network, loading, hauling, dumping and refueling.`,screenshot:`miningSim`,priority:.7,tags:[`animation`,`geometries`,`html`],description:`A mine haulage simulator — haul trucks with floating telemetry HUDs drive a hand-authored road network over an aerial photo, queuing at excavators, tipping into ROM bins and refueling.`}},{slug:`orgChartStatic`,url:`/samples/orgChartStatic`,metadata:{title:`Organizational Chart Diagram with Overview and Search`,titleShort:`Org Chart with Overview`,indexDescription:`Shows an organizational chart, uses an in-laid Overview to aid the user in navigation, and allows the user to search by example.`,screenshot:`orgchartstatic`,priority:.7,tags:[`tables`,`treelayout`,`overview`],description:`A larger org chart with an Overview and searching capability.`}},{slug:`audioEditor`,url:`/samples/audioEditor`,metadata:{title:`UI Workflow Editor with the Web Audio API`,titleShort:`UI Workflow Editor`,indexDescription:`A UI workflow style editor using the Web Audio API. Drag nodes from the palette to apply processing to either oscillators or sample audio.`,screenshot:`audioeditor`,priority:.7,tags:[`palette`,`ports`,`links`,`tools`],description:`A UI workflow style editor built on top of the Web Audio API. Drag nodes from the palette into the diagram to construct an audio graph and apply processing to either oscillators or sample audio and hear parameter changes live.`}},{slug:`genogram`,url:`/samples/genogram`,metadata:{title:`Genogram Family Tree Diagram, with Custom Layout, Printing, Downloading SVG`,titleShort:`Genogram Family Tree`,indexDescription:`A genogram or pedigree chart is an extended family tree diagram that show information about each person or each relationship.`,screenshot:`genogram`,priority:.8,tags:[`itemarrays`,`collections`,`layered-digraph`,`customlayout`,`geometries`,`commands`],description:`A genogram is a family tree diagram for visualizing hereditary patterns.`}},{slug:`networkConfig`,url:`/samples/networkConfig`,metadata:{title:`Network Configuration Diagram Editor With Groups`,titleShort:`Network Editor`,indexDescription:`Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks.`,description:`A CISCO-style network configuration diagram, with a Palette to create new machines and the ability to group nodes into subnetworks.`,screenshot:`networkconfig`,priority:.8,tags:[`palette`,`links`,`groups`]}},{slug:`containerShipping`,url:`/samples/containerShipping`,metadata:{title:`Container Shipping Line Map`,titleShort:`Container Shipping`,indexDescription:`Animated container ships sail between ports on a Leaflet.js map, docking at each stop. Toggle storms that slow vessels.`,screenshot:`containerShipping`,priority:.81,tags:[`animation`,`geometries`,`html`],description:`A live container-line visualization: GoJS vessels, ports, shipping lanes, and a viewport-anchored HUD drawn in front of a Leaflet map, with storms that slow ships and ship and port inspectors.`}},{slug:`stateChart`,url:`/samples/stateChart`,metadata:{title:`State Chart Diagram Editor with Labeled Transition Links`,titleShort:`State Chart Editor`,indexDescription:`A state chart diagram that also shows dynamic creation of new nodes and links on a button press.`,screenshot:`statechart`,priority:.81,tags:[`buttons`,`process`],description:`A finite state machine chart with editable and interactive features.`}}

1,{slug:`processFlow`,url:`/samples/processFlow`,metadata:{title:`Process Flow SCADA Diagram with Tanks, Valves, Pipes and Animated Flow`,titleShort:`Process Flow`,indexDescription:`Industrial process flow diagram containing tanks, valves, and pipes, with animated flow in the pipes.`,screenshot:`processflow`,priority:.9,tags:[`geometries`,`grid`,`process`,`monitoring`,`animation`,`scada`],description:`A simple process flow or SCADA diagram editor, simulating equipment monitoring and control.`}},{slug:`security`,url:`/samples/security`,metadata:{title:`Security Monitor Dashboard`,titleShort:`Security Monitor`,description:`Example of a security dashboard made with GoJS. Diagram for monitoring live video feeds and swipe access doors.`,indexDescription:`Example of a security dashboard made with GoJS. Diagram for monitoring live video feeds and swipe access doors.`,screenshot:`security`,priority:.9,tags:[`animation`,`geometries`,`monitoring`,`palette`,`tooltips`,`scada`]}},{slug:`waferMap`,url:`/samples/waferMap`,metadata:{title:`Wafer Map Analysis Diagram`,titleShort:`Wafer Map`,indexDescription:`Example of a semiconductor manufacturing wafer map tool.`,screenshot:`wafermap`,priority:.9,tags:[`customlayout`,`extensions`,`groups`,`monitoring`],description:`Example of a semiconductor manufacturing wafer map tool.`}},{slug:`gojs-seatingchart`,url:`/latest/projects/gojs-seatingchart/`,metadata:{title:`GoJS Seating Chart Creator`,indexDescription:`A seating chart demo app built with GoJS and Vue`,screenshot:`seatingchartvue`,priority:.98,tags:[`vue`,`frameworks`]}},{slug:`gojs-floorplanner`,url:`/latest/projects/gojs-floorplanner/`,metadata:{title:`Svelte Floorplanner`,indexDescription:`A floor planner demo app built with GoJS and Svelte`,screenshot:`floorplanner`,priority:.98,tags:[`svelte`,`extensions`,`tools`,`frameworks`]}},{slug:`circuitDesigner`,url:`/samples/circuitDesigner`,metadata:{title:`Interactive Diagram for Building Circuit Schematics`,titleShort:`Circuit Designer`,indexDescription:`A diagram and palette of circuit componenets that allows for the creation of circuit schematics with manually shaped and routed links that save to a JSON model.`,screenshot:`circuit`,priority:.99,tags:[`palette`,`geometries`,`links`,`ports`,`groups`,`tools`],description:`Interactive circuit schematic implemented by GoJS in JavaScript for HTML.`}},{slug:`sankey`,url:`/samples/sankey`,metadata:{title:`Sankey Diagram Visualizing Proportional Width Flows by Volume`,titleShort:`Sankey Diagram`,indexDescription:`Sankey diagrams show the amount of flow between nodes by the width of the links.`,screenshot:`sankey`,priority:.99,tags:[`links`,`layered-digraph`,`customlayout`],description:`A Sankey diagram with the thickness of links indicating the flow quantity.`}},{slug:`Accessibility`,url:`/samples/Accessibility`,metadata:{title:`Accessible Diagram Example`,titleShort:`ARIA Accessibility`,indexDescription:`Demonstrates a customized CommandHandler to update a live HTML element for accessibility.`,screenshot:`orgcharteditor`,priority:1,tags:[`commands`,`extensions`],description:`Demonstrates a customized CommandHandler to update a live HTML element for accessibility.`}},{slug:`dynamicPorts`,url:`/samples/dynamicPorts`,metadata:{title:`Add/Remove/Modify Ports Dynamically on Nodes`,titleShort:`Dynamic Ports`,indexDescription:`Add ports to a selected node by clicking buttons or by using a context menu. Draw links by dragging between ports. If you select a link you can relink or reshape it.`,screenshot:`dynamicports`,priority:1,tags:[`tables`,`itemarrays`,`links`,`ports`,`contextmenus`,`buttons`,`theme`,`commands`],description:`Nodes with varying lists of ports on each of four sides.`}},{slug:`belts`,url:`/samples/belts`,metadata:{title:`Belts and Rollers Diagram Showing Continuous Belts Winding Around Circular Rollers`,titleShort:`Belts and Rollers`,indexDescription:`Show continuous belts winding by circular rollers`,screenshot:`belts`,priority:1,tags:[`animation`,`geometries`],description:`Belts & gears: chains, pulleys, tensioners, conveyor belts, rollers.`}},{slug:`swimLanes`,url:`/samples/swimLanes`,metadata:{title:`Collapsible, Resizable, Re-orderable Swim Lanes for Flow Diagram`,titleShort:`Swim Lanes`,indexDescription:`Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.`,screenshot:`swimlanes`,priority:1,tags:[`tables`,`gridlayout`,`layered-digraph`,`customlayout`,`groups`,`tools`,`buttons`],description:`Horizontal swim lanes and pools with collapsible lanes and limited dragging.`}},{slug:`gojs-3d`,url:`/latest/projects/gojs-3d/`,metadata:{title:`GoJS with 3D`,indexDescription:`A three-dimensional viewer demo app built with GoJS, ThreeJS, and Svelte`,screenshot:`3d`,priority:1,tags:[`svelte`,`frameworks`]}},{slug:`kanban`,url:`/samples/kanban`,metadata:{title:`Interactive Kanban Board Diagram Using Collapsible Groups as Task Lists`,titleShort:`Kanban Board Editor`,indexDescription:`A Kanban board editor, allowing the categorization of editable tasks.`,

1screenshot:`kanban`,priority:1,tags:[`tables`,`gridlayout`,`customlayout`,`groups`,`buttons`,`process`,`legend`,`theme`],description:`An interactive Kanban board editor, a visual control used for organizing work items.`}},{slug:`interbankRisk`,url:`/samples/interbankRisk`,metadata:{title:`Interbank Lending Network for Default Risk Analysis`,titleShort:`Interbank Risk Network`,indexDescription:`A diagram of lending exposures between financial institutions, colored by risk.`,screenshot:`interbankRisk`,priority:1,tags:[`tooltips`,`links`],description:`A diagram of lending between financial instutions. Each link represents lending between instutions and nodes are colored based on risk.`}},{slug:`logicCircuit`,url:`/samples/logicCircuit`,metadata:{title:`Logic Circuit Diagram with Simple Simulation`,titleShort:`Logic Circuit`,indexDescription:`A functioning logic circuit diagram, which allows the user to make circuits using gates and wires.`,screenshot:`logiccircuit`,priority:1,tags:[`tooltips`,`palette`,`grid`,`process`],description:`A simple logic circuit editor and simulator.`}},{slug:`pipes`,url:`/samples/pipes`,metadata:{title:`Pipes Diagram Editor`,titleShort:`Pipes Diagram Editor`,indexDescription:`Showcasing nodes (Pipes) that can be joined, and will snap and drag together.`,screenshot:`pipes`,priority:1,tags:[`itemarrays`,`collections`,`contextmenus`,`tools`,`palette`,`buttons`,`geometries`,`commands`],description:`An editor for snapping pipes together and moving and rotating them as a single assembly.`}},{slug:`vendingPlanogram`,url:`/samples/vendingPlanogram`,metadata:{title:`Planogram Editor: Drag and Drop sodas onto Vending Machine`,titleShort:`Vending Planogram`,indexDescription:`Drag and drop sodas from the Palette onto the vending machine. Use tools to edit the vending machine as well.`,screenshot:`vendingPlanogram`,priority:1,tags:[`groups`,`palette`,`html`,`commands`,`animation`,`buttons`,`geometries`,`itemarrays`,`tables`,`tools`],description:`An editor for defining planograms: visual displays of merchandise.`}},{slug:`publicTransportation`,url:`/samples/publicTransportation`,metadata:{title:`Public Transportation Map, the London Underground`,titleShort:`Public Transportation Map`,indexDescription:`A diagram of the London Underground Tube, with every station, interchange, and line.`,screenshot:`publictransportation`,priority:1,tags:[`links`,`tooltips`,`legend`],description:`A transit map of the London Underground built from station and route lists, using a custom Link that offsets segments sharing the same path.`}},{slug:`records`,url:`/samples/records`,metadata:{title:`Record Mapper Diagram Editor Relating Fields to Fields`,titleShort:`Record Mapper`,indexDescription:`Displays a variable number of fields for each record, with links mapping one field to another.`,screenshot:`records`,priority:1,tags:[`tables`,`itemarrays`],description:`A diagram for displaying and editing the N to M relationships from one set of objects to another set of objects.`}},{slug:`regrouping`,url:`/samples/regrouping`,metadata:{title:`Regrouping Editor for Dragging Nodes into and out of Groups`,titleShort:`Regrouping Editor`,indexDescription:`Allows the user to drag nodes, including groups, into and out of groups, both from the Palette as
2well as from within the Diagram.`,screenshot:`regrouping`,priority:1,tags:[`gridlayout`,`groups`,`palette`,`buttons`],description:`Create new collapsible groups, ungroup existing groups, and use drag-and-drop to change grouping
3memberships.`}},{slug:`treeMapper`,url:`/samples/treeMapper`,metadata:{title:`Tree Mapper Editor for Controlling Relationships between Fields in Two Trees`,titleShort:`Tree Mapper`,indexDescription:`Displays two trees, allowing the user to dynamically draw or reconnect links mapping data from field to another.`,screenshot:`treemapper`,priority:1,tags:[`groups`,`treelayout`,`buttons`],description:`A data mapping diagram to show and edit the relationships between items in two different trees.`}},{slug:`profitSankey`,url:`/samples/profitSankey`,metadata:{title:`Visualizing Income, Expenses, and Profit with a Sankey Diagram`,titleShort:`Revenue Sankey Diagram`,

3indexDescription:`A financial Sankey diagram showing the flow of income and expenses.`,screenshot:`profitsankey`,priority:1,tags:[`links`,`customlayout`],description:`A financial Sankey diagram showing the flow of income and expenses.`}},{slug:`bpmnEditor`,url:`/samples/bpmnEditor`,metadata:{title:`Business Process Model and Notation (BPMN) Editor`,titleShort:`BPMN Editor`,indexDescription:`A BPMN process editor with resizable, collapsible swimlane pools and a palette of events, tasks, and gateways, whose nodes are arranged by the SwimLaneCompactLayout extension.`,screenshot:`bpmn`,priority:1.1,tags:[`palette`,`groups`,`tables`,`process`,`customlayout`,`tools`,`extensions`],description:`A BPMN process editor with resizable, collapsible swimlane pools arranged in a custom dynamic grid layout and a palette of events, tasks, and gateways, whose nodes are arranged by the SwimLaneCompactLayout extension and whose links are validated with a custom LinkingTool.`}},{slug:`gojs-jsondiagram`,url:`/latest/projects/gojs-jsondiagram/`,metadata:{title:`JSON Diagram editor`,indexDescription:`A Demo using GoJS, Monaco, and Svelte to create an editable JSON Diagram`,screenshot:`jsondiagram`,priority:1.1,tags:[`svelte`,`frameworks`]}},{slug:`shapes`,url:`/samples/shapes`,metadata:{title:`Parameterized Shape Figures, both Built-in and Extensions`,titleShort:`Shape Figures`,indexDescription:`Showcases all GoJS figures. You can define your own named Shape figures.`,screenshot:`shapes`,priority:1.1,tags:[`gridlayout`,`geometries`],description:`All predefined GoJS Shape figures, displayed as Nodes with a name underneath.`}},{slug:`treeView`,url:`/samples/treeView`,metadata:{title:`Tree View Implemented with TreeLayout of Nodes and Links`,titleShort:`Tree View`,indexDescription:`Demonstrates a traditional 'Tree View' in a GoJS diagram, with optional orthogonal links between the nodes.`,screenshot:`treeview`,priority:1.1,tags:[`treelayout`,`buttons`],description:`A traditional tree view using TreeLayout and orthogonal links.`}},{slug:`warehouse`,url:`/samples/warehouse`,metadata:{title:`Warehouse Designer`,indexDescription:`Warehouse layout designer with a drag-and-drop palette, reshapable areas, and disconnected links.`,screenshot:`warehouse`,priority:1.1,tags:[`monitoring`,`grid`],description:`Warehouse layout designer with a drag-and-drop palette of parts, reshapable areas, and disconnected links showing picking paths.`}},{slug:`Dimensioning`,url:`/samples/Dimensioning`,metadata:{title:`Dimensioning Links Showing Distances Between Spots on Two Nodes`,titleShort:`Dimensioning Links`,indexDescription:`Demonstrates custom Links that show the distance between two points.`,screenshot:`dimensioning`,priority:1.2,tags:[`links`,`extensions`],description:`Dimensioning Links show the distance from a spot on a node to another spot on a node.`}},{slug:`gojs-tictactoe`,url:`/latest/projects/gojs-tictactoe/`,metadata:{title:`Interactive React Diagram`,indexDescription:`A GoJS Diagram component in React`,screenshot:`tictactoe`,priority:1.2,tags:[`react`,`frameworks`]}},{slug:`systemDynamics`,url:`/samples/systemDynamics`,metadata:{title:`System Dynamics Diagram Editor: Storage, Flows, Control Factors`,titleShort:`System Dynamics Diagram`,indexDescription:`A System Dynamics diagram shows the storages and flows of material in some system, and the factors that influence the rates of flow.`,screenshot:`systemdynamics`,priority:1.2,tags:[`process`,`tools`],description:`A simple implementation of a system dynamics editor.`}},{slug:`swimBands`,url:`/samples/swimBands`,metadata:{title:`Organizing Layers Visually with Bands`,titleShort:`Layer Bands`,indexDescription:`Layer Bands are automatically created for each 'layer' of a TreeLayout, and run perpendicular to the layout.`,screenshot:`swimbands`,priority:1.3,tags:[`itemarrays`,`treelayout`,`customlayout`],description:`Showing bands for the layers in a diagram.`}},{slug:`fonticons`,url:`/samples/fonticons`,metadata:{title:`Font Icons from Various Fonts for Drawing Icons using TextBlocks`,titleShort:`Font Icons`,indexDescription:`An example of how to use icon fonts with GOJS, making sure the fonts load fully before creating the diagram.`,screenshot:`fonticons`,priority:1.4,tags:[`svg`,`gridlayout`,`animation`],description:`An example of how to use icon fonts with GOJS, making sure the fonts load fully before creating the diagram.`}},{slug:`icons`,url:`/samples/icons`,metadata:{title:`SVG Icons: Using SVG Path Strings as Shapes in Nodes`,titleShort:`SVG Icons`,indexDescription:`Create your own custom Shapes using SVG path strings. This sample uses SVG strings from a free icon set.`,screenshot:`svgicons`,priority:1.4,tags:[`gridlayout`,`treelayout`,`tooltips`,`geometries`,`svg`,`theme`,`animation`],description:`Use SVG geometry path strings to create vector icons, rather than using images.`}},{slug:`blockEditor`,url:`/samples/blockEditor`,metadata:{title:`Block Diagram Editor`,titleShort:`Block Diagram Editor`,indexDescription:`A simple block diagram editor that makes it easy for the user to chain together new nodes, with
4context menus for changing shapes and colors.`,screenshot:`blockeditor`,priority:1.5,tags:[`geometries`,`commands`],description:`A simple block diagram editor that includes context menus for changing shapes and colors.`}},{slug:`controlGauges`,url:`/samples/controlGauges`,metadata:{title:`Meter and Gauge Controls Drawn in Nodes Connected by Flows`,titleShort:`Meters and Gauges`,indexDescription:`Various meters and gauges that show particular values and can be modified by the user by dragging.`,screenshot:`controlgauges`,priority:1.5,tags:[`gauges`,`geometries`,`tools`],description:`Gauges and Meters that allow the user to control the values that those instruments show`}},{slug:`pathFinder`,url:`/samples/pathFinder`,metadata:{title:`Path Finder Animation of Nodes along AvoidsNodes Routed Paths`,titleShort:`Path Finder`,indexDescription:`GoJS diagram demonstrating the versatility of the available tools. Using the avoid nodes link router to give nodes path finding for navigating through a house with fluid movements from animations.`,screenshot:`pathfinder`,priority:1.5,tags:[`animation`,`links`,`monitoring`],description:`GoJS diagram demonstrating the versatility of the available tools. Using the avoid nodes link router to give nodes path finding for navigating through a house with fluid movements from animations.`}},{slug:`productionEditor`,url:`/samples/productionEditor`,metadata:{title:`Production Process Diagram Editor`,titleShort:`Production Process Editor`,indexDescription:`A designer for creating production process diagrams.`,screenshot:`productioneditor`,priority:1.6,tags:[`geometries`,`svg`,`process`,`palette`,`inspector`,`html`],description:`Oil and gas production diagram editor, for designers.`}},{slug:`productionProcess`,url:`/samples/productionProcess`,metadata:{title:`Production Process Diagram with Details and Animated Flows`,titleShort:`Production Process`,indexDescription:`Partially describes the production process for converting natural gas and oil byproducts into their end products.`,screenshot:`productionprocess`,priority:1.6,tags:[`tooltips`,`geometries`,`svg`,`process`,`monitoring`,`html`],description:`Oil and gas production diagram viewer, for end-users.`}},{slug:`arrowheads`,url:`/samples/arrowheads`,metadata:{title:`All Predefined Arrowheads for Links`,indexDescription:`Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries.`,screenshot:`arrowheads`,priority:1.7,tags:[`links`,`circularlayout`,`tooltips`,`geometries`],description:`Show all of the predefined kinds of arrowheads for links, which can be used by setting Shape.toArrow or Shape.fromArrow.`}},{slug:`draggableLink`,url:`/samples/draggableLink`,metadata:{title:`Allow Users to Drag Links and Reconnect Them on Drop`,titleShort:`Draggable Link`,indexDescription:`Showcases draggable disconnectable links that can be connected by dropping one or both ends at a valid port.`,screenshot:`draggablelink`,priority:1.7,tags:[`collections`,`links`,`tools`,`palette`,`geometries`,`grid`],description:`Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and rotating.  The Palette includes links.`}},{slug:`AvoidsLinksRouter`,url:`/samples/AvoidsLinksRouter`,metadata:{title:`Avoids Links Router for Reducing Overlapping Link Segments`,titleShort:`Avoids Links Router`,indexDescription:`A custom Router that moves Link segments to parallelize and avoid overlaps.`,screenshot:`avoidslinksrouter`,priority:1.7,tags:[`links`,`routers`,`extensions`],description:`A custom Router that moves Link segments to parallelize and avoid overlaps.`}},{slug:`productionLine3D`,url:`/samples/productionLine3D`,metadata:{title:`Production Line: A Factory Floor in 3D`,titleShort:`3D Production Line`,indexDescription:`A diagram displaying a factory floor design, click any machine for live statistics and an interactive 3D rendering of its part.`,screenshot:`productionline3d`,priority:1.7,tags:[`scada`,`animation`,`itemarrays`],description:`Each machine is drawn from an item array of simple shapes and connected by conveyor-belt links that split and merge, animated with strokeDashOffset and carrying each line's own workpieces along the link's route geometry. Selecting a machine shows an Adornment card with statistics and an interactive 3D rendering with native WebGL.`}},{slug:`wifiPlanner`,url:`/samples/wifiPlanner`,metadata:{title:`Wi-Fi Coverage Planner with a Signal Heat Map`,titleShort:`Wi-Fi Planner`,indexDescription:`Plan Wi-Fi coverage for an office floor plan by placing access points and repeaters, with signal strength shown by the HeatMap extension.`,screenshot:`wifiPlanner`,priority:1.7,tags:[`contextmenus`,`extensions`,`html`],description:`An office Wi-Fi coverage planner using the HeatMap extension.`,module:!0}},{slug:`platformerLevelCreator`,url:`/samples/platformerLevelCreator`,metadata:{title:`Platformer Level Creator`,titleShort:`Platformer Level Creator`,indexDescription:`Build a 2D platformer game level with a Palette of obstacles, then play through it with keyboard movement and physics.`,priority:1.9,screenshot:`platformerlevel`,tags:[`palette`],description:`Drag obstacles from the Palette to build a 2D platformer game level with infinite horizontal scrolling, then press Play to run and jump through it with WASD/arrow keys using simple gravity and collision physics.`}},{slug:`absolute`,url:`/samples/absolute`,metadata:{title:`Absolute Positioning of Parts in div Element`,titleShort:`Absolute Positioning`,indexDescription:`A diagram that does not scroll or zoom or allow parts to be dragged out of a fixed area.`,screenshot:`absolute`,priority:2,description:`A diagram that does not scroll or zoom and has a fixed area in which to move parts.`}},{slug:`addRemoveColumns`,url:`/samples/addRemoveColumns`,metadata:{title:`Add/Remove/Swap Columns in Table Panels`,indexDescription:`Demonstrates adding and removing and swapping columns of a Table Panel.`,screenshot:`addremovecolumns`,priority:2,tags:[`tables`,`itemarrays`,`html`],description:`Interactively adding and removing rows and columns of a Table Panel in a GoJS Node.`}},{slug:`addToPalette`,url:`/samples/addToPalette`,metadata:{title:`Adding Nodes to Palette from Diagram`,titleShort:`Adding Node to Palette`,indexDescription:`Select and edit a node and add a copy of it to the palette.`,screenshot:`addtopalette`,priority:2,tags:[`palette`,`overview`],description:`An example of having the user customize a Palette by adding copies of Diagram nodes to the Palette's Model.`}},{slug:`animatedFocus`,url:`/samples/animatedFocus`,metadata:{title:`Animated Scrolling and Zooming Attention to Node`,titleShort:`Animated Node Attention`,indexDescription:`Aninmated focus by scrolling to a node along with animation of the size of the node to draw attention to it..`,screenshot:`animatedfocus`,priority:2,tags:[`animation`],description:`When focussing on a node, scroll with animation to it and show a magnified image of it shrinking in place.`}},{slug:`pathAnimation`,url:`/samples/pathAnimation`,metadata:{title:`Animation of Tokens along Link Paths`,indexDescription:`Animation of diagram parts (tokens) along link paths.`,screenshot:`pathanimation`,priority:2,tags:[`collections`,`force-directed`,`animation`],description:`Animating diagram parts to travel along link paths from one node to another.`}},{slug:`Arranging`,url:`/samples/Arranging`,metadata:{title:`Arranging Layout, Layout of Layouts, plus Layout on the Side`,titleShort:`Arranging Layout`,indexDescription:`The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs.`,screenshot:`arranging`,priority:2,tags:[`gridlayout`,`customlayout`,`extensions`],description:`Arrange disconnected circular subgraphs in a circle and put disconnected nodes in a grid underneath.`}},{slug:`BalloonLink`,url:`/samples/BalloonLink`,metadata:{title:`Balloon Links for Creating Speech Bubbles or Comments for Nodes`,titleShort:`Ballon Links`,indexDescription:`Demonstrates custom Links that create a 'Balloon' around the fromNode.`,screenshot:`balloonlink`,priority:2,tags:[`links`,`geometries`,`extensions`],description:`A demonstration of the BalloonLink extension for implementing word balloons or speech bubbles as comments in diagrams about particular objects.`}},{slug:`barCharts`,url:`/samples/barCharts`,metadata:{title:`Bar Charts in Nodes`,indexDescription:`Simple bar charts or histograms within nodes.`,screenshot:`barcharts`,priority:2,tags:[`tables`,`itemarrays`,`tooltips`,`charts`],description:`GoJS nodes containing simple bar charts.`}},{slug:`basic`,url:`/samples/basic`,metadata:{title:`Basic Sample Showing ToolTips and Context Menus for Nodes, Links, Groups, and Diagram`,titleShort:`Basic with ToolTips and Context Menus`,indexDescription:`Shows many of the commands possible in GoJS, templates for Links and for Groups, plus tooltips and context menus for Nodes, for Links, for Groups, and for the Diagram.`,screenshot:`basic`,priority:2,tags:[`groups`,`tooltips`,`contextmenus`,`buttons`,`commands`],description:`Interactive GoJS diagram demonstrating creating new nodes and links, reconnecting links, grouping and ungrouping, and context menus and tooltips for nodes, for links, and for the diagram background.`}},{slug:`beatPaths`,url:`/samples/beatPaths`,metadata:{title:`Beat Paths, Graphs Showing Win Relationships Between Teams`,titleShort:`Beat Paths`,indexDescription:`Demonstrates reading JSON data describing the relative rankings of NFL teams at a particular moment in time and generating a diagram from that data.`,screenshot:`beatpaths`,priority:2,tags:[`layered-digraph`],description:`A precedence diagram showing a hierarchical relationship between nodes, using archetypeNodeData, LayeredDigraphLayout, and Bezier curved links.`}},{slug:`hoverButtons`,url:`/samples/hoverButtons`,metadata:{title:`Buttons Shown on Hover over Node`,titleShort:`Buttons Shown on Hover`,indexDescription:`Shows buttons in an Adornment upon hover over a node.`,screenshot:`hoverbuttons`,priority:2,tags:[`buttons`],description:`When the mouse hovers over a node, show a set of Buttons that could perform various actions.`}},{slug:`candlestickCharts`,url:`/samples/candlestickCharts`,metadata:{title:`Candlestick Charts or Range Charts in Nodes`,titleShort:`Candlestick Charts`,indexDescription:`Simple candlestick or range charts within nodes.`,screenshot:`candlestickcharts`,priority:2,tags:[`tables`,`itemarrays`,`geometries`,`charts`],description:`GoJS nodes containing simple range charts.`}},{slug:`canvases`,url:`/samples/canvases`,metadata:{title:`Charts drawn by Chart.js in Nodes`,titleShort:`Chart.js Charts in Nodes`,indexDescription:`Shows how to render a data-driven chart within each Node using the Chart.js library.`,screenshot:`canvases`,priority:2,tags:[`charts`,`html`,`frameworks`],description:`A diagram where each node contains a chart rendered by Chart.js.`}}

4,{slug:`circular`,url:`/samples/layouts?layout=circular`,metadata:{title:`Circular Layout`,indexDescription:`Layout positions nodes in a circular arrangement.`,screenshot:`circular`,priority:2,tags:[`layouts`]}},{slug:`classHierarchy`,url:`/samples/classHierarchy`,metadata:{title:`Class Hierarchy Diagram Showing All GoJS Classes`,titleShort:`Class Hierarchy Diagram`,indexDescription:`Displays the GoJS Class Hierarchy as a series of trees. Double-click to go to the class's API documentation.`,screenshot:`classhierarchy`,priority:2,tags:[`treelayout`],description:`The JavaScript class hierarchy defined by the GoJS library, arranged as a tree.`}},{slug:`comments`,url:`/samples/comments`,metadata:{title:`Comment Nodes Laid out by Tree Layout`,titleShort:`Comment Nodes`,indexDescription:`GoJS supports the notion of 'Comments', including the ability to create balloon-like comments.`,screenshot:`comments`,priority:2,tags:[`links`,`treelayout`,`geometries`],description:`A tree-structured diagram annotated with balloon comments, automatically laid out.`}},{slug:`conceptMap`,url:`/samples/conceptMap`,metadata:{title:`Concept Map Showing Idea Nodes Connected by Relationship Links Laid out by Force Directed Layout`,titleShort:`Concept Map`,indexDescription:`A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels.`,screenshot:`conceptmap`,priority:2,tags:[`force-directed`],description:`A concept map diagram implemented with labeled links and ForceDirectedLayout.`}},{slug:`linksToLinks`,url:`/samples/linksToLinks`,metadata:{title:`Connecting Links to Links Using Link Label Nodes`,indexDescription:`Demonstrates the ability for a Link to appear to connect with another Link, using label nodes that belong to links. `,screenshot:`linkstolinks`,priority:2,tags:[`links`],description:`Links can connect with Links by using label Nodes on Links.`}},{slug:`connectionBoxNode`,url:`/samples/connectionBoxNode`,metadata:{title:`Connection Box Editor with Custom Link Validation`,titleShort:`Connection Box Editor`,indexDescription:`A Node containing ports that allow linking between them, within the node as well as between nodes, with custom link validation.`,screenshot:`connectionboxnode`,priority:2,tags:[`tables`,`itemarrays`,`links`,`ports`],description:`Support link connections within a node as well as between nodes.`}},{slug:`constantSize`,url:`/samples/constantSize`,metadata:{title:`Constant Size Nodes While Zooming in or out`,indexDescription:`Kitten Monitor with constant size markers and tooltips when zooming out.`,screenshot:`kittenmonitor`,priority:2,tags:[`tooltips`,`monitoring`],description:`A variation of a monitoring diagram where the objects of interest maintain a constant size while the user zooms in and out on the map.`}},{slug:`contentAlign`,url:`/samples/contentAlign`,metadata:{title:`Content Alignment Demonstration`,titleShort:`Content Alignment Demo`,indexDescription:`Showcases alignment properties of the Diagram.`,screenshot:`contentalign`,priority:2,tags:[`html`],description:`An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling.`}},{slug:`grouping`,url:`/samples/grouping`,metadata:{title:`Creating SubGraphs only when Expanding a Group the First Time`,titleShort:`Grouping`,indexDescription:`Demonstrates subgraphs that are created only as groups are expanded.`,screenshot:`grouping`,priority:2,tags:[`treelayout`,`groups`,`buttons`],description:`A diagram holding groups that incrementally grow the diagram as groups are expanded.`}},{slug:`Cropping`,url:`/samples/Cropping`,metadata:{title:`Cropping Tool for Interactive Cropping of Pictures`,titleShort:`Cropping`,indexDescription:`A custom Tool that supports interactive cropping of Pictures.`,screenshot:`cropping`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to crop an image by dragging handles that change the Picture's sourceRect.`}},{slug:`CurvedLinkReshaping`,url:`/samples/CurvedLinkReshaping`,metadata:{title:`Curved Link Reshaping Using Single Handle`,indexDescription:`A custom Tool that lets the user reshape curved links with a single handle.`,screenshot:`curvedl

4inkreshaping`,priority:2,tags:[`links`,`tools`,`buttons`,`extensions`],description:`Changing the curviness of a link using a single reshaping handle.`}},{slug:`multiNodePathLinks`,url:`/samples/multiNodePathLinks`,metadata:{title:`Curved Multi-Node Path Link Routes`,indexDescription:`Demonstrates custom routing for Links running through other Nodes.`,screenshot:`multinodepathlinks`,priority:2,tags:[`collections`,`links`],description:`A custom Link routing that goes smoothly through a sequence of Nodes.`}},{slug:`treeLoadAnimation`,url:`/samples/treeLoadAnimation`,metadata:{title:`Custom Animations Loading Tree`,indexDescription:`Shows how to create a custom Diagram loading animation.`,screenshot:`treeloadanimation`,priority:2,tags:[`animation`],description:`Loading a tree with custom GoJS animation.`}},{slug:`customExpandCollapse`,url:`/samples/customExpandCollapse`,metadata:{title:`Custom Expand and Collapse Buttons for Non-Tree Graphs`,titleShort:`Custom Expand/Collapse`,indexDescription:`Shows how to create Buttons with custom behavior for expanding/collapsing of a graph.`,screenshot:`customexpandcollapse`,priority:2,tags:[`layered-digraph`,`buttons`],description:`Custom policy for collapsing and expanding subtrees, different than TreeExpanderButton.`}},{slug:`customContextMenu`,url:`/samples/customContextMenu`,metadata:{title:`Custom HTML Context Menu for Nodes and Diagram`,titleShort:`HTML Context Menu`,indexDescription:`Demonstrates the implementation of a custom HTML context menu.`,screenshot:`customcontextmenu`,priority:2,tags:[`contextmenus`,`html`],description:`Context menus implemented in HTML rather than as GoJS objects.`}},{slug:`ParallelRoute`,url:`/samples/ParallelRoute`,metadata:{title:`Custom Link Routing for Parallel Duplicate Links`,titleShort:`Parallel Routing`,indexDescription:`Demonstrates custom Links that route parallel to other Links between the same two ports.`,screenshot:`parallelroute`,priority:2,tags:[`links`,`geometries`,`extensions`],description:`Custom non-Orthogonal non-Bezier Links that have parallel routings for multiple links connecting the same pair of ports.`}},{slug:`customAnimations`,url:`/samples/customAnimations`,metadata:{title:`Custom Node Animations Demonstration`,titleShort:`Custom Node Animations`,indexDescription:`Shows how to create several custom Node animations.`,screenshot:`customanimations`,priority:2,tags:[`animation`],description:`Custom animation examples for GoJS.`}},{slug:`panelLayout`,url:`/samples/panelLayout`,metadata:{title:`Custom Panel Layout: Cascading Elements`,indexDescription:`Shows how to create a custom PaneLayout.`,screenshot:`panellayout`,priority:2,description:`Example custom PanelLayout.`}},{slug:`customTextEditingTool`,url:`/samples/customTextEditingTool`,metadata:{title:`Custom Select Box and Radio Button Text Editors for In-Place Editing of Text`,titleShort:`Custom Text Editors`,indexDescription:`Demonstrates using a custom HTML element for in-place editing of a TextBlock.`,screenshot:`customtexteditingtool`,priority:2,tags:[`html`],description:`Custom text editing using an HTML select box and some radio buttons.`}},{slug:`dataFlow`,url:`/samples/dataFlow`,metadata:{title:`Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports`,titleShort:`Data Flow Diagram`,indexDescription:`Show the processing steps involved in a database transformation or query, with labeled ports.`,screenshot:`dataflow`,priority:2,tags:[`tables`,`layered-digraph`,`ports`,`process`],description:`Data flow or workflow graph of nodes with varying input and output ports with labels, oriented horizontally.`}},{slug:`DataInspector`,url:`/samples/DataInspector`,metadata:{title:`Data Inspector, Expedient Way to Implement HTML Editor of Data Properties of Selected Node`,titleShort:`Data Inspector`,indexDescription:`A simple drop-in for inspecting and editing Part data.`,screenshot:`datainspector`,priority:2,tags:[`groups`,`extensions`,`inspector`,`html`],description:`An HTML panel that displays the properties of some model data and allows the user to edit their values.`}},{slug:`dataVisualization`,url:`/samples/dataVisualization`,metadata:{title:`Data Visualization of Multi-Dimensional Data using Nodes and ToolTips`,titleShort:`Data Visualization`,indexDescription:`A data-visualization demonstration that showcases GoJS interacting with other elements on the page.`,screenshot:`datavisualization`,priority:2,tags:[`tooltips`,`html`,`animation`],description:`Interactive visualization of multi-dimensional data with HTML tooltips.`}},{slug:`scrollModes`,url:`/samples/scrollModes`,metadata:{title:`Diagram Scroll Modes`,indexDescription:`Shows infinite scrolling and positionComputation.`,screenshot:`scrollmodes`,priority:2,tags:[`grid`],description:`Infinite scrolling and custom limits on Diagram position and scale.`}},{slug:`ruleredDiagram`,url:`/samples/ruleredDiagram`,metadata:{title:`Diagram with Side and Top Rulers with Markers Showing Mouse Point`,titleShort:`Diagram with Rulers`,indexDescription:`A diagram with Graduated Panels at the edges acting as rulers.`,screenshot:`rulereddiagram`,priority:2,tags:[`geometries`,`grid`],description:`A diagram with Graduated panels at the edges acting as rulers`}},{slug:`donutCharts`,url:`/samples/donutCharts`,metadata:{title:`Donut Charts Implemented as Shapes in Nodes`,titleShort:`Donut Charts in Nodes`,indexDescription:`Ring-shaped pie charts within nodes.`,screenshot:`donutcharts`,priority:2,tags:[`itemarrays`,`geometries`,`charts`],description:`A donut chart in each node.`}},{slug:`doubleTree`,url:`/samples/layouts?layout=doubleTree`,metadata:{title:`Double Tree Layout`,indexDescription:`Custom layout ideal for when the initial branches are dichotomous. Each side of the layout can be customized as its own tree layout.`,screenshot:`doubletree`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`dragDropFields`,url:`/samples/dragDropFields`,metadata:{title:`Drag and Drop Fields Between Nodes`,indexDescription:`Drag and drop fields from/to record Nodes.`,screenshot:`records`,priority:2,tags:[`tables`,`itemarrays`,`collections`,`tools`],description:`Drag and drop items between nodes.`}},{slug:`htmlDragDrop`,url:`/samples/htmlDragDrop`,metadata:{title:`Drag and Drop From HTML Element to Diagram`,

4indexDescription:`Demonstrates dragging and dropping from HTML, and pasting from the external clipboard.`,screenshot:`htmldragdrop`,priority:2,tags:[`palette`,`html`,`commands`],description:`Use HTML drag-and-drop to implement dragging HTML elements onto a GoJS Diagram to create new nodes. Also demonstrates pasting from the external clipboard.`}},{slug:`DragCreating`,url:`/samples/DragCreating`,metadata:{title:`Drag Creating Tool Lets Users Draw Box where New Node will be Created`,titleShort:`Drag Creating Tool`,indexDescription:`A custom Tool that lets a user draw a box showing where and how large a new node should be.`,screenshot:`dragcreating`,priority:2,tags:[`tools`,`extensions`],description:`Create nodes by dragging, thereby specifying their initial size.`}},{slug:`dragOutFields`,url:`/samples/dragOutFields`,metadata:{title:`Drag Fields Out of Diagram to HTML Element`,indexDescription:`Drag out fields from record Nodes to an HTML element.`,screenshot:`records`,priority:2,tags:[`tables`,`itemarrays`,`collections`,`tools`,`html`],description:`Drag an item from a node out of the diagram and onto another HTML element.`}},{slug:`DragZooming`,url:`/samples/DragZooming`,metadata:{title:`Drag Zooming Tool Lets User Draw Box for What Will Be Shown in Viewport`,titleShort:`Drag Zooming`,indexDescription:`A custom Tool that lets a user draw a box showing what to zoom in to.`,screenshot:`dragzooming`,priority:2,tags:[`treelayout`,`tools`,`extensions`],description:`Users can zoom into and out of a diagram by drawing a rectangle showing what part of the document should be shown by the new viewport.`}},{slug:`twoDiagrams`,url:`/samples/twoDiagrams`,metadata:{title:`Drag-and-Drop Between Two Diagrams Controlled by Permissions`,titleShort:`Two Diagrams Drag-and-Drop`,indexDescription:`Demonstrates drag and drop between two different diagrams using a shared UndoManager.`,screenshot:`minimal`,priority:2,tags:[`html`],description:`Moving (not copying) nodes between two Diagrams and two different Models sharing an UndoManager.`}},{slug:`NonRealtimeDragging`,url:`/samples/NonRealtimeDragging`,metadata:{title:`Dragging Image of Selection Rather Than Moving Them in Realtime`,titleShort:`NonRealtime Dragging`,indexDescription:`A custom DraggingTool that lets the user drag a translucent image of the Nodes and Links to be moved, leaving them in place until the mouse up.`,screenshot:`nonrealtimedragging`,priority:2,tags:[`tools`,`extensions`],description:`A modification of DraggingTool to show a ghost image of what is being moved, rather than moving the nodes and links in realtime.`}},{slug:`NodeLabelDragging`,url:`/samples/NodeLabelDragging`,metadata:{title:`Dragging Labels of Nodes`,titleShort:`Dragging Node Label`,indexDescription:`A custom Tool that lets the user drag a label in a Spot Panel of a Node.`,screenshot:`nodelabeldragging`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to shift the label of a node.`}},{slug:`LinkLabelDragging`,url:`/samples/LinkLabelDragging`,metadata:{title:`Dragging Link Label`,indexDescription:`A custom Tool that lets the user drag a label on a Link and that keeps its relative position to the link.`,screenshot:`linklabeldragging`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to shift link labels; useful when the user wants to adjust the position of the label relative to the link path to avoid overlapping the link path or any nodes.`}},{slug:`LinkLabelOnPathDragging`,url:`/samples/LinkLabelOnPathDragging`,metadata:{title:`Dragging Link Label along Path`,indexDescription:`A custom Tool that lets the user drag a label on a Link and that keeps the label along the path of the link.`,screenshot:`linklabelonpathdragging`,priority:2,tags:[`tools`,`extensions`],description:`This variation on the LinkLabelDraggingTool extension restricts link labels to stay on the link's route while the user is dragging it.`}},{slug:`DrawCommandHandler`,url:`/samples/DrawCommandHandler`,metadata:{title:`Drawing Commands for Aligning, Spacing, Rotating, Z-Ordering, and Arrow Keys`,titleShort:`Draw Command Handler`,indexDescription:`Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys.`,screenshot:`drawcommandhandler`,priority:2,tags:[`extensions`,`commands`],description:`The DrawCommandHandler extension implements various commands for aligning and rotating objects and for handling arrow keys to select or shift.`}},{slug:`entityRelationship`,url:`/samples/entityRelationship`,metadata:{title:`Entity Relationship Diagram Nodes have Collapsible Lists of Attributes`,titleShort:`Entity Relationship Diagram`,

4indexDescription:`An entity relationship diagram, showcasing data binding with item arrays.`,screenshot:`entityrelationship`,priority:2,tags:[`tables`,`itemarrays`,`force-directed`,`buttons`,`theme`],description:`Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML.`}},{slug:`euler`,url:`/samples/euler`,metadata:{title:`Euler Diagrams Show Sets and Varied Relationships`,titleShort:`Euler Diagram`,indexDescription:`A read-only diagram where clicking on a node will open a new webpage.`,screenshot:`euler`,priority:2,tags:[`extensions`],description:`A diagram showing nodes connected by different kinds of links with concentric circular backgrounds.  Clicking on a node opens a window to a Wikipedia page.`}},{slug:`incrementalTree`,url:`/samples/incrementalTree`,metadata:{title:`Expanding SubTree First Time Incrementally Adds Nodes`,titleShort:`Incremental Tree`,indexDescription:`Demonstrates the expansion of a tree where nodes are only created 'on-demand', when the user clicks on the 'expand' Button.`,screenshot:`incrementaltree`,priority:2,tags:[`force-directed`,`buttons`,`commands`],description:`Incrementally grow a tree as each node is expanded for the first time.`}},{slug:`distances`,url:`/samples/distances`,metadata:{title:`Finding and Highlighting Node-Link Paths in Graphs`,titleShort:`Distances and Paths`,indexDescription:`Show distances between two nodes and highlights one of all possible paths between the nodes.`,screenshot:`distances`,priority:2,tags:[`collections`,`force-directed`,`html`],description:`Interactive diagram showing all distances from a node, and highlighting all paths between two nodes.`}},{slug:`fishbone`,url:`/samples/layouts?layout=fishbone`,metadata:{title:`Fishbone Layout`,indexDescription:`Custom layout that allows for understandable cause diagrams.`,screenshot:`fishbone`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`flowBuilder`,url:`/samples/flowBuilder`,metadata:{title:`Flow Builder for Building Acyclic Graphs`,indexDescription:`Demonstrates a flow builder where nodes/links can be created or dropped onto a recycling node.`,screenshot:`flowbuilder`,priority:2,tags:[`layered-digraph`,`contextmenus`,`tools`,`buttons`],description:`An editor of flow diagrams that supports deletion by dropping onto a particular node and relinking by dragging a link.`}},{slug:`forceDirected`,url:`/samples/layouts?layout=forceDirected`,metadata:{title:`Force Directed Layout`,indexDescription:`Treats the graph as if it were a system of physical bodies with forces acting on them and between them.`,screenshot:`forcedirected`,priority:2,tags:[`layouts`]}},{slug:`FreehandDrawing`,url:`/samples/FreehandDrawing`,metadata:{title:`Freehand Drawing Tool to Draw Lines with Mouse or Finger or Stylus, Supporting Resizing, Reshaping, and Rotating`,titleShort:`Freehand Drawing`,indexDescription:`A custom Tool that lets the user interactively draw a line, converting it into a Shape.`,screenshot:`freehanddrawing`,priority:2,tags:[`tools`,`extensions`,`geometries`],description:`Let the user draw a Shape using the mouse or finger without any constraints.`}},{slug:`friendWheel`,url:`/samples/friendWheel`,metadata:{title:`Friend Wheel Diagram for Elliptical Arrangement of Nodes and Curved Links Inside Ellipse`,titleShort:`Friend Wheel`,indexDescription:`Demonstrates a customized CircularLayout.`,screenshot:`friendwheel`,priority:2,tags:[`circularlayout`,`customlayout`],description:`Show the relationships between people using a friend wheel diagram, implemented using circular layout.`}},{slug:`localView`,url:`/samples/localView`,metadata:{title:`Full Diagram and its Local View`,titleShort:`Diagram and Local View`,indexDescription:`Two diagrams, the one on top showing a full tree and the one below focusing on a specific node in the tree and those nodes that are logically 'near' it.`,screenshot:`localview`,priority:2,tags:[`treelayout`],description:`In one diagram show the whole tree and in a second diagram show a subset that is logically near a selected node.`}},{slug:`gameOfLife`,url:`/samples/gameOfLife`,metadata:{title:`Game of Life Cellular Automation`,indexDescription:`A cellular automation simulation.`,screenshot:`gameoflife`,priority:2,description:`A cellular automation simulation in GoJS`}},{slug:`leaflet`,url:`/samples/leaflet`,metadata:{title:`Geographic Diagram in Front of Leaflet.js Map`,titleShort:`Diagrams and Leaflet.js`,indexDescription:`A GoJS diagram atop a Leaflet.js map, with nodes placed at latitude and longitude based locations.`,screenshot:`leaflet`,priority:2,tags:[`tools`,`geometries`,`html`],description:`A map integrating a GoJS Diagram and the Leaflet mapping library.`}},{slug:`GeometryReshaping`,url:`/samples/GeometryReshaping`,metadata:{title:`Geometry Reshaping Tool for Interactive Reshaping of Shape Geometries`,titleShort:`Geometry Reshaping`,indexDescription:`A custom Tool that supports interactive reshaping of Geometries.`,screenshot:`geometryreshaping`,priority:2,tags:[`tools`,`extensions`,`geometries`],description:`Allow the user to change a Shape by dragging a handle at a point of the Shape's Geometry.`}},{slug:`grafcet`,url:`/samples/grafcet`,metadata:{title:`Grafcet Diagram Editor, Type of Sequential Function Chart for Automation Design`,titleShort:`Grafcet Diagram Editor`,indexDescription:`A Grafcet is a kind of sequential function chart used in automation design.`,screenshot:`grafcet`,priority:2,tags:[`links`,`tooltips`,`tools`,`buttons`,`geometries`,`process`],description:`A Grafcet diagram editor, showing buttons for creating new nodes and links related to the selected node.`}},{slug:`grid`,url:`/samples/layouts?layout=grid`,metadata:{title:`Grid Layout`,indexDescription:`Grid Layout allows for non-linked nodes to be easily laid out in an organized fashion.`,screenshot:`grid`,priority:2,tags:[`layouts`]}},{slug:`roundedGroups`,url:`/samples/roundedGroups`,metadata:{title:`Groups with Rounded Headers and Footers`,indexDescription:`Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder.`,screenshot:`roundedgroups`,priority:2,tags:[`groups`,`geometries`],description:`Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder.`}},{slug:`GuidedDragging`,url:`/samples/GuidedDragging`,metadata:{title:`Guided Dragging Shows Guidelines During Dragging for Equal Spacing between Nodes or for Aligning Nodes to other Nodes`,titleShort:`Guided Dragging`,indexDescription:`A custom DraggingTool that makes guidelines visible as a Part is dragged around a Diagram and is nearly aligned with another Part.`,screenshot:`guideddragging`,priority:2,tags:[`tools`,`extensions`],description:`A demonstration of the GuidedDraggingTool extension.`}},{slug:`timeline`,url:`/samples/timeline`,metadata:{title:`Horizontal Timeline with Events Laid Out Avoiding Overlaps`,titleShort:`Timeline`,indexDescription:`A simple timeline with events arranged along a line.`,screenshot:`timeline`,priority:2,tags:[`tables`,`itemarrays`,`links`,`customlayout`,`commands`],description:`A stretchable timeline.`}},{slug:`htmlInteraction`,url:`/samples/htmlInteraction`,metadata:{title:`HTML Interaction Showing Draggable Palette and Draggable Inspector`,titleShort:`HTML Interaction`,indexDescription:`Contains two draggable HTML elements (using jQuery UI

4). One of the two HTML elements houses a panel that interacts with the main Diagram.`,screenshot:`htmlinteraction`,priority:2,tags:[`palette`,`html`,`inspector`,`frameworks`],description:`Show a GoJS Palette in a floating window and use an Inspector for changing the appearance of the selected node.`}},{slug:`ZoomSlider`,url:`/samples/ZoomSlider`,metadata:{title:`HTML Zoom Slider for Zooming`,indexDescription:`Demonstrates use of the ZoomSlider class to zoom in/out using a control.`,screenshot:`zoomslider`,priority:2,tags:[`extensions`,`html`],description:`HTML controls for panning and zooming that are shown in front of a Diagram.`}},{slug:`Hyperlink`,url:`/samples/Hyperlink`,metadata:{title:`Hyperlinks: Underlined Text When Clicked Opens a URL`,titleShort:`Hyperlink Text`,indexDescription:`Demonstrates usage of the HyperlinkText extension.`,screenshot:`hyperlink`,priority:2,tags:[`extensions`],description:`Implement a 'hyperlink' that allows the user to open a page by clicking.`}},{slug:`instrumentGauge`,url:`/samples/instrumentGauge`,metadata:{title:`Instrument Gauge Using Graduated Panel`,titleShort:`Instrument Gauges`,indexDescription:`A gauge using a scale made with a Graduated Panel.`,screenshot:`instrumentgauge`,priority:2,tags:[`gauges`,`geometries`],description:`An instrument gauge implemented in GoJS using a Graduated Panel.`}},{slug:`flowgrammer`,url:`/samples/flowgrammer`,metadata:{title:`Interactive Builder of Flowgrams, Flowcharts with Constrained Visual Syntax`,titleShort:`Flowgrammer Visual Editor`,indexDescription:`Demonstrates a flow-chart-like editor of a restricted syntax language.  Uses the ParallelLayout extension.`,screenshot:`flowgrammer`,priority:2,tags:[`collections`,`layered-digraph`,`palette`,`overview`],description:`An editor for a flowchart-like diagram with a restricted syntax -- add nodes by dropping them onto existing nodes or links.`}},{slug:`decisionTree`,url:`/samples/decisionTree`,metadata:{title:`Interactive Decision Tree Diagram Incrementally User-Expanded`,titleShort:`Decision Tree`,indexDescription:`Allows a user to make progressive decisions.`,screenshot:`decisiontree`,priority:2,tags:[`treelayout`,`tooltips`,`buttons`],description:`Interactive decision diagram with automatic expansion as the user makes choices.`}},{slug:`PolygonDrawing`,url:`/samples/PolygonDrawing`,metadata:{title:`Interactive Drawing of Polygons or Polylines`,indexDescription:`A custom Tool that lets the user interactively draw polygons and polyline Shapes.`,screenshot:`polygondrawing`,priority:2,tags:[`tools`,`extensions`,`geometries`],description:`The user can draw a new polygon by clicking where its points should go.`}},{slug:`interactiveForce`,url:`/samples/interactiveForce`,metadata:{title:`Interactive Force Directed Layout During Dragging`,titleShort:`Continuous Interactive Force Layout`,indexDescription:`A continuous ForceDirectedLayout that occurs as the user drags around a node.`,screenshot:`interactiveforce`,priority:2,tags:[`force-directed`,`customlayout`],description:`A continuously operating ForceDirectedLayout lets the user push and pull nodes around.`}},{slug:`gantt`,url:`/samples/gantt`,metadata:{title:`Interactive Gantt Chart With Collapsible Tree of Tasks, Scrolling, and Highlighting`,titleShort:`Gantt Chart`,indexDescription:`Demonstrates a Gantt chart with a collapsible tree of tasks`,screenshot:`gantt`,priority:2,tags:[`grid`],description:`A Gantt chart that supports zooming into the timeline.`}},{slug:`mindMap`,url:`/samples/mindMap`,metadata:{title:`Interactive Mind Map Diagram`,titleShort:`Mind Map Editor`,indexDescription:`A Mind Map, a double-tree whose nodes have an 'add' button when selected and a context menu.`,screenshot:`mindmap`,priority:2,tags:[`collections`,`treelayout`,`contextmenus`,`buttons`,`commands`],description:`A mind map editor, showing how subtrees can be moved, copied, deleted, and laid out.`}},{slug:`IVRtree`,url:`/samples/IVRtree`,metadata:{title:`Interactive Voice Response Tree Diagram with Collapsible List of Details`,titleShort:`IVR Tree Diagram`,indexDescription:`Diagram representation of an Interactive Voice Response Tree (IVR tree). Nodes may have a collapsible list of details.`,screenshot:`ivrtree`,priority:2,tags:[`tables`,`itemarrays`,`treelayout`,`buttons`,`theme`],description:`An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses.`}},{slug:`LassoSelecting`,url:`/samples/LassoSelecting`,metadata:{title:`LassoSelectingTool lets the user draw a lasso to select nodes`,titleShort:`Lasso Selecting`,indexDescription:`A custom Tool that replaces the standard DragSelectingTool to allow the user to draw a lasso around the Parts they want to select.`,screenshot:`lassoselecting`,priority:2,tags:[`tools`,`extensions`],description:`A demonstration of the LassoSelectingTool extension.`}},{slug:`layeredDigraph`,url:`/samples/layouts?layout=layeredDigraph`,metadata:{title:`Layered Digraph Layout`,indexDescription:`Layered Digraph Layout organizes linked data into layers.`,screenshot:`layereddigraph`,priority:2,tags:[`layouts`]}},{slug:`htmlLightBoxContextMenu`,url:`/samples/htmlLightBoxContextMenu`,metadata:{title:`LightBox Style HTML Context Menu`,indexDescription:`Shows a LightBox style HTML Context Menu.`,screenshot:`htmllightboxcontextmenu`,priority:2,tags:[`contextmenus`,`html`],description:`Demonstrate context menus implemented in HTML covering the whole window.`}},{slug:`dragUnoccupied`,url:`/samples/dragUnoccupied`,metadata:{title:`Limit Dragging of Nodes to Unoccupied Areas in Diagram`,titleShort:`Drag Unoccupied`,indexDescription:`Demonstrates a function to avoid any overlapping of nodes during dragging.`,screenshot:`dragunoccupied`,priority:2,description:`Limit the dragging of nodes to avoid any overlap with other nodes.`}},{slug:`PolylineLinking`,url:`/samples/PolylineLinking`,metadata:{title:`Linking Via Repeated Clicks to Determine Path of New Link`,titleShort:`Polyline Linking`,indexDescription:`A custom LinkingTool that lets the user determine the route of a new Link by clicking.`,screenshot:`polylinelinking`,priority:2,tags:[`links`,`tools`,`extensions`],description:`Let the user draw a new link by clicking consecutive points through which the link's route must pass.`}},{slug:`macros`,url:`/samples/macros`,metadata:{title:`Macros -- Automatic Ungrouping of Dropped Elements`,titleShort:`Macros from Palette`,indexDescription:`Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram.`,screenshot:`macros`,priority:2,tags:[`groups`,`palette`],description:`Automatically start editing dropped nodes and ungroup dropped groups to create subgraphs.`}},{slug:`magnifier`,url:`/samples/magnifier`,metadata:{title:`Magnified View of Portion of Diagram Using Overview`,titleShort:`Magnifier View`,indexDescription:`An Overview used as a magnifying glass.`,screenshot:`magnifier`,priority:2,tags:[`tables`,`treelayout`,`overview`,`commands`],description:`Use a draggable Overview as a kind of magnifying lens.`}},{slug:`minimal`,url:`/samples/minimal`,metadata:{title:`Minimal Diagram Showing Built-in Operations`,titleShort:`Minimal`,indexDescription:`Shows default Diagram interactivity and basic data binding. Select, move, copy, delete, undo, redo with keyboard or touch.`,screenshot:`minimal`,priority:2,description:`An almost minimal diagram using a very simple node template and the default link template.`}},{slug:`minimalBlob`,url:`/samples/minimalBlob`,metadata:{title:`Minimal Image Download Using MakeImageData and Blobs`,titleShort:`Download Image Blob`,indexDescription:`Minimal, showing image Blob creation with Diagram.makeImageData, and download.`,screenshot:`minimal`,priority:2,tags:[`export`],description:`Minimal, showing image Blob creation and download with Diagram.makeImageData.`}},{slug:`minimalSvg`,url:`/samples/minimalSvg`,metadata:{title:`Minimal SVG Download Using MakeSvg`,titleShort:`Download SVG`,indexDescription:`Minimal, showing SVG creation with Diagram.makeSvg, and download.`,screenshot:`minimal`,priority:2,tags:[`svg`,`export`],description:`Minimal, showing SVG rendering and download with Diagram.makeSvg.`}},{slug:`multiColorLinks`,url:`/samples/multiColorLinks`,metadata:{title:`Multi-color Link Paths`,indexDescription:`Demonstrates a custom Link that can be stroked with multiple consecutive colors.`,screenshot:`multicolorlinks`,priority:2,tags:[`links`,`force-directed`,`geometries`],description:`Links that can render different c

4olors for equal lengths along the link path.`}},{slug:`multiArrow`,url:`/samples/multiArrow`,metadata:{title:`Multiple Arrowheads Along Link Path`,indexDescription:`A custom orthogonal Link that draws arrowheads at the end of each segment.`,screenshot:`multiarrow`,priority:2,tags:[`links`,`force-directed`,`geometries`],description:`A custom Link geometry that draws arrowheads at the end of each segment of orthogonally routed links.`}},{slug:`doubleCircle`,url:`/samples/doubleCircle`,metadata:{title:`Multiple Concentric Circles of Nodes Laid out by Circular Layout`,titleShort:`Double Circle`,indexDescription:`Multiple circles using repeated CircularLayouts.`,screenshot:`doublecircle`,priority:2,tags:[`collections`,`circularlayout`],description:`Arrange nodes into concentric circles using CircularLayout.`}},{slug:`packed`,url:`/samples/layouts?layout=packed`,metadata:{title:`Packed Layout`,indexDescription:`Custom layout that  arranges nodes into a predefined shape and size.`,screenshot:`packed`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`parallel`,url:`/samples/layouts?layout=parallel`,metadata:{title:`Parallel Layout`,indexDescription:`Custom layout arranging nodes into splitting and merging paths to create an organized workflow`,screenshot:`parallel`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`parseTree`,url:`/samples/parseTree`,metadata:{title:`Parse Tree Diagram With Leaf Nodes in Horizontal Line`,titleShort:`Parse Tree`,indexDescription:`A Parse tree representing the syntactic structure of a sentence. The leaf nodes are shown in a horizontal line.`,screenshot:`parsetree`,priority:2,tags:[`treelayout`,`customlayout`,`buttons`],description:`A collapsible tree layout with all of the leaf nodes at the same layer.`}},{slug:`PERT`,url:`/samples/PERT`,metadata:{title:`PERT Chart with Legend`,indexDescription:`A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties.`,screenshot:`pert`,priority:2,tags:[`tables`,`layered-digraph`,`legend`],description:`A PERT chart: a diagram for visualizing and analyzing task dependencies and bottlenecks.`}},{slug:`dynamicPieChart`,url:`/samples/dynamicPieChart`,metadata:{title:`Pie Chart Supporting Selection of Slices and Dynamically Changing Values`,titleShort:`Dynamic Pie Chart`,indexDescription:`Dynamic pie chart with selectable slices that can change size.`,screenshot:`dynamicpiechart`,priority:2,tags:[`tables`,`itemarrays`,`collections`,`tooltips`,`buttons`,`geometries`,`charts`,`commands`],description:`A GoJS pie chart that updates dynamically as counts change.`}},{slug:`pieCharts`,url:`/samples/pieCharts`,metadata:{title:`Pie Charts in Nodes`,titleShort:`Pie Charts`,indexDescription:`Simple pie charts within nodes.`,screenshot:`piecharts`,priority:2,tags:[`itemarrays`,`tooltips`,`geometries`,`charts`],description:`GoJS nodes containing simple pie charts, each slice showing a tooltip.`}},{slug:`navigation`,url:`/samples/navigation`,metadata:{title:`Programmatic Navigation Through Related Nodes/Links/Groups`,titleShort:`Navigation`,indexDescription:`Displays relationships between different parts of a diagram.`,screenshot:`navigation`,priority:2,tags:[`collections`,`groups`,`tooltips`],description:`Show the relationships of nodes and links and groups.`}},{slug:`radialAdornment`,url:`/samples/radialAdornment`,metadata:{title:`Radial Adornment Buttons for Primary Selected Node`,titleShort:`Radial Adornment`,indexDescription:`An adornment showing buttons in a circle on one selected node.`,screenshot:`radialadornment`,priority:2,tags:[`buttons`,`geometries`],description:`When a diagram node is selected show a selection Adornment holding buttons on which a click invokes a command or a drag starts a tool`}},{slug:`radial`,url:`/samples/layouts?layout=radial`,metadata:{title:`Radial Layout`,indexDescription:`Custom layout that places nodes based on the number of degrees away from the center node.`,screenshot:`radial`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`RealtimeDragSelecting`,url:`/samples/RealtimeDragSelecting`,metadata:{title:`Realtime Selection During Backgroun

4d Dragging`,titleShort:`Realtime Selection`,indexDescription:`A custom Tool that lets a user drag and create a box to select nodes and links.`,screenshot:`realtimedragselecting`,priority:2,tags:[`collections`,`treelayout`,`tools`,`extensions`],description:`This customized DragSelectingTool selects and deselects parts continuously while the user is dragging a box, rather than when the tool finishes.`}},{slug:`radialPartition`,url:`/samples/radialPartition`,metadata:{title:`Recentering Radial Partition Layout in Concentric Annular Wedges`,titleShort:`Radial Partition`,indexDescription:`Arrange people in rings around a central person, in layers according to distance from the central person.`,screenshot:`radialpartition`,priority:2,tags:[`collections`,`tooltips`,`geometries`,`customlayout`,`extensions`],description:`Arrange people in rings around a central person, in layers according to distance from the central person.`}},{slug:`regroupingTreeView`,url:`/samples/regroupingTreeView`,metadata:{title:`Regrouping Editor and Simultaneous Tree View`,indexDescription:`Regrouping with tree view of grouping hierarchy.`,screenshot:`regroupingtreeview`,priority:2,tags:[`collections`,`gridlayout`,`treelayout`,`groups`,`buttons`,`commands`],description:`Keeping a TreeModel in synch with a GraphLinksModel in a Regrouping editor.`}},{slug:`svgDataUrl`,url:`/samples/svgDataUrl`,metadata:{title:`Rendering SVG to Data URL with Inline Images`,indexDescription:`In makeSvg, replace image sources with Base64`,screenshot:`svgdataurl`,priority:2,tags:[`svg`,`export`],description:`Export SVG with Base64 URIs instead of URLs for picture hrefs.`}},{slug:`Rescaling`,url:`/samples/Rescaling`,metadata:{title:`Rescaling by Dragging Handle`,indexDescription:`A custom Tool that lets a user change the scale of an object.`,screenshot:`rescaling`,priority:2,tags:[`tools`,`extensions`],description:`A demonstration of the RescalingTool extension.`}},{slug:`SectorReshaping`,url:`/samples/SectorReshaping`,metadata:{title:`Reshaping and Rotating Sectors of Circles`,indexDescription:`A custom Tool that supports interactive reshaping of pie-shaped sectors of circles.`,screenshot:`sectorreshaping`,priority:2,tags:[`tools`,`extensions`,`geometries`],description:`A demonstration of the SectorReshapingTool extension.`}},{slug:`SnapLinkReshaping`,url:`/samples/SnapLinkReshaping`,metadata:{title:`Reshaping Links Snaps to Grid`,indexDescription:`A custom Tool that allows reshaping links with grid snapping.`,screenshot:`snaplinkreshaping`,priority:2,tags:[`links`,`tools`,`palette`,`extensions`,`grid`],description:`When reshaping an orthogonal link, make sure the points are moved onto a grid.`}},{slug:`OrthogonalLinkReshaping`,url:`/samples/OrthogonalLinkReshaping`,metadata:{title:`Reshaping of Orthogonal Links and Adding/Removing Segments`,titleShort:`Orthogonal Link Reshaping`,indexDescription:`A custom Tool that lets the user reshape orthogonal links by dragging entire segments.`,screenshot:`orthogonallinkreshaping`,priority:2,tags:[`links`,`tools`,`extensions`,`geometries`],description:`An elaboration of the standard LinkReshapingTool that adds a broad handle to allow the user to easily drag a segment.`}},{slug:`ResizeMultiple`,url:`/samples/ResizeMultiple`,metadata:{title:`Resize Multiple Nodes Simultaneously in Realtime`,titleShort:`Resizing Multiple`,indexDescription:`A custom ResizingTool that lets the user resize many selected objects at once.`,screenshot:`resizemultiple`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to resize multiple nodes at once by using the ResizeMultipleTool extension.`}},{slug:`OverviewResizing`,url:`/samples/OverviewResizing`,metadata:{title:`Resizing of Overview Box`,indexDescription:`A custom Tool which allows the user to resize the overview box.`,screenshot:`overviewresizing`,priority:2,tags:[`tools`,`overview`,`extensions`],description:`The OverviewResizingTool extension allows the user to change the viewport of the observed Diagram by resizing the box representing the viewport in an Overview.`}},{slug:`ColumnResizing`,url:`/samples/ColumnResizing`,metadata:{title:`Resizing Rows and Columns in Table Panels in Nodes`,titleShort:`Table Row and Column Resizing`,indexDescription:`Two custom Tools that let the user resize the width of columns or the height of rows in a Table Panel of a Node.`,screenshot:`columnresizing`,priority:2,tags:[`tables`,`itemarrays`,`tools`,`extensions`,`geometries`],description:`Using the RowResizingTool and ColumnResizingTool to allow the user to change the size of rows and columns in a Table Panel.`}},{slug:`pinchResizing`,url:`/samples/pinchResizing`,metadata:{title:`Resizing via Pinch Zooming`,indexDescription:`Demonstrates customization of pinch-zooming to scale a node.`,screenshot:`minimal`,priority:2,tags:[`tools`],description:`Customize the pinch-zooming action of GoJS.`}},{slug:`RotateMultiple`,url:`/samples/RotateMultiple`,metadata:{title:`Rotate Multiple Nodes Simultaneously in Realtime either Together or Individually`,titleShort:`Rotate Multiple`,indexDescription:`A custom RotatingTool that lets the user rotate many selected objects at once.`,screenshot:`rotatemultiple`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to rotate multiple nodes at the same time by using the RotateMultipleTool extension.`}},{slug:`SpotRotating`,url:`/samples/SpotRotating`,metadata:{title:`Rotating Node about Movable Rotation Spot`,indexDescription:`A custom RotatingTool that lets the user shift the rotation point.`,screenshot:`spotrotating`,priority:2,tags:[`tools`,`extensions`],description:`Allow the user to shift the rotation point as well as rotate objects by using the SpotRotatingTool extension.`}},{slug:`LinkLabelRouter`,url:`/samples/LinkLabelRouter`,metadata:{title:`Router Shifting Link Labels to Reduce Overlaps`,titleShort:`Link Label Router`,indexDescription:`A demonstration of the LinkLabelRouter extension based on the Dynamic Ports sample. Move Nodes or create new links to demonstrate that link labels will automatically move to a nearby location to avoid overlapping.`,screenshot:`linklabelrouter`,priority:2,tags:[`routers`,`extensions`],description:`A custom Router that prevents overlaps between labels on links.`}},{slug:`saveAndLoadLocalFiles`,url:`/samples/saveAndLoadLocalFiles`,metadata:{title:`Saving and Loading Models in local files`,titleShort:`Local Files`,indexDescription:`Demonstrates saving and loading model files on the local machine`,screenshot:`minimal`,priority:2,tags:[`extensions`,`commands`],description:`The DrawCommandHandler extension adds a command to save the Model as a JSON formatted text file, and a method and options for loading such files.`}},{slug:`ScrollingTable`,url:`/samples/ScrollingTable`,metadata:{title:`Scrolling Table Panels with ScrollBars`,indexDescription:`Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons.`,screenshot:`scrollingtable`,priority:2,tags:[`tables`,`itemarrays`,`buttons`,`extensions`],description:`Allow users to scroll the items in a Table Panel.`}},{slug:`selectableFields`,url:`/samples/selectableFields`,metadata:{title:`Selectable Fields in Record Nodes`,indexDescription:`Records with fields that the user can select.`,screenshot:`selectablefields`,priority:2,tags:[`tables`,`itemarrays`,`commands`],description:`Support selecting items inside nodes.`}},{slug:`selectablePorts`,url:`/samples/selectablePorts`,metadata:{title:`Selectable, Deletable Ports in Nodes`,indexDescription:`A Node with ports that can be selected and deleted.`,screenshot:`selectableports`,priority:2,tags:[`itemarrays`,`ports`,`geometries`,`commands`],description:`Support selecting ports within nodes.`}},{slug:`adornmentButtons`,url:`/samples/adornmentButtons`,metadata:{title:`Selection Adornment Showing Buttons for Nodes`,titleShort:`Adornment Buttons`,indexDescription:`Selected nodes show a row of buttons that execute commands or start tools.`,screenshot:`adornmentbuttons`,priority:2,tags:[`buttons`,`geometries`],description:`When a diagram node is selected show a selection Adornment holding buttons on which a click invokes a command or a drag starts a tool`}},{slug:`sequenceDiagram`,url:`/samples/sequenceDiagram`,metadata:{title:`Sequence Diagram with Actors, Lifelines, Activities, and Interactions`,titleShort:`Sequence Diagram`,

4indexDescription:`A sequence diagram illustrates how different processes interact with one-another and in what order.`,screenshot:`sequencediagram`,priority:2,tags:[`links`,`groups`,`tools`,`grid`,`process`],description:`A sequence diagram editor.`}},{slug:`serpentine`,url:`/samples/layouts?layout=serpentine`,metadata:{title:`Serpentine Layout`,indexDescription:`Custom layout for linear models that chains nodes in rows of alternating directions.`,screenshot:`serpentine`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`sharedStates`,url:`/samples/sharedStates`,metadata:{title:`Shared States not using Groups`,indexDescription:`As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers.`,screenshot:`sharedstates`,priority:2,tags:[`collections`,`customlayout`,`groups`,`tools`],description:`A diagram where nodes may belong to multiple groups.`}},{slug:`LinkShifting`,url:`/samples/LinkShifting`,metadata:{title:`Shifting Link Connection Points along Side of Node`,titleShort:`Shifting Link Connections`,indexDescription:`A custom Tool that adds handles on Links to allow the user to shift the end point of the Link along the sides of the port without disconnecting it.`,screenshot:`linkshifting`,priority:2,tags:[`links`,`tools`,`extensions`,`geometries`],description:`Allow the user to shift the end of a link that is connected with a rectangular node.`}},{slug:`PortShifting`,url:`/samples/PortShifting`,metadata:{title:`Shifting Port by Dragging Individual Port within its Node`,titleShort:`Shifting Ports in Nodes`,indexDescription:`A custom Tool that lets the user drag a port in a Spot Panel of a Node.`,screenshot:`portshifting`,priority:2,tags:[`ports`,`tooltips`,`tools`,`palette`,`extensions`,`grid`],description:`Allow the user to shift ports that are in a node.`}},{slug:`DOMTree`,url:`/samples/DOMTree`,metadata:{title:`Showing HTML DOM Tree as Nodes and Links with TreeLayout`,titleShort:`DOM Tree`,indexDescription:`Shows the DOM of this page displayed as a tree. Selection highlights the DOM element in the page.`,screenshot:`domtree`,priority:2,tags:[`treelayout`,`buttons`],description:`Interactive diagram showing the structure of the HTML DOM of this HTML page, allowing collapsing/expanding of subtrees.`}},{slug:`Robot`,url:`/samples/Robot`,metadata:{title:`Simulating Input using InputEvents`,indexDescription:`Demonstrates use of the Diagram methods to simulate mouse events.`,screenshot:`robot`,priority:2,tags:[`collections`,`contextmenus`,`palette`,`buttons`,`extensions`,`html`],description:`Test a diagram by simulating abstract input events.`}},{slug:`singlePage`,url:`/samples/singlePage`,metadata:{title:`Single Page Diagram Editor with Legend`,indexDescription:`Show a diagram on a sheet of paper, limiting dragging and resizing to stay within the page minus margins.`,screenshot:`singlepage`,priority:2,tags:[`grid`,`legend`],description:`A diagram that shows a sheet of paper; nodes cannot be dragged or resized beyond the edge of the sheet.`}},{slug:`sparklineGraphs`,url:`/samples/sparklineGraphs`,metadata:{title:`Sparkline Charts in Nodes`,indexDescription:`Simple sparkline charts within nodes.`,screenshot:`sparklinegraphs`,priority:2,tags:[`treelayout`,`geometries`,`charts`],description:`Sparkline charts in a Diagram.`}},{slug:`spiral`,url:`/samples/layouts?layout=spiral`,metadata:{title:`Spiral Layout`,indexDescription:`Custom layout that positions a chain of nodes in a spiral.`,screenshot:`spiral`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`TextEditor`,url:`/samples/TextEditor`,metadata:{title:`Standard HTMLInfo Text Editor`,indexDescription:`Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor.`,screenshot:`texteditor`,priority:2,tags:[`html`,`extensions`],description:`A re-implementation of the default text editor, implemented by the TextEditor extension.`}},{slug:`stateChartIncremental`,url:`/samples/stateChartIncremental`,metadata:{title:`State Chart Editor Saving Incremental JSON`,indexDescription:`State Chart using incremental JSON.`,screenshot:`statechartincremental`,priority:2,tags:[`buttons`,`process`],description:`An editable finite state machine chart that saves incremental changes.`}},{slug:`swimLaneCompact`,url:`/samples/layouts?layout=swimLaneCompact`,metadata:{title:`Swim Lane Compact Layout`,indexDescription:`Custom layout that places nodes into swimlanes while using as few columns as possible.`,screenshot:`swimlanecompact`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`swimLane`,url:`/samples/layouts?layout=swimLane`,metadata:{title:`Swim Lane Layout`,indexDescription:`Custom layout for sorting linked nodes into predefined lanes.`,screenshot:`swimlane`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`table`,url:`/samples/layouts?layout=table`,metadata:{title:`Table Layout`,indexDescription:`Custom layout organizes nodes into rows and columns`,screenshot:`table`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`taperedLinks`,url:`/samples/taperedLinks`,metadata:{title:`Tapered Links Custom Computed Geometry for Link Path Shapes`,titleShort:`Tapered Links`,indexDescription:`Demonstrates a custom Geometry for Link paths.`,screenshot:`taperedlinks`,priority:2,tags:[`links`,`force-directed`,`geometries`],description:`A Link class using a custom tapered geometry by overriding Link.makeGeometry.`}},{slug:`thermometer`,url:`/samples/thermometer`,metadata:{title:`Thermometer Nodes using Graduated Panels`,indexDescription:`Graduated thermometer scales using Graduated Panel.`,screenshot:`thermometer`,priority:2,tags:[`gauges`,`geometries`],description:`A thermometer.`}},{slug:`tiger`,url:`/samples/tiger`,metadata:{title:`Tiger Drawn in SVG using Shapes`,titleShort:`SVG Tiger using Shapes`,indexDescription:`Shows a tiger rendered in SVG without using a Picture`,screenshot:`tiger`,priority:2,tags:[`geometries`,`svg`],description:`Importing some SVG as GoJS Shapes.`}},{slug:`tree`,url:`/samples/layouts?layout=tree`,metadata:{title:`Tree Layout`,indexDescription:`Hierarchical layout for tree-like data.`,screenshot:`tree`,priority:2,tags:[`layouts`]}},{slug:`treeMap`,url:`/samples/layouts?layout=treeMap`,metadata:{title:`Tree Map Layout`,indexDescription:`Custom layout that organizes nodes in a tree and sizes them based on their value compared to the rest of the model`,screenshot:`treemap`,priority:2,tags:[`layouts`,`extensions`]}},{slug:`triStateCheckBoxTree`,url:`/samples/triStateCheckBoxTree`,metadata:{title:`Tri-state CheckBox Tree Showing Parti

4ally Checked SubTrees`,titleShort:`Tri-state CheckBox Tree`,indexDescription:`Demonstrates a traditional 'Tree View' in a GoJS diagram, where each item has a checkbox with three states.`,screenshot:`tristatecheckboxtree`,priority:2,tags:[`treelayout`,`buttons`],description:`A traditional tree view using TreeLayout with tri-state checkboxes showing partially checked subtrees.`}},{slug:`twoHalves`,url:`/samples/twoHalves`,metadata:{title:`Two Rounded Halves`,indexDescription:`Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure.`,screenshot:`twohalves`,priority:2,tags:[`geometries`],description:`Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure.`}},{slug:`umlClass`,url:`/samples/umlClass`,metadata:{title:`UML Class Diagram Editor`,indexDescription:`A UML Class diagram shows software classes and their properties and methods, and the relationships between them.`,screenshot:`umlclass`,priority:2,tags:[`tables`,`itemarrays`,`treelayout`,`buttons`],description:`UML Class-like nodes showing two collapsible lists of items.`}},{slug:`updateDemo`,url:`/samples/updateDemo`,metadata:{title:`Update Demo Showing ChangedEvents, Transactions, UndoManager`,titleShort:`Update Demo`,indexDescription:`Showcases two Diagrams observing the same Model. Modifying positions in one Diagram will modify them in the model, updating the other Diagram as well.`,screenshot:`updatedemo`,priority:2,tags:[`treelayout`,`buttons`,`html`],description:`Show the ChangedEvents that occur as the user modifies diagrams that share a single model, and the state of the UndoManager.`}},{slug:`gestureBehavior`,url:`/samples/gestureBehavior`,metadata:{title:`Various Gesture Behaviors Demonstration`,titleShort:`Various Gestures Demo`,indexDescription:`Shows different options for ToolManager's gestureBehavior.`,screenshot:`minimal`,priority:2,description:`Example of ToolManager.gestureBehavior property.`}},{slug:`CheckBoxes`,url:`/samples/CheckBoxes`,metadata:{title:`Various Styles of CheckBoxes in Nodes`,titleShort:`CheckBox Styles`,indexDescription:`Demonstrates simple uses of CheckBoxButtons.`,screenshot:`checkboxes`,priority:2,tags:[`tables`,`itemarrays`,`buttons`,`extensions`],description:`An implementation of CheckBoxes as GoJS objects to show and edit a boolean data property.`}},{slug:`Toggles`,url:`/samples/Toggles`,metadata:{title:`Various Styles of Toggles in Nodes`,titleShort:`Toggle Styles`,indexDescription:`Demonstrates simple uses of ToggleSwitches.`,screenshot:`Toggles`,priority:2,tags:[`tables`,`itemarrays`,`buttons`,`extensions`],description:`An implementation of Toggles as GoJS objects to show and edit a boolean data property.`}},{slug:`relationships`,url:`/samples/relationships`,metadata:{title:`Various Visual Relationships`,titleShort:`Visual Relationships`,indexDescription:`Shows how you can create custom renderings for Links by repeatedly drawing GraphObjects along the route.`,screenshot:`relationships`,priority:2,tags:[`collections`,`links`,`treelayout`,`geometries`],description:`Examples of different visuals for relationships (links).`}},{slug:`venn`,url:`/samples/venn`,metadata:{title:`Venn Diagram`,indexDescription:`Venn Diagram of Common Glyphs in Greek, Latin, and Russian`,screenshot:`venn`,priority:2,tags:[`customlayout`,`circularlayout`],description:`Venn diagram showing common characters of two or three alphabets, using either CircularLayout or PackedLayout.`}},{slug:`dataFlowVertical`,url:`/samples/dataFlowVertical`,metadata:{title:`Vertical Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports`,titleShort:`Data Flow Diagram (Vertical)`,indexDescription:`Same as Data Flow, but vertically oriented, and with slightly different styling.`,screenshot:`dataflowvertical`,priority:2,tags:[`tables`,`layered-digraph`,`ports`,`process`],description:`Data flow or workflow graph of nodes with varying input and output ports with labels, oriented vertically.`}},{slug:`swimLanesVertical`,url:`/samples/swimLanesVertical`,metadata:{title:`Vertical, Collapsible, Resizable, Re-orderable Swim Lanes for Flow Diagram`,titleShort:`Swim Lanes (Vertical)`,indexDescription:`Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.`,screenshot:`swimlanesvertical`,priority:2,tags:[`tables`,`gridlayout`,`layered-digraph`,`customlayout`,`groups`,`tools`,`buttons`],description:`Vertical swim lanes and pools with collapsible lanes and limited dragging.`}},{slug:`virtualized`,url:`/samples/virtualized`,metadata:{title:`Virtualized Diagram no Layout`,indexDescription:`Virtualized no Layout, an example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time.`,screenshot:`virtualized`,priority:2,tags:[`collections`,`groups`,`tooltips`,`buttons`,`performance`],description:`An example of virtualization where node bounds information is present in the node data, so no layout is required.`}},{slug:`virtualizedForceLayout`,url:`/samples/virtualizedForceLayout`,metadata:{title:`Virtualized Diagram with Force Directed Layout`,indexDescription:`Shows a virtualized ForceDirectedLayout with GraphLinksModel.`,screenshot:`virtualizedfor

4celayout`,priority:2,tags:[`collections`,`force-directed`,`customlayout`,`tooltips`,`performance`],description:`An example of virtualization where a virtualized ForceDirectedLayout sets the bounds for each node data.`}},{slug:`VirtualizedPacked`,url:`/samples/VirtualizedPacked`,metadata:{title:`Virtualized Diagram with Packed Layout`,indexDescription:`A virtualized version of PackedLayout that positions nodes in a packed area.`,screenshot:`virtualizedpacked`,priority:2,tags:[`customlayout`,`extensions`,`performance`],description:`Quickly layout and show part of a large graph of nested groups.`,module:!0}},{slug:`virtualizedTree`,url:`/samples/virtualizedTree`,metadata:{title:`Virtualized Tree`,indexDescription:`An example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time.`,screenshot:`virtualizedtree`,priority:2,tags:[`treelayout`,`tooltips`,`performance`],description:`An example of virtualization where a very simple tree layout sets the bounds for each node data.`}},{slug:`virtualizedTreeLayout`,url:`/samples/virtualizedTreeLayout`,metadata:{title:`Virtualized Tree with TreeLayout`,indexDescription:`Shows a virtualized TreeLayout with TreeModel.`,screenshot:`virtualizedtree`,priority:2,tags:[`collections`,`treelayout`,`customlayout`,`tooltips`,`performance`],description:`An example of virtualization where a virtualized TreeLayout sets the bounds for each node data.`}},{slug:`visualTreeGrouping`,url:`/samples/visualTreeGrouping`,metadata:{title:`Visual Tree using Groups`,indexDescription:`This shows the same visual tree using nested Groups instead of nodes and links.`,screenshot:`visualtreegrouping`,priority:2,tags:[`gridlayout`,`treelayout`,`groups`],description:`Show the visual elements of a simple diagram as a nested grouping diagram -- each Group is data bound to an element of the other Diagram.`}},{slug:`wordcloud`,url:`/samples/wordcloud`,metadata:{title:`Word Cloud using PackedLayout`,indexDescription:`A word cloud visualization using the PackedLayout extension.`,screenshot:`wordcloud`,priority:2,tags:[`links`,`treelayout`,`geometries`],description:`Given a collection of words and their frequencies or importance, generate a diagram of those words scale by their frequency or importance and then packed together.`,module:!0}},{slug:`spacingZoom`,url:`/samples/spacingZoom`,metadata:{title:`Zooming Changes Spaces Between Nodes without Changing Scale`,titleShort:`Spacing Zoom`,indexDescription:`When zooming, change the spacing of the Nodes, not the Diagram.scale.`,screenshot:`minimal`,priority:2,tags:[`commands`],description:`Zooming only changes the distance between nodes, not the apparent size of each node.`}},{slug:`familyTreeJP`,url:`/samples/familyTreeJP`,metadata:{title:`Family Tree Diagram, Japanese`,indexDescription:`Shows a standard family tree.`,screenshot:`familytreejp`,priority:3,tags:[`tables`,`treelayout`,`tooltips`,`legend`],description:`A family tree diagram showing Japanese royalty.`}},{slug:`faultTree`,url:`/samples/faultTree`,metadata:{title:`Fault Tree Analysis Diagram Where Gate-Figure Shapes Describe Relationships of Contributing Conditions to Subsystem Nodes`,titleShort:`Fault Tree Analysis`,indexDescription:`A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node.`,screenshot:`faulttree`,priority:3,tags:[`treelayout`,`buttons`],description:`A Fault Tree diagram showing gate shapes at each non-root node.`}},{slug:`PanelLayoutFlow`,url:`/samples/PanelLayoutFlow`,metadata:{title:`Flow PanelLayout Wrapping Elements Into Rows or Columns`,titleShort:`Flow Layout in Panels`,indexDescription:`A custom PanelLayout that arranges panel elements into rows or columns.`,screenshot:`panellayoutflow`,priority:3,tags:[`customlayout`,`extensions`],description:`The Flow PanelLayout arranges panel elements in rows or columns.`}},{slug:`kittenMonitor`,url:`/samples/kittenMonitor`,metadata:{title:`Kitten Monitor Using Background Image`,titleShort:`Monitor with Background`,indexDescription:`A monitoring diagram where the nodes (kittens) move on a background image (a house plan), with
5tooltips describing kittens.`,screenshot:`kittenmonitor`,priority:3,tags:[`tooltips`,`monitoring`,`animation`],description:`A visual monitor of the position of kittens in a house.`}},{slug:`network`,url:`/samples/network`,metadata:{title:`Network Configuration Diagram Editor With Bars`,titleShort:`Network Editor with Bars`,indexDescription:`Shows a network configurator with a Palette and Overview.`,screenshot:`network`,priority:3,tags:[`links`,`palette`,`overview`],description:`A simple network configuration editor.`}},{slug:`orgChartAssistants`,url:`/samples/orgChartAssistants`,metadata:{title:`Org Chart with Assistants on the Side`,indexDescription:`Shows an org chart with assistant nodes at the side, above regular child nodes.`,screenshot:`orgchartassistants`,priority:3,tags:[`tables`,`treelayout`,`tooltips`,`buttons`],description:`An organization chart editor with assistants shown on the side -- edit details and change relationships.`}},{slug:`orgChartExtras`,url:`/samples/orgChartExtras`,metadata:{title:`Org Chart With Extra Relationships`,indexDescription:`Shows an org chart with extra links and expand/collapse functionality.`,screenshot:`orgchartextras`,priority:3,tags:[`tables`,`treelayout`,`tooltips`,`buttons`],description:`An org chart that also shows non-tree-structure relationships.`}},{slug:`PackedHierarchy`,url:`/samples/PackedHierarchy`,metadata:{title:`Packed Hierarchy Diagram: Nested Circular Groups`,titleShort:`Packed Hierarchy of Groups`,indexDescription:`A customized PackedLayout that arranges nested circular groups.`,screenshot:`packedhierarchy`,priority:3,tags:[`customlayout`,`extensions`],description:`The JavaScript class hierarchy defined by the GoJS library, arranged in nested circles.`,module:!0}},{slug:`pageFlow`,url:`/samples/pageFlow`,metadata:{title:`Page Flow Diagram Editor`,indexDescription:`A diagram representation of webpage flow.`,screenshot:`pageflow`,priority:3,tags:[`itemarrays`,`layered-digraph`,`palette`,`buttons`,`process`],description:`A workflow diagram showing navigation between web pages, with an editable list of comments and to-dos.`}},{slug:`pipeTree`,url:`/samples/pipeTree`,metadata:{title:`Pipe Tree: Nodes at Alternating Angles of Decreasing Thickness`,titleShort:`Pipe Tree`,indexDescription:`A tree layout with rectangular nodes at alternating angles and no links.`,screenshot:`pipetree`,priority:3,tags:[`treelayout`],description:`A tree structure that does not use links.`}},{slug:`planogram`,url:`/samples/planogram`,metadata:{title:`Planogram Editor: Drag-and-Drop items onto Shelves and Racks`,titleShort:`Planogram`,

5indexDescription:`Drag-and-drop items from the Palette onto racks in the Diagram.`,screenshot:`planogram`,priority:3,tags:[`groups`,`palette`,`grid`,`frameworks`,`commands`],description:`An editor for defining planograms: visual displays of merchandise.`}},{slug:`seatingChart`,url:`/samples/seatingChart`,metadata:{title:`Seating Chart Diagram Editor Dropping People into Seats at Tables`,titleShort:`Seating Chart`,indexDescription:`This sample demonstrates custom logic in a GoJS diagram - a 'Person' node can be dropped onto a 'Table' node, causing the person to be assigned a position at the closest empty seat at that table.`,screenshot:`seatingchart`,priority:3,tags:[`tools`,`palette`],description:`A seating chart editor for assigning places at tables.`}},{slug:`sequentialFunction`,url:`/samples/sequentialFunction`,metadata:{title:`Sequential Function Chart for Control Systems with Steps, Transitions, Parallel Branches, and Convergences`,titleShort:`Sequential Function Chart`,indexDescription:`A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing.`,screenshot:`sequentialfunction`,priority:3,tags:[`layered-digraph`,`process`],description:`A sequential function chart.`}},{slug:`shopFloorMonitor`,url:`/samples/shopFloorMonitor`,metadata:{title:`Shop Floor Monitor`,indexDescription:`Shows the continuously updating state of a number of stations on an imaginary shop floor.`,screenshot:`shopfloormonitor`,priority:3,tags:[`monitoring`,`animation`],description:`A state monitoring diagram.`}},{slug:`spreadsheet`,url:`/samples/spreadsheet`,metadata:{title:`Spreadsheet-like Nested Table Panels`,indexDescription:`An example of nested Table Panels forming a spreadsheet-like grid.`,screenshot:`spreadsheet`,priority:3,tags:[`tables`,`itemarrays`,`buttons`,`geometries`],description:`Nested Panels resulting in a spreadsheet-like node.`}},{slug:`tournament`,url:`/samples/tournament`,metadata:{title:`Tournament Bracket Diagram with Automatic Computations`,titleShort:`Tournament Bracket`,indexDescription:`Tournament bracket with dynamic advancement as scores are entered.`,screenshot:`tournament`,priority:3,tags:[`tables`,`treelayout`],description:`A tournament or bracket diagram, with automatic promotion as results are entered interactively.`}},{slug:`visualTree`,url:`/samples/visualTree`,metadata:{title:`Visual Tree of another Diagram`,indexDescription:`This sample shows the actual visual tree of a running Diagram, using a second Diagram.`,screenshot:`visualtree`,priority:3,tags:[`treelayout`],description:`Show the visual elements of a simple diagram as a tree diagram -- each Node is data bound to an element of the other Diagram.`}}],Q=[{name:`all`,href:``},{name:`animation`,href:`#animation`},{name:`buttons`,href:`#buttons`},{name:`charts`,href:`#charts`},{name:`circularlayout`,href:`#circularlayout`},{name:`collections`,href:`#collections`},{name:`commands`,href:`#commands`},{name:`contextmenus`,href:`#contextmenus`},{name:`customlayout`,href:`#customlayout`},{name:`export`,href:`#export`},{name:`extensions`,href:`#extensions`},{name:`force-directed`,href:`#force-directed`},{name:`frameworks`,href:`#frameworks`},{name:`gauges`,href:`#gauges`},{name:`geometries`,href:`#geometries`},{name:`grid`,href:`#grid`},{name:`gridlayout`,href:`#gridlayout`},{name:`groups`,href:`#groups`},{name:`html`,href:`#html`},{name:`inspector`,href:`#inspector`},{name:`itemarrays`,href:`#itemarrays`},{name:`layered-digraph`,href:`#layered-digraph`},{name:`layouts`,href:`#layouts`},{name:`legend`,href:`#legend`},{name:`links`,href:`#links`},{name:`monitoring`,href:`#monitoring`},{name:`overview`,href:`#overview`},{name:`palette`,href:`#palette`},{name:`performance`,href:`#performance`},{name:`ports`,href:`#ports`},{name:`process`,href:`#process`},{name:`react`,href:`#react`},{name:`routers`,href:`#routers`},{name:`scada`,href:`#scada`},{name:`svelte`,href:`#svelte`},{name:`svg`,href:`#svg`},{name:`tables`,href:`#tables`},{name:`theme`,href:`#theme`},{name:`tools`,href:`#tools`},{name:`tooltips`,href:`#tooltips`},{name:`treelayout`,href:`#treelayout`},{name:`vue`,href:`#vue`}],xe=d(`<li class="-ml-px flex flex-col items-start gap-2"><a data-sveltekit-reload=""><span> </span> <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">

5<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li>`),Se=d(`<div class="flex flex-col gap-3"><h3 class="text-sm/6 font-medium tracking-widest my-0 text-foreground/70 uppercase sm:text-xs/6"> </h3> <ul class="flex flex-col gap-2 border-l border-l-foreground/20"></ul></div>`),Ce=d(`<nav class="flex flex-col w-68 pl-6 pr-3 gap-8 overflow-y-auto bg-background py-6"><a href="../samples">All Samples</a> <!></nav>`),$=d(`<!> <li class="truncate text-foreground"> </li>`,1),we=d(`<li class="truncate text-foreground">All Samples</li>`),Te=d(`<ul class="sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap"><!></ul>`);function Ee(n,a){O(a,!0);let d=S(a,`selectedTags`,19,()=>new Set),g=S(a,`tagCounts`,19,()=>new Map);function _(e){a.onTagToggle&&a.onTagToggle(e)}let x=Object.assign({"../content/tags/animation.html":B,"../content/tags/buttons.html":oe,"../content/tags/circularlayout.html":I,"../content/tags/collections.html":se,"../content/tags/commands.html":V,"../content/tags/contextmenus.html":R,"../content/tags/customlayout.html":z,"../content/tags/export.html":U,"../content/tags/extensions.html":ve,"../content/tags/force-directed.html":L,"../content/tags/frameworks.html":H,"../content/tags/geometries.html":ye,"../content/tags/grid.html":K,"../content/tags/gridlayout.html":be,"../content/tags/groups.html":_e,"../content/tags/html.html":W,"../content/tags/inspector.html":X,"../content/tags/itemarrays.html":ie,"../content/tags/layered-digraph.html":le,"../content/tags/legend.html":fe,"../content/tags/links.html":Y,"../content/tags/overview.html":J,"../content/tags/palette.html":ge,"../content/tags/ports.html":ce,"../content/tags/routers.html":q,"../content/tags/scada.html":me,"../content/tags/svg.html":de,"../content/tags/tables.html":G,"../content/tags/theme.html":ae,"../content/tags/tools.html":pe,"../content/tags/tooltips.html":ue,"../content/tags/treelayout.html":he}),C=new Map;for(let e of Q){if(e.name===`all`){C.set(e.name,`All Samples`);continue}let t=x[`../content/tags/${e.name}.html`],n=e.name,r=!1;if(t){let e=t.match(/<h4>(.*?)<\/h4>/s);e?.[1]&&(n=e[1],r=!0)}r||(n=n.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(` `)),C.set(e.name,n)}let w=p(()=>{let e=Q.reduce((e,t)=>{if(t.name===`all`)return e;let n=d().has(t.name),r=g().get(t.name)??0;if(!n&&r===0)return e;let i=`Tags`;return e.has(i)||e.set(i,[]),e.get(i).push(t),e},new Map);for(let[t,n]of e.entries())e.set(t,n.sort((e,t)=>{let n=C.get(e.name),r=C.get(t.name);return n.localeCompare(r)}));let t=Array.from(e.entries()).sort((e,t)=>e[0].localeCompare(t[0]));return new Map(t)});F(n,{navContent:e=>{var n=Ce(),i=h(n);o(E(i,2),17,()=>f(w),t,(e,t)=>{var n=p(()=>y(f(t),2));let i=()=>f(n)[0],a=()=>f(n)[1];var u=Se(),m=h(u),g=h(m,!0);l(m);var b=E(m,2);o(b,21,a,e=>e.name,(e,t)=>{let n=p(()=>d().has(f(t).name));var i=xe(),a=h(i),o=h(a),u=h(o,!0);l(o);var m=E(o,2);l(a),l(i),v((e,n,r)=>{k(a,`href`,f(t).href),k(a,`data-name`,f(t).name),D(a,1,e),s(u,n),D(m,1,r)},[()=>c(N(`inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground

5/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85`,f(n)&&`-ml-0.25 border-l-3 pl-4.5 sm:pl-3.5 border-primary font-semibold text-foreground hover:border-primary`)),()=>C.get(f(t).name),()=>c(N(`hidden`,f(n)&&`inline-block p-1 bg-transparent text-foreground shadow-none`))]),r(`click`,a,e=>{e.metaKey||e.ctrlKey||e.shiftKey||e.button!==0||(e.preventDefault(),_(f(t).name))}),A(e,i)}),l(b),l(u),v(()=>s(g,i())),A(e,u)}),l(n),v(e=>D(i,1,e),[()=>c(N(`text-sm/6 font-medium tracking-widest my-0 text-foreground/70 uppercase sm:text-xs/6 `,(d().size===0||d().has(`all`))&&`border-foreground font-semibold text-foreground`))]),r(`click`,i,e=>{_(`all`);let t=e.currentTarget.closest(`dialog`);t&&t.close()}),A(e,n)},topbarTitle:n=>{var r=Te(),a=h(r),c=n=>{var r=e();o(b(r),17,d,t,(e,t,n)=>{var r=$(),a=b(r),o=e=>{A(e,u(`•`))};i(a,e=>{n>0&&e(o)});var c=E(a,2),d=h(c,!0);l(c),v(e=>s(d,e),[()=>C.get(f(t))]),A(e,r)}),A(n,r)},p=e=>{A(e,we())};i(a,e=>{d().size>0?e(c):e(p,-1)}),l(r),A(n,r)},$$slots:{navContent:!0,topbarTitle:!0}}),m()}n([`click`]);var De=d(`<meta name="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other visual graph types."/>`);d(`<span class="absolute left-1 top-1 z-10 rounded bg-black/75 px-1.5 py-0.5 font-mono text-xs font-bold text-white"> </span>`);var Oe=d(`<div class="group relative flex flex-col overflow-hidden rounded-lg border"><!> <img class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a><span aria-hidden="true" class="absolute inset-0"></span> </a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85"> </p></div></div>`),ke=d(`<div><!> <main><div class="max-w-7xl mx-auto px-4 py-8"><div class="max-w-5xl mx-auto"><h1>GoJS samples</h1> <div class="prose"><p>Our samples demonstrate several Diagram types and showcase specific features
6            and layouts. You can use the HTML and JavaScript in these samples as the
7            starting point for your application.</p> <p>If you are done looking around and are ready to experiment with GoJS, <a>read the getting started tutorial.</a></p> <p>We are happy to help prospective customers make their proof-of-concept. If you
8            need help getting started, <a href="https://nwoods.com/support.html?samples" target="_blank" rel="noopener">contact us</a>.</p></div></div> <div id="samplesDiv" class="mt-6 grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 xl:grid-cols-4 xl:gap-x-8"></div></div> <link rel="prefetch" as="script"/></main></div>`);function Ae(e,n){O(n,!0);function r(e){return e.startsWith(`/samples/`)?`${te}${e}`:`${P}${e}`}let u=x(g(new Set)),d=p(()=>()=>f(u).size===0||f(u).has(`all`)?Z:Z.filter(e=>e.metadata.tags?Array.from(f(u)).every(t=>e.metadata.tags.includes(t)):!1)),y=p(()=>()=>{let e=f(d)(),t=new Map;t.set(`all`,Z.length);for(let n of e)if(n.metadata.tags)for(let e of n.metadata.tags)t.set(e,(t.get(e)??0)+1);return t});function b(e){if(e===`all`)C(u,new Set([`all`]),!0);else{let t=new Set(f(u));t.delete(`all`),t.has(e)?t.delete(e):t.add(e),C(u,t,!0)}let t=Array.from(f(u)).filter(e=>e!==`all`),n=t.length>0?`#`+t.join(`,`):``;j(window.location.pathname+window.location.search+n,{})}_(()=>{let e=()=>{let e=window.location.hash.slice(1),t=e?e.split(`,`).filter(e=>e):[];C(u,new Set(t),!0)};return e(),window.addEventListener(`hashchange`,e),()=>window.removeEventListener(`hashchange`,e)});var S=ke();a(`erxr18`,e=>{var t=De();T(()=>{w.title=`GoJS Samples | GoJS Diagramming Library`}),A(e,t)});var F=h(S);{let e=p(()=>f(y)());Ee(F,{get selectedTags(){return f(u)},get tagCounts(){return f(e)},onTagToggle:b})}var I=E(F,2),L=h(I),R=h(L),z=E(h(R),2),B=E(h(z),2),V=E(h(B));l(B),ee(2),l(z),l(R);var H=E(R,2);o(H,21,()=>f(d)(),t,(e,t)=>{var n=Oe(),a=h(n);i(a,e=>{});var o=E(a,2),c=E(o,2),u=h(c),d=h(u),p=E(h(d));l(d),l(u);var m=E(u,2),g=h(m,!0);l(m),l(c),l(n),v((e,r,i)=>{k(n,`data-tags`,e),k(o,`src`,r),k(o,`alt`,f(t).metadata.indexDescription),k(d,`href`,i),s(p,` ${f(t).metadata.titleShort??f(t).metadata.title??``}`),s(g,f(t).metadata.indexDescription)},[()=>f(t).metadata.tags?.join(`,`),()=>M(`/assets/images/screenshots/${f(t).metadata.screenshot}.png`),()=>r(f(t).url)]),A(e,n)}),l(H),l(L);var U=E(L,2);l(I),l(S),v((e,t,n)=>{D(I,1,e),k(V,`href`,t),k(U,`href`,n)},[()=>c(N(`pt-14`,re.hasSidebar&&`lg:py-0 lg:pl-72`)),()=>

8ne(`/learn`),()=>M(`/release/go.js`)]),A(e,S),m()}export{Ae as component};