How to Export Diagram Without Placeholder for Nodes in JavaScript?

This article explains how to export a diagram without placeholder text for node and connector annotations in JavaScript Diagram component. In many diagram scenarios, placeholder content such as the word ‘placeholder’ is displayed in annotations when the actual text is not provided. This placeholder text is often styled with reduced opacity to indicate that it is temporary or suggested input.

While this approach is useful during design time, users often prefer to export a clean diagram without these placeholders. To achieve this, we can temporarily remove the placeholder content before exporting and then restore it afterward. This ensures the exported image or PDF is clean and professional, without any placeholder text.

The method involves two helper functions: removePlaceHolder and addPlaceHolder. The removePlaceHolder function iterates through all nodes and connectors in the diagram, checks if any annotation content is set to ‘placeholder’, and clears it by setting the content to an empty string. After this cleanup, the diagram is re-bound using diagram.dataBind() to reflect the changes immediately.

function removePlaceHolder() {
 let nodes = diagram.nodes;
 for (let j = 0; j < nodes.length; j++) {
   let node = nodes[j];

   if (node && node.annotations.length > 0) {
     for (let i = 0; i < node.annotations.length; i++) {
       let annotation = node.annotations[i];
       if (annotation.content == "placeholder") {
         annotation.content = "";
       }
     }
   }
 }
 let connectors = diagram.connectors;
 for (let j = 0; j < connectors.length; j++) {
   let con = connectors[j];

   if (con && con.annotations.length > 0) {
     for (let i = 0; i < con.annotations.length; i++) {
       let annotation = con.annotations[i];
       if (annotation.content == "placeholder") {
         annotation.content = "";
       }
     }
   }
 }
 diagram.dataBind();
} 

After the export is complete, you can restore the placeholder content using the addPlaceHolder function. This function once again loops through all the nodes and connectors. If any annotation is found to be empty or already set as ‘placeholder’, it resets the content to ‘placeholder’ and applies a lower opacity to visually distinguish it from real input.

function addPlaceHolder() {
 let nodes = diagram.nodes;
 for (let x = 0; x < nodes.length; x++) {
   let node = nodes[x];

   if (node && node.annotations.length > 0) {
     for (let i = 0; i < node.annotations.length; i++) {
       let annotation = node.annotations[i];
       if (annotation.content == "" || annotation.content == "placeholder") {
         annotation.content = "placeholder";
         annotation.style.opacity = 0.5;
       }
     }
   }
 }
 let connectors = diagram.connectors;
 for (let k = 0; k < connectors.length; k++) {
   let connector = connectors[k];

   if (connector && connector.annotations.length > 0) {
     for (let i = 0; i < connector.annotations.length; i++) {
       let annotation = connector.annotations[i];
       if (annotation.content == "" || annotation.content == "placeholder") {
         annotation.content = "placeholder";
         annotation.style.opacity = 0.5;
       }
     }
   }
 }
 diagram.dataBind();
} 

To use this feature, simply call the removePlaceHolder function before invoking the export method, and once the export is complete, call addPlaceHolder to restore the diagram to its previous visual state. This method ensures a clean export output while retaining the original placeholder experience in the application UI.

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning on how to export diagram without placeholder for nodes and connectors 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, BoldDesk Support, or feedback portal. We are always happy to assist you!