VPasCode में D2 डायग्राम समर्थन की घोषणा: अंतिम मुफ्त D2 संपादक और ऑनलाइन D2 टूल

हम बहुत उत्साहित हैं कि हम एक महत्वपूर्ण अपडेट की घोषणा कर रहे हैं VPasCode: पूर्ण समर्थन के साथ D2 डायग्राम-एज-कोड भाषा! इस अपडेट के साथ, वास्तुकार, विकासकर्ता और तकनीकी लेखक घोषित D2 टेक्स्ट स्क्रिप्ट को तुरंत साफ, पेशेवर दृश्य डायग्राम में बदल सकते हैं बिना किसी बाधा के।

चाहे आप जटिल क्लाउड आर्किटेक्चर, माइक्रोसर्विस टॉपोलॉजी या संगठनात्मक वर्कफ्लो को मैप कर रहे हों, VPasCode आपके लिए जाने वाला मुफ्त D2 संपादक और विशेषताओं से भरपूर ऑनलाइन D2 टूल। ब्राउज़र के अंदर ही बिना किसी बाधा के तुरंत दृश्य प्रदर्शन का अनुभव करें।

हमारे प्लेटफॉर्म क्षमताओं और अपडेट्स के बारे में अधिक जानने के लिए, आधिकारिक VPasCode पेज.

VPasCode में D2 इंटीग्रेशन कैसे काम करता है

VPasCode में D2 का उपयोग करना तेज, स्पष्ट और आपकी उत्पादकता को अधिकतम करने के लिए डिज़ाइन किया गया है। कार्यस्थल में एक सुविधाजनक पार्श्व-साथ-पार्श्व व्यवस्था है:

• बाएं पैनल (कोड संपादक): बस अपना D2 स्क्रिप्ट पेस्ट करें, टाइप करें या संपादित करें। VPasCode का स्वचालित फॉर्मेट डिटेक्शन बिना हाथ से भाषा बदले तुरंत आपके कोड को पहचान लेता है।
• दाएं पैनल (लाइव विज़ुअलाइज़र): जब आप टाइप करते हैं या कोड ब्लॉक को संपादित करते हैं, तो अपने डायग्राम के डायनामिक रूप से रियल-टाइम में रेंडर होते हुए देखें।

नीचे दिए गए वीडियो में आपको दिखाया गया है कि Visual Paradigm VPasCode डायग्राम-एज-कोड संपादक में D2 डायग्राम कैसे बनाया जाता है।

खुद आजमाने के लिए तैयार हैं? हमारे साथ सीधे कार्य में उतरें VPasCode संपादक.

D2 समर्थन के साथ शामिल मुख्य विशेषताएं

लाइव रेंडरिंग के अलावा, हमारा नया D2 इंटीग्रेशन विभिन्न सहयोग और आउटपुट विकल्पों के साथ आता है जो आपके वर्कफ्लो के अनुरूप हैं:

1. लचीले निर्यात विकल्प: अपने पूर्ण हुए डायग्राम को तुरंत स्केलेबल SVG वेक्टर ग्राफिक्स या उच्च रिज़ॉल्यूशन PNG छवियों के रूप में डाउनलोड करें रिपोर्ट्स, प्रेजेंटेशन और दस्तावेज़ीकरण के लिए।

   

2. क्लिपबोर्ड एकीकरण: एक क्लिक से अपने रेंडर किए गए डायग्राम छवि को तुरंत अपने क्लिपबोर्ड पर कॉपी करें ताकि इसे स्लैक, ईमेल या शब्द प्रोसेसर में सीधे पेस्ट किया जा सके।
3. तत्काल URL साझाकरण: सीधे हाइपरलिंक के माध्यम से सहकर्मियों या ग्राहकों के साथ अपना काम आसानी से साझा करें। सबसे अच्छी बात यह है कि देखने वालों के लिए आपके साझा किए गए डायग्राम की जांच करने के लिए कोई लॉगिन आवश्यक नहीं है।

प्रदर्शन: D2 में एक मूल नेटवर्क डायग्राम बनाना

इसका उपयोग करके प्रणालियों को मॉडल करने की आसानी को देखने के लिए इस मुफ्त D2 संपादक, निम्नलिखित मूल बहु-स्तरीय नेटवर्क व्यवस्था के उदाहरण पर विचार करें।

D2 स्रोत कोड

दिशा: दाएं
customer -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
customer.shape: व्यक्ति
load_balancer.shape: आयत
app1.shape: षट्भुज
app2.shape: षट्भुज
redis.shape: बेलन
postgres.shape: बेलन
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"

हमारे ऑनलाइन D2 टूल में इसका कैसे रेंडर होता है

जब आप ऊपर दिए गए स्क्रिप्ट को VPasCode में पेस्ट करते हैं, तो इंजन संबंधों, दिशानिर्देश और कस्टम आकृति स्टाइलिंग को स्वचालित रूप से प्रक्रिया करता है:

• The ग्राहक एक अलग व्यक्ति आइकन के रूप में स्टाइल किया गया है जो एक आयताकार लोड बैलेंसर.
• ट्रैफिक दो षट्भुजाकार एप्लीकेशन नोड्स (app1 और app2).
• दोनों एप्लीकेशन नोड्स सुरक्षित रूप से बैकएंड कैशिंग लेयर (redis, नरम लाल रंग में स्टाइल किया गया) और संबंधात्मक डेटा स्टोर (postgres, नरम हरे रंग में स्टाइल किया गया)।

अधिक D2 डायग्राम उदाहरण

मूल आकृतियाँ

सर्वर -> क्लाइंट: HTTP
सर्वर -> डीबी: प्रश्न
क्लाइंट: {
  आकृति: व्यक्ति
  शैली.भराव: "#cfe2ff"
}
डीबी: {
  आकृति: सिलेंडर
  शैली.भराव: "#d1e7dd"
}
सर्वर.शैली.भराव: "#fff3cd"

कंटेनर

नेटवर्क: {
  वेब: {
    आकृति: षट्भुज
    शैली.भराव: "#e7f1ff"
  }
  एपीआई: {
    आकृति: आयत
    शैली.भराव: "#fff3cd"
  }
  डीबी.प्राथमिक: {
    आकृति: सिलेंडर
    शैली.भराव: "#d1e7dd"
  }
  डीबी.कैश: {
    आकृति: सिलेंडर
    शैली.भराव: "#f8d7da"
  }
  वेब -> एपीआई: REST
  एपीआई -> डीबी.प्राथमिक: SQL
  एपीआई -> डीबी.कैश: खोज
}

शैलीकृत

वेरिएबल्स: {
  d2-कॉन्फ़िग: {
    खाका: सत्य
    लेआउट-इंजन: elk
  }
}
एवीएस: {
  वीपीसी: {
    वेब: {
      आकृति: आयत
      शैली: {
        भराव: "#fef3c7"
        रंग: "#d97706"
        रंग-चौड़ाई: 2
        फॉन्ट: मोनो
      }
    }
    एपीआई: {
      आकृति: आयत
      शैली.भराव: "#dbeafe"
    }
    डीबी: {
      आकृति: सिलेंडर
      शैली.भराव: "#dcfce7"
    }
  }
}
उपयोगकर्ता -> एवीएस.वीपीसी.वेब: HTTPS {
  शैली.एनिमेटेड: सत्य
}
एवीएस.वीपीसी.वेब -> एवीएस.वीपीसी.एपीआई: HTTP
एवीएस.वीपीसी.एपीआई -> एवीएस.वीपीसी.डीबी: SQL {
  शैली.रंग-डैश: 5
}

क्रम

आकृति: क्रम-आरेख
उपयोगकर्ता -> एपीआई: GET /उपयोगकर्ता
एपीआई -> डीबी: SELECT *
डीबी -> एपीआई: पंक्तियाँ
एपीआई -> उपयोगकर्ता: 200 सफल
उपयोगकर्ता -> एपीआई: POST /उपयोगकर्ता
एपीआई -> डीबी: INSERT
डीबी -> एपीआई: पंक्ति
एपीआई -> उपयोगकर्ता: 201 बनाया गया

नोट्स: आप PlantUML के साथ क्रम आरेख बनाना चाह सकते हैं। इसके बारे में जानने के लिए यहां देखें:

PlantUML क्रम आरेखों का पूर्ण मार्गदर्शिका: वाक्य रचना, उदाहरण और सर्वोत्तम प्रथाएं

VPasCode क्या है?

यदि आप हमारे प्लेटफॉर्म पर नए हैं, विजुअल पैराडाइम VPasCode आधुनिक तकनीकी टीमों के लिए बनाया गया एक एकीकृत, ब्राउज़र-आधारित डायग्राम-कोड समाधान है। यह आपको पूरी तरह से कोड के माध्यम से आर्किटेक्चर और डेटा मॉडल को परिभाषित करने की अनुमति देकर हाथ से खींचने वाले ड्रॉइंग टूल्स की जटिलता को दूर करता है।

D2 के अलावा, VPasCode लोकप्रिय डायग्रामिंग फॉर्मेट और संरचित भाषाओं के विशाल संग्रह का समर्थन करता है, जिसमें PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, और मुख्य प्रोग्रामिंग भाषाएँ जैसे जावा, पायथन, रस्ट, और टाइपस्क्रिप्ट. कोर कोड संपादन, लाइव पूर्वानुमान और छवि निर्यात पूरी तरह मुफ्त हैं।

आज ही रचना शुरू करें

आज ही अपने तकनीकी दस्तावेज़ीकरण और संरचनात्मक मॉडलिंग को बढ़ाएं। अब ही एप्लिकेशन लॉन्च करके हमारी नई D2 क्षमताओं की गति और सुविधा का अनुभव करें, जहां से आप अब ही लॉन्च कर सकते हैं VPasCode संपादक.