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