Template Node Style Demo
This demo presents the built-in TemplateNodeStyle that leverages simple
data binding to declaratively render SVG as node style.
With this style, node visualizations are defined by a SVG templating language, similar to
what is known in React, Vue, Angular, and similar frameworks.
TemplateNodeStyle
's template language is a lot simpler and less powerful than
the templating support in the aforementioned frameworks, but it is more lightweight and
does not depend on third party software.
The section
Using SVG Templates in Styles in the
Developer's Guide elaborates on how to create template strings and which properties are
available for data binding.
Things to Try
Change the template of one or more nodes. Bind colors or text to properties in the tag.
Then, apply the new template by pressing the button. Or modify the tag and see how the
style changes.
Related Documentation
Related Demos
Additional Tools
Generally graphs containing this node style are compatible with
yEd Live, but converter
functionality is not serialized and will not be available, so only simple data bindings
will work in third party applications like yEd Live.