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.

What is Pintora Library?

Pintora simplifies diagram drawing. This flexible JavaScript tool allows you to effortlessly turn text into diagrams, whether you’re working in a browser or Node.js. Inspired by Mermaid.js and PlantUML, Pintora provides a reliable and easy-to-use method for making diagrams. It seamlessly fits into different development setups, making it a versatile option for various projects. Hikerpig developed the Pintora library to help craft a variety of diagrams such as flowcharts, sequence diagrams, and class diagrams. If you are a developer or a technical writer looking to add diagrams to your documents, presentations, or technical specs, this tool is for you. What makes this library special is its ability to help you create custom visualizations with a wide range of customization options.

Using the Pintora Library, you can effortlessly adjust colors, fonts, animations, and other elements to design visualizations that are not just visually appealing but also match your brand and convey your message effectively. It is changing the way software developers make amazing data visualizations. It’s open source and regularly updated to enhance it continuously and offer community help. Its simple syntax is easy to grasp and use, making it suitable for people with different technical skills. You can personalize how your diagrams look by changing colors, shapes, and other visual features to suit your needs. 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);