🖼️ 🧕🏽 🕗 कोड के रूप में नेटवर्क आरेख ⛓️ 🔖 🥘

पिछले कुछ वर्षों में, मैंने प्रलेखन के साथ अधिक व्यवहार करना शुरू किया। यह या यह प्रणाली कैसे काम करती है, इसके बारे में एक व्याख्यात्मक पाठ लिखें - सामान्य तौर पर, यह काफी सरल है। एक आरेख बनाएं, जिस पर सभी प्रमुख ऑब्जेक्ट प्रदर्शित किए जाएंगे, इन वस्तुओं के बीच संबंध भी काफी आसान है।

लेकिन सबसे समस्याग्रस्त क्षण इस दस्तावेज को अद्यतित रखना है। और ठीक है, पाठ, लेकिन आरेख ... क्योंकि सभी प्रलेखन ऑनलाइन है, अर्थात HTML प्रारूप में, फिर gif / jpeg / png चित्र पाठ से जुड़े होते हैं, जिस पर चित्र वास्तव में चित्रित किए जाते हैं। और योजनाओं को विभिन्न कार्यक्रमों जैसे कि Visio या ऑनलाइन सेवाओं में एक ला ड्रा। फिर आप आरेख को एक ग्राफिक प्रारूप में निर्यात करते हैं और इसे html में संलग्न करते हैं। सब कुछ सरल है।

समस्या क्या है?

योजनाएं आमतौर पर सरल होती हैं। अधिक सटीक, बहुत जटिल नहीं है। हां, वस्तुओं की संख्या दस या दो है, कनेक्शन की संख्या लगभग समान है। प्लस हस्ताक्षर, कुछ पदनाम। सरल योजनाओं को शब्दों में वर्णित किया जा सकता है, लेकिन बहुत जटिल, हम्म ... (ओं) "वे समझ नहीं पाते हैं, सर।" बहुत सारी योजनाएं हैं, उनमें परिवर्तन समय-समय पर किए जाने की आवश्यकता है, अर्थात्। लगातार, क्योंकि वे हमारे उत्पादों के विकास का पालन करते हैं।

आप html सेवा एम्बेड कर सकते हैं। या तुमने कोशिश की?

हां बिल्कुल। उदाहरण के लिए, मुझे gliffy.com ग्राफिक्स पसंद है। लेकिन बदलाव के लिए आपको वहाँ एक तृतीय-पक्ष सेवा में जाने की आवश्यकता है, जिसे संपादित करना है। और एक सहयोगी को संशोधनों को सौंपना अधिक कठिन है।

क्या करें?

हाल ही में, एक गितुब पर, मैं github.com/RaoulMeyer/diagram-as-code- रिपॉजिटरी की सिफारिशों में आया था। एक कोड के रूप में चार्ट। उन। हम js सर्किट पर हम की जरूरत का वर्णन है। हम इस js को सीधे उसी html में लिखते हैं जहाँ अन्य प्रलेखन पाठ है।

वैसे, लेकिन मैं HTML में प्रलेखन बिल्कुल नहीं लिख रहा हूँ। आमतौर पर, प्रलेखन मार्कडाउन पाठ के साथ फाइलों का एक सेट होता है, जिसे बाद में कुछ इंजन द्वारा पूर्ण-विकसित प्रलेखन साइट में बदल दिया जाता है, उदाहरण के लिए विंटस्मिथ। या विकी सिस्टम।

यह बहुत सुविधाजनक है: यहां हमने टेक्स्ट लिखा है, फिर स्क्रिप्ट टैग खोला गया है और सर्किट के जेएस कोड का वर्णन किया गया है।

फिर गलत क्या है?

मुझे यह भंडार अच्छा लगा, लेकिन यह एकमात्र उदाहरण नहीं है जब कोड या पाठ दृश्य का उपयोग करके आरेख खींचा जाता है। (लेख के अंत में उन परियोजनाओं और लेखों के लिंक होंगे जो कोड के रूप में विषय आरेख पर गुगली करते हैं।)

और मैं केवल वही नहीं हूं जो दस्तावेज को सही करता है। कभी-कभी सहकर्मी भी योगदान देते हैं - शब्द को सही करें, विवरण बदलें, नई तस्वीरें डालें।

इसलिए, मैं आरेख को एक पठनीय समझने योग्य पाठ प्रारूप में देखना चाहता हूं, जिसका लंबे समय तक अध्ययन नहीं करना होगा। और नई स्कीम को जोड़ने के लिए कॉपी-पेस्ट करना आसान है।

और एक अन्य सहयोगी ने उल्लेख किया कि कोड बेशक, अच्छा है, लेकिन अगर आप संरचना का उपयोग करते हैं, तो सब कुछ बहुत सख्त और अभिव्यंजक हो सकता है।

इसलिए, मैंने योजना को कई छोटे सरणियों के एक सेट के रूप में प्रस्तुत करने की कोशिश की, जो नोड्स, कनेक्शन, नोड्स के समूहों, साथ ही नोड्स के स्थान का वर्णन करते हैं। यह निकला, मेरी विनम्र राय में, काफी आसानी से, हालांकि, निश्चित रूप से, स्वाद और रंग ...

सरणी में चार्ट कैसा है?

प्रत्येक नोड को एक पहचानकर्ता द्वारा वर्णित किया जाता है जो विशिष्ट रूप से नोड की पहचान करता है।
आप नोड में एक आइकन भी जोड़ सकते हैं, एक शिलालेख जोड़ सकते हैं।
आप दो नोड्स के बीच संबंध निर्दिष्ट कर सकते हैं।
योजना पर संचार के लिए, आप रंग, शिलालेख सेट कर सकते हैं।
संचार की दिशा को स्रोत से लक्ष्य के रूप में परिभाषित किया गया है। और स्रोत और लक्ष्य नोड पहचानकर्ताओं द्वारा इंगित किए जाते हैं।
समूह में एक या अधिक नोड जोड़े जा सकते हैं।
एक लिंक को समूह से समूह में भी निर्दिष्ट किया जा सकता है।

इन सरल नियमों का उपयोग करके, हमें ऐसी योजना मिलती है। सीधे शब्दों में? काफी।

और यह निम्नलिखित js कोड द्वारा वर्णित है। यहां मुख्य चीज तत्व वस्तु है। जिसमें नोड्स - नोड्स, किनारों - कनेक्शन का संकेत दिया गया है।

  const elements = {
    nodes: [       //  
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [       //  
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);

बेशक, मैंने खुद सर्किट बनाने के बारे में नहीं सोचा था, लेकिन मैंने साइटोस्केप.जेएस लाइब्रेरी , एक बहुत शक्तिशाली विज़ुअल उपकरण का उपयोग किया। टॉलिकु अवसर जो मेरे निर्णय में मैं केवल उपयोग करता हूं।

स्पष्ट रूप से, यह एक सरल उदाहरण है। क्या यह अधिक जटिल हो सकता है?

हाँ कृपया। पदों को इंगित करने के लिए - हम पदों का उपयोग करते हैं, समूहों को इंगित करने के लिए - हम समूहों में समूहों की एक सूची निर्दिष्ट करते हैं, और तत्वों में स्वयं एक समूह विशेषता होती है।

और यह कोड है:

<div id="scheme5" style="height:500px;width:800px;"></div>
<script>
  const elements5 = {
    groups: [
      { id: 'g1', label: '  1'},
      { id: 'g2', label: '  2'},
    ],
    nodes: [
      { id: 'man1', type: 'person', label: ''},
      { id: 'client', type: 'smartphone', label: ''},
      { id: 'agent-backend', type: 'server', group: 'g1', label: 'agent-backend'},
      { id: 'web', type: 'server', group: 'g1', label: ' admin'},
      { id: 'www', type: 'server', group: 'g1', label: ' '},
      { id: 'mongodb1', type: 'database', group: 'g1', label: 'Mongo DB 1'},
      { id: 'mongodb2', type: 'database', group: 'g1', label: 'Mongo DB 2'},
      { id: 'runner-integration1', type: 'worker', group: 'g1', label: ''},
      { id: 'runner-integration2', type: 'worker', group: 'g1', label: ''},
      { id: 'api', type: 'server', group: 'g1', label: 'API'},
      { id: 'server2', type: 'server', group:'g2', label: ''},
      { id: 'otherServer', type: 'server', group:'g2', label: ''},
      { id: 'firebase', type: 'cloud', label: 'Google Firebase'},
    ],
    edges: [
      { source: 'client', target: 'agent-backend', label: 'json', color: 'red' },
      { source: 'agent-backend', target: 'mongodb1', color: 'red' },
      { source: 'agent-backend', target: 'mongodb2',  color: 'red' },
      { source: 'mongodb1', target: 'runner-integration1', label: '' },
      { source: 'mongodb2', target: 'runner-integration2', label: '' },
      { source: 'mongodb1', target: 'web', label: '  ' },
      { source: 'runner-integration1', target: 'server2', label: '' },
      { source: 'runner-integration2', target: 'otherServer', label: '' },
      { source: 'api', target: 'firebase', label: '', color: 'blue', },
      { source: 'firebase', target: 'client', label: 'push', color: 'blue'},
      { source: 'server2', target: 'api', label: '', color: 'blue'},
      { source: 'man1', target: 'client', },
    ],
    positions: [
      { id: 'client', row: 2, col: 1,},
      { id: 'agent-backend', row: 2, col: 3,},
      { id: 'web', row: 6, col: 3,},
      { id: 'www', row: 1, col: 3,},
      { id: 'mongodb1', row: 1, col: 4,},
      { id: 'mongodb2', row: 2, col: 5,},
      { id: 'runner-integration1', row: 3, col: 3,},
      { id: 'runner-integration2', row: 4, col: 3,},
      { id: 'api', row: 5, col: 3,},
      { id: 'server2', row: 6, col: 7,},
      { id: 'otherServer', row: 4, col: 7,},
      { id: 'firebase', row: 5, col: 1,},
      { id: 'logger', row: 2, col: 7,},
      { id: 'crm', row: 5, col: 8,},
    ],
};
  Diagram('scheme5', elements5, {layout: 'grid'});
</script>

ऐसी योजना, एक तरफ, लैपटॉप पर कोड की लगभग एक-दो स्क्रीन है, दूसरी ओर, एक ला जोंस संरचना आपको सादृश्य द्वारा सभी डेटा को जल्दी से भरने की अनुमति देती है, और आप कॉपी-पेस्ट कर सकते हैं।

और पदों को नोड्स से अलग से क्यों निकाला जाता है?

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

क्या यह पदों के बिना संभव है?

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

साथ ही, नौसैनिक युद्ध की शैली में स्थितियां निर्दिष्ट की जा सकती हैं। उन। एक नोड a1 में और दूसरा d5 में स्थित है। यह विशेष रूप से मदद करता है कि साइटोस्केप कैनवस पर ऑब्जेक्ट्स को मूवेबल बनाता है, अर्थात। हम उन्हें स्थानांतरित कर सकते हैं, विभिन्न लेआउट विकल्पों को देख सकते हैं, और फिर अपने तत्वों की पसंदीदा व्यवस्था को कोड में ठीक कर सकते हैं।

सामान्य तौर पर, मैं देखता हूं। आप भी आजमा सकते हैं?

बेशक, जल्दी से योजनाएं बनाने के लिए, मैंने खुद को एक छोटा संपादक बनाया , जो योजना को स्वयं अपडेट करता है और ब्राउज़र में अंतिम विकल्प संग्रहीत करता है (स्थानीयस्टोरेज में)।

या तुमने कोशिश की? अब आप अपने पेज पर जोड़ सकते हैं।

तो फिर से:

1। हम एक स्क्रिप्ट कनेक्ट करते हैं

<script src="https://unpkg.com/@antirek/network-diagram@0.1.4/dist/code-full.min.js"></script>

2. html कोड में जोड़ें

<div id="scheme1" style="height:300px;width:800px;"></div>
<script>      
  const elements = {    
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);
</script>

3. कोड को उस स्कीम में एडिट करें जिसकी हमें ज़रूरत है (मुझे लगता है कि उल्लू का चित्र बनाना आसान है :) गितुब पर प्रोजेक्ट पेज पर

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

बेशक, बहुत सारे विकल्प हैं। अतिरिक्त आइकनों को जोड़ दें (सभी उपलब्ध स्क्रिप्ट में इनलाइन जोड़ दिए जाते हैं)। आइकन का अधिक स्पष्ट सेट चुनें। लिंक लाइन शैली निर्दिष्ट करना संभव बनाएं। पृष्ठभूमि छवि जोड़ें।

तुम क्या सोचते हो?

मुद्दों में कार्यान्वयन के लिए मेरे पास पहले से ही कुछ विचार हैं, आप टिप्पणियों में अपना भी जोड़ें।

मेरा समाधान निश्चित रूप से कार्यों की एक संकीर्ण श्रेणी में लागू होता है, और शायद आप उन्हें आरेखित करके चित्र बनाने के लिए एक अधिक सुविधाजनक उपकरण पाएंगे - जैसा कि वे कहते हैं 'मुझे कोड के रूप में अपना चित्र दिखाएं'

अच्छा चयन
पॉश सेवा (चार्ट के 9 प्रकार ऑनलाइन संपादक)
बेशक मरमेड.जेएस
और अगर आपको सुपर विस्तृत और जटिल योजनाएं पसंद हैं, तो यह परियोजना निश्चित रूप से आपको प्रसन्न करेगी: go.drawthe.net

कोड के रूप में नेटवर्क आरेख

More articles: