Nodes

Nodes are rendered either by a template, when using vanilla Toolkit, or they are mapped to a component, if you are using a library integration. Nodes are mapped to a template or component inside a view alongside groups, edges and ports:

toolkit.render({
  ...
  view:{
    nodes:{
        "default":{
            template:`<div class="aNode">{{id}}</div>`,
            events:{
                click:function(p) {
                    alert("You clicked on node " + p.node.id);
                }
            }
        },
        "type1":{
            template:`<div class="aNode"><h1>TYPE 1</h1><p>{{id}}</p></div>`
        }
    }
  }
});

Here, nodes of type type1 have their own mapping to a template, which is in the format discussed on the templating page. Any other node type is mapped to the "default" mapping, which declares a template and also a click listener. The full list of options for a node mapping inside a view can be found in the views documentation.

Further Reading

• The views documentation provides a full list of configuration you can use with a node mapping
• Shape libraries provide a way to inject SVG into your nodes depending on their type. We use shape libraries for many of our diagramming apps such as the Flowchart Builder starter app.
• The Angular documentation contains information about how to map nodes with Angular
• The React documentation contains information about how to map nodes with React
• The Vue 2 documentation contains information about how to map nodes with Vue 2
• The Vue 3 documentation contains information about how to map nodes with Vue 3
• The Svelte documentation contains information about how to map nodes with Svelte