Font Icons from Various Fonts for Drawing Icons using TextBlocks
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.
GoJS Features in this sample
Exporting SVGs
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 learn pages.
Grid Layouts
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 learn pages.
Animation
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 learn pages.