Aspose.Diagram for Java is a feature-rich Java API for manipulating Visio diagrams programmatically without requiring Microsoft Visio. The API supports working with popular Visio formats including VSD, VSDX, VDX, VSDM, VSSM, and VSSX. Recently, we have leveraged the capabilities of Aspose.Diagram for Java and made it possible to implement MS Visio automation features in Node.js applications. These features let you create, manipulate, convert & process MS Visio diagrams within your Node.js application.
Aspose.Diagram for Node.js via Java provides a complete set of features to automate the creation or manipulation of Visio diagrams. You can create, read, export, print, and protect the diagrams quite easily in a few lines of code. In this article, I’ll cover how to create Visio diagrams from scratch within a Node.js application. The rest of the article is divided into the following sections.
- Installation of Node.js Visio API
- Create MS Visio Diagram from Scratch in Node.js
- Add Master to Visio Diagram
- Insert Pages in a Visio Diagram
- Create a Shape in a Visio Diagram
- Add a Text Shape in the Visio Page
- Add Hyperlink to a Visio Shape
Node.js Visio API – Installation
Use the following command to install Aspose.Diagram package in your Node.js application.
npm install aspose.diagram --saveCreate MS Visio Diagram in Node.js
I’ll start by creating an empty Visio diagram (VSDX) from scratch. The following are the steps to perform this operation.
- Create an object of Diagram class.
- Save the diagram as a file using Diagram.save() method.
The following code sample shows how to create a Visio diagram (VSDX) in a Node.js application.
Add Master to Visio Diagram in Node.js
The Visio Stencils contain the collection of master shapes that are used to add/copy shapes in the Visio diagrams. You add a master to the Visio diagram using the VSS stencil file. The following are the steps to add a master using Aspose.Diagram.
- Create a new Visio diagram using the Diagram class.
- Add master to the diagram using the stencil file’s path and master’s name/ID.
- Add shape to the diagram using the master’s name.
- Save diagram using Diagram.save() method.
The following code sample shows how to add a master to a Visio diagram in Node.js.
Insert Pages in a Visio Diagram in Node.js
Before creating the shapes, you need to have at least one page in the Visio diagram. Each page in the Visio diagram has a name and id which is used to uniquely identify that page. The following are the steps to add a page in the Visio diagram.
- Create an instance of the Diagram class.
- Calculate the maximum page ID.
- Create a new page using Page class.
- Set page’s name and ID using Page.setName() and Page.setID() method respectively.
- Add page to diagram using Diagram.getPages().add() method.
- Save the Visio diagram using Diagram.save() method.
The following code sample shows how to insert pages into a Visio diagram in Node.js.
Create a Shape in a Visio Diagram in Node.js
Once you have created the page in the diagram, you can add a shape to it. The following are the steps to create and insert a shape in the diagram.
- Create an object of Diagram class.
- Add master to the diagram using the stencil file’s path.
- Add a rectangle shape using Diagram.addShape() method.
- Set shape’s properties such as ID, text, position, fill color, etc.
- Save the diagram using the Diagram.save() method.
The following code sample shows how to add a shape to the Visio diagram in Node.js.
Add a Text Shape to a Visio Diagram in Node.js
Aspose.Diagram also lets you add text to the Visio diagrams. In this case, the text is added as a shape. The following are the steps to add text to a Visio diagram.
- Create a new Visio diagram using the Diagram class.
- Add text shape to diagram using Diagram.getPages().getPage(0).addText() method.
- Save the diagram using Diagram.save() method.
The following code sample shows how to add text shape to the Visio diagram in Node.js.
Add Hyperlink to a Visio Shape in Node.js
Hyperlinks in Visio diagrams can be used to navigate from one page to another or to link a file or a web page to the drawing. The following are the steps to add a hyperlink to a Visio diagram.
- Create a new Visio diagram.
- Select the desired page from the diagram.
- Select the desired Shape from the selected page.
- Create a new hyperlink using the Hyperlink class and set its properties.
- Add the hyperlink to the shape using Shape.getHyperlinks().add() method.
- Save the diagram.
The following code sample shows how to add a hyperlink to a Visio diagram in Node.js.
Conclusion
In this article, you have learned how to create Visio diagrams/drawings from scratch in Node.js applications. The step by step tutorial and code samples showed how to add master, pages, shapes, text, and hyperlinks in the Visio diagram with a few lines of code. You can explore more about the Visio API for Node.js using the documentation.
