How to add HTML Nodes in Symbol Palette of Vue Diagram?

In the Vue Diagram & symbol palette, you can add an HTML node. Html elements can be embedded in the diagram using the Html type node. The shape property of the node allows you to set the type of node and to create an HTML node, it should be set as HTML. The following code explains how an Html node is created. Please refer to the following code example for how to define an HTML node.

var htmlShapes=[   {
       // Size of the node.
       id: "html",
       width: 100,
       height: 100,
       shape: {
           type: 'HTML',
           content: '<div style="background: #6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px"> Button</button></div>'
       },
   }]

The SymbolPalette displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram. A palette allows to display a group of related symbols and it textually annotates the group with its header. By using the palette’s symbols property, you can define the HTML symbols. So that the defined HTML node is displayed in the symbol palette. Please refer to the following code sample for how to define the HTML node in the palette symbols.

  <ejs-symbolpalette id="symbolpalette" :expandMode='expandMode' :palettes='palettes' 
    :width='palettewidth' :height='paletteheight'  :getSymbolInfo='getSymbolInfo'>
   </ejs-symbolpalette>
   palettes: [{
         id: "bpmn",
         expanded: true,
         symbols: htmlShapes,
         iconCss: "shapes",
         title: "Bpmn Shapes"
    }],

Kindly refer to the working sample for your reference

Sample

Conclusion

I hope you enjoyed learning about how to add HTML nodes in Symbol Palette of Vue Diagram.

You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!