1. Products
  2.   Diagram
  3.   Node.js
  4.   Pintora
 
  

Node.js API to Create & Convert Interactive Diagrams

Open Source Node.js Library to Convert Text to Diagram as well as Manage Various Types of Diagrams inside Node.js Environment.

Pintora is a handy tool that makes drawing diagrams easier. It’s a flexible JavaScript library that lets you convert text into diagrams smoothly, whether you’re using a browser or Node.js. Taking cues from Mermaid.js and PlantUML, Pintora offers a solid and user-friendly way to create diagrams. It can be easily integrated into various development environments, making it a versatile choice for many projects.

Hikerpig created the Pintora library to assist in creating different kinds of diagrams such as flowcharts, sequence diagrams, and class diagrams. This tool is useful for developers and technical writers who wish to include diagrams in their documents, slideshows, or technical specifications. What sets this library apart is that it empowers you to craft personalized visualizations with a diverse set of customization choices. With Pintora Library, users can easily tweak colors, fonts, animations, and more to create visualizations that are not only visually stunning but also perfectly aligned with their brand and message.

Pintora is revolutionizing how software developers create stunning data visualizations. It’s open source and gets frequent updates to improve it constantly and provide community support. Its straightforward syntax is easy to understand and use, making it accessible for individuals with varying technical abilities. You have the freedom to customize the appearance of your diagrams by adjusting colors, shapes, and other visual elements. The Pintora Library is a popular choice for many people wanting to enhance their data visualization, because of the wide range of features, an easy-to-use API, and a modern design.

Previous Next

Getting Started with Pintora

The recommend way to install Pintora Library is using NPM. Please use the following command for a smooth installation.

Install Pintora via NPM

 npm install pintora

Create Sequence Diagram in Node.js

The open source Pintora library is very easy to handle, offering a seamless way to transform textual descriptions into vivid diagrams inside Node.js Apps. With just a couple of code software developers can create and manage sequence diagram using Pintora library. A sequence diagram illustrates how objects interact in a particular sequence. The following example shows a sequence diagram is defined to illustrate the interaction between two participants. The syntax specifies the messages exchanged between them, and Pintora generates the corresponding SVG inside Node.js applications.

How to Create a Sequence Diagram inside Node.js Apps?

const { renderToSvg } = require('pintora');

const sequenceDiagramDefinition = `
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good, thanks!
`;

// Render the sequence diagram to SVG
const svg = renderToSvg(sequenceDiagramDefinition);

// Output the SVG
console.log(svg);

Customize Diagrams inside Node.js Apps

The Pintora library fully support the extensive customization of various types of diagrams. The library makes it easy for software developers to operate various diagram elements such as layers, masters, pages, shapes, and connectors inside their own Node.js applications. They can modify colors, shapes, and other visual elements to suit their needs. Here is an example that shows how developers can customize a flowchart using Node.js library.

How to Customize a Flowchart inside Node.js Applications?

const { renderToSvg } = require('pintora');

const customizedFlowchartDefinition = `
flowchart TD
    style A fill:#f9f,stroke:#333,stroke-width:4px;
    style B fill:#bbf,stroke:#333,stroke-width:4px;
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great]
    B -->|No| D[Fix it]
    D --> A
`;

// Render the customized flowchart to SVG
const svg = renderToSvg(customizedFlowchartDefinition);

// Output the SVG
console.log(svg);

Create & Edit Class Diagram inside Node.js

The open source Pintora library has provided complete functionality for creating and managing class diagrams inside Node.js applications. Class diagrams are used to describe the structure of a system by showing its classes, attributes, and relationships. The following example demonstrates how to create a class diagram. The diagram defines two classes, Animal and Dog, along with their attributes and methods. The Dog class inherits from the Animal class, as indicated by the <|-- notation.

How to Create a Class Diagram inside Node.js Apps?

const { renderToSvg } = require('pintora');

const classDiagramDefinition = `
classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
    }
    class Dog {
        +String breed
        +void bark()
    }
    Animal <|-- Dog
`;

// Render the class diagram to SVG
const svg = renderToSvg(classDiagramDefinition);

// Output the SVG
console.log(svg);