This Diagram uses custom icon fonts in TextBlocks to display symbols. Alternatively this could be done using SVG Shapes, which can be seen in the Icons sample.
There are a few example fonts in this page -- to switch between them use the dropdown above the Diagram. To see all of the icons available in the Google Material font, visit fonts.google.com/icons. For Font Awesome, visit fontawesome.com/search. For Phosphor Icons, visit phosphoricons.com.
When clicking on these Nodes some sample code will be generated showing how these fonts can be used in your own Diagram.
This is a simple example Diagram.nodeTemplate with the necessary Bindings for font, text, and color. We also set Textblock.spacingBelow so that there is an equal margin above and below the text.
Here we set the Diagram.model inside a function init(), this way it can
be called later once the font has been loaded. You may want to create your
Diagram and Diagram.nodeTemplate inside this init()
function too.
This creates the font, then after it has loaded, adds it to the document fonts before
calling init().
<script>
<\script>
Using FontFace comes with limitations in font formats. Another option is to make sure all
fonts are loaded before
init() is called. Normally fonts aren't loaded until they are used which causes
them to not be in the Diagram on the first render.
GoJS has one function for creating SVG: Diagram.makeSVG, which returns a new SVGElement with a representation of a GoJS Diagram. The method has a single argument, a JavaScript Object that contains several definable properties, enumerated in the documentation. More information can be found in the GoJS Intro.
This predefined layout is used for placing Nodes in a grid-like arrangement. Nodes can be ordered, spaced apart, and wrapped as needed. This Layout ignores any Links connecting the nodes being laid out. More information can be found in the GoJS Intro.
GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS Intro.