인터랙티브 다이어그램을 생성 및 변환하는 Node.js API

Pintora 시작하기

Pintora 라이브러리를 설치하는 권장 방법은 NPM을 사용하는 것입니다. 원활한 설치를 위해 다음 명령을 사용하십시오.

 npm install pintora 

Node.js에서 시퀀스 다이어그램 만들기

오픈 소스 Pintora 라이브러리는 매우 사용하기 쉬우며, 텍스트 설명을 Node.js 애플리케이션 내에서 생생한 다이어그램으로 변환하는 원활한 방법을 제공합니다. 몇 줄의 코드만으로 소프트웨어 개발자는 Pintora 라이브러리를 사용해 시퀀스 다이어그램을 생성하고 관리할 수 있습니다. 시퀀스 다이어그램은 객체들이 특정 순서대로 어떻게 상호 작용하는지를 보여줍니다. 다음 예시는 두 참여자 간의 상호 작용을 나타내는 시퀀스 다이어그램이 정의된 모습을 보여줍니다. 구문은 그들 사이에 교환되는 메시지를 지정하며, Pintora는 Node.js 애플리케이션 내에서 해당 SVG를 생성합니다.

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);
 

Node.js 앱 내에서 다이어그램 맞춤 설정

Pintora 라이브러리는 다양한 유형의 다이어그램에 대한 광범위한 커스터마이징을 완벽히 지원합니다. 이 라이브러리를 통해 소프트웨어 개발자는 자신의 Node.js 애플리케이션 내에서 레이어, 마스터, 페이지, 도형, 연결선 등 다양한 다이어그램 요소를 손쉽게 조작할 수 있습니다. 색상, 형태 및 기타 시각 요소를 필요에 맞게 수정할 수 있습니다. 다음은 개발자가 Node.js 라이브러리를 사용해 플로우차트를 커스터마이징하는 예시입니다.

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);

 

Node.js 내에서 클래스 다이어그램 만들기 및 편집

오픈 소스 Pintora 라이브러리는 Node.js 애플리케이션 내에서 클래스 다이어그램을 생성하고 관리하기 위한 완전한 기능을 제공합니다. 클래스 다이어그램은 시스템의 구조를 클래스, 속성 및 관계를 보여줌으로써 설명하는 데 사용됩니다. 다음 예제는 클래스 다이어그램을 만드는 방법을 보여줍니다. 이 다이어그램은 Animal과 Dog 두 클래스를 정의하고, 각각의 속성과 메서드를 포함합니다. Dog 클래스는 <|-- 표기법으로 표시된 것처럼 Animal 클래스를 상속합니다.

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);