How to add Bullets/Numbering to annotations in diagram component

In Syncfusion® Diagram, we don’t have a built-in feature to add bullets/numberings to node/connectors annotations. However, we can achieve this functionality by incorporating the Rich Text Editor into the diagram. By using the HTML template node, we can integrate the Rich Text Editor within the diagram. To implement this, we make use of the node template property of the diagram to render the Rich Text Editor.

index.html

<div id="diagram"></div>

index.js

var diagram = new ej.diagrams.Diagram({
 width: 1500,
 height: 1000,
 nodes: nodes,
 nodeTemplate: '#nodetemplate',
});
diagram.appendTo('#diagram');

var RichTextEditor = new ej.richtexteditor.RichTextEditor({
   height: '600px',
   });
 // Render initialized Rich Text Editor.
 RichTextEditor.appendTo('#defaultRTE')

After rendering the diagram with the integrated Rich Text Editor, if you wish to enable bullet points for typing and encounter an issue where pressing the Enter key does not move the cursor to the next line, you can resolve this by leveraging the commandManager property of the diagram. This property allows you to modify the behavior and ensure that pressing Enter appropriately moves the cursor to the next line.
The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

• execute - A method to be executed.
• canExecute - A method to define whether the command can be executed at the moment.
• gesture - A combination of keys and KeyModifiers
• parameter - Defines any additional parameters that are required at runtime.
• name - Defines the name of the command.

We have enabled the Enter key without restrictions by specifying the Enter key in gesture property and returning the canExecute function as false.

index.js

var diagram = new ej.diagrams.Diagram({
 width: 1500,
 height: 1000,
 commandManager:{ 
   commands: [{
       name: 'customCopy',
       parameter: 'node',
       //Method to define whether the command can be executed at the current moment
       canExecute: function() {
          
           return false;
       },
       //Command handler
       execute: function() {
          
       },
       //Defines that the command has to be executed on the recognition of key press.
       gesture: {
           key: ej.diagrams.Keys.Enter,
       }
   }]
 }
});
diagram.appendTo('#diagram');

Sample

Conclusion

I hope you enjoyed about how to add Bullets/Numbering to annotations in Javascript Diagram.
You can refer to our JavaScript 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 JavaScript 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!