API ב-Node.js ליצירה והמרה של תרשימים אינטראקטיביים

התחלה עם Pintora

הדרך המומלצת להתקנת ספריית Pintora היא באמצעות NPM. אנא השתמשו בפקודה הבאה להתקנה חלקה.

 npm install pintora 

יצירת דיאגרמת רצף ב-Node.js

הספרייה הקוד הפתוח Pintora קלה מאוד לשימוש, ומציעה דרך חלקה להפוך תיאורים טקסטואליים לדיאגרמות חיות בתוך אפליקציות Node.js. עם רק כמה שורות קוד, מפתחים יכולים ליצור ולנהל דיאגרמת רצף באמצעות ספריית Pintora. דיאגרמת רצף ממחישה כיצד אובייקטים מתקשרים ברצף מסוים. הדוגמה הבאה מציגה כיצד מוגדרת דיאגרמת רצף כדי להמחיש את האינטראקציה בין שני משתתפים. התחביר מציין את ההודעות המוחלפות ביניהם, ו-Pintora מייצרת את קובץ ה‑SVG המתאים בתוך יישומי Node.js.

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