कोड म्हणून नेटवर्क आकृती / कोड म्हणून नेटवर्क आकृती

गेल्या काही वर्षांत मी डॉक्युमेंटेशनमध्ये अधिक गुंतलो आहे. एखादी विशिष्ट प्रणाली कशी कार्य करते याबद्दल स्पष्टीकरणात्मक मजकूर लिहिणे सामान्यतः अगदी सोपे आहे. एक आकृती काढणे ज्यामध्ये सर्व प्रमुख वस्तू आणि या वस्तूंमधील कनेक्शन प्रदर्शित होईल.

परंतु सर्वात समस्याप्रधान बाब म्हणजे हे दस्तऐवज अद्ययावत ठेवणे. आणि मजकूर चांगला असेल, पण आकृत्या... कारण... सर्व कागदपत्रे ऑनलाइन आहेत, उदा. html फॉरमॅटमध्ये, नंतर मजकुरासोबत gif/jpeg/png चित्रे असतात, जी प्रत्यक्षात आकृती दर्शवतात. आणि Visio किंवा ऑनलाइन सेवा a la draw.io सारख्या विविध कार्यक्रमांमध्ये रेखाचित्रे काढली जातात. मग तुम्ही आकृती ग्राफिक स्वरूपात निर्यात करा आणि html ला संलग्न करा. हे सोपं आहे.

काय अडचण आहे?

योजना सहसा सोप्या असतात. अधिक तंतोतंत, फार क्लिष्ट नाही. होय, वस्तूंची संख्या एक डझन किंवा दोन आहे, कनेक्शनची संख्या अंदाजे समान आहे. अधिक स्वाक्षरी, काही पदनाम. सोप्या योजनांचे वर्णन शब्दात करता येते, परंतु खूप गुंतागुंतीचे, अहेम... (c) "ते समजणार नाहीत, सर." अनेक योजना आहेत, त्यामध्ये वेळोवेळी बदल करणे आवश्यक आहे, एपिसोडिकली, म्हणजे. सतत, कारण ते आमच्या उत्पादनांच्या विकासाचे अनुसरण करतात.

तुम्ही सेवेचे html एम्बेड करू शकता. तुम्ही प्रयत्न केला आहे का?

होय खात्री. उदाहरणार्थ, मला gliffy.com वरील ग्राफिक्स आवडतात. परंतु बदल करण्यासाठी, तुम्हाला तृतीय-पक्ष सेवेवर जाणे आणि तेथे संपादन करणे आवश्यक आहे. आणि सहकाऱ्याला दुरुस्त्या सोपवणे अधिक कठीण आहे.

मी काय करावे?

अलीकडे मी शिफारसींमध्ये Github वर एक भांडार पाहिला github.com/RaoulMeyer/diagram-as-code. कोड म्हणून आकृती. त्या. आम्ही js मध्ये आवश्यक असलेल्या सर्किटचे वर्णन करतो. आम्ही हे js थेट त्याच html मध्ये लिहितो जिथे इतर दस्तऐवजीकरण मजकूर आहे.

तसे, मी कागदपत्रे पूर्णपणे html मध्ये लिहित नाही. सामान्यतः, दस्तऐवजीकरण हा मार्कडाउन मजकूर असलेल्या फाइल्सचा एक संच असतो, ज्याला नंतर काही इंजिनद्वारे पूर्ण-प्रगत दस्तऐवजीकरण साइटमध्ये रूपांतरित केले जाते, उदाहरणार्थ विंटरस्मिथ. किंवा विकी प्रणाली.

हे खूप सोयीचे झाले: आम्ही मजकूर लिहिला आहे, नंतर स्क्रिप्ट टॅग उघडेल आणि योजनेचा JS कोड त्यात वर्णन केला आहे.

पुन्हा काय चुकलं?

मला हे रेपॉजिटरी आवडले, परंतु कोड किंवा मजकूर प्रतिनिधित्व वापरून रेखाचित्र काढलेले हे एकमेव उदाहरण नाही. (लेखाच्या शेवटी मी कोडच्या रूपात विषयाच्या आकृतीवर गुगल केलेल्या प्रकल्प आणि लेखांचे दुवे असतील.)

आणि दस्तऐवज संपादित करणारा मी एकटाच नाही. कधीकधी सहकारी देखील योगदान देतात - एखादा शब्द दुरुस्त करा, वर्णन बदला, नवीन चित्रे घाला. 

म्हणून, मला आकृती एका वाचनीय, समजण्यायोग्य मजकूर स्वरूपात पहायची आहे ज्यासाठी दीर्घ शिक्षण वक्र आवश्यक नाही. आणि काही ठिकाणी तुम्ही नवीन सर्किट जोडण्याचा वेग वाढवण्यासाठी कॉपी-पेस्ट देखील करू शकता. 

आणि दुसर्‍या सहकाऱ्याने नमूद केले की कोड अर्थातच चांगला आहे, परंतु आपण रचना वापरल्यास, सर्वकाही खूप कठोर आणि अर्थपूर्ण असू शकते.

म्हणून, नोड्स, कनेक्शन्स, नोड्सचे गट, तसेच नोड्सचे स्थान वर्णन करणार्‍या अनेक लहान अॅरेचा संच म्हणून मी आकृतीची कल्पना करण्याचा प्रयत्न केला. हे माझ्या नम्र मते, अगदी सोयीचे झाले, जरी, अर्थातच, चव आणि रंग ...

अ‍ॅरेमधील हा चार्ट कसा आहे?

• प्रत्येक नोडचे वर्णन ओळखकर्त्याद्वारे केले जाते जे नोडला अद्वितीयपणे ओळखते.
• तुम्ही नोडमध्ये एक चिन्ह देखील जोडू शकता आणि शिलालेख जोडू शकता.
• आपण दोन नोड्समधील संबंध निर्दिष्ट करू शकता.
• आकृतीवरील संप्रेषणासाठी, आपण रंग आणि शिलालेख सेट करू शकता.
• संप्रेषणाची दिशा स्त्रोतापासून लक्ष्यापर्यंत परिभाषित केली जाते. आणि स्त्रोत आणि लक्ष्य नोड अभिज्ञापकांद्वारे सूचित केले जातात.
• गटामध्ये एक किंवा अधिक नोड जोडले जाऊ शकतात.
• संबंध गट आणि गटात देखील निर्दिष्ट केले जाऊ शकतात.

या सोप्या नियमांचा वापर करून, आम्हाला खालील चित्र मिळते. फक्त? अगदी.

आणि खालील 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);

अर्थात, मी स्वतः सर्किटचे रेखाचित्र तयार केले नाही, परंतु लायब्ररी वापरली cytoscape.js एक अतिशय शक्तिशाली व्हिज्युअलायझेशन साधन आहे. मी माझ्या सोल्यूशनमध्ये फक्त शक्यतांचा एक अंश वापरतो. 

ठीक आहे, हे एक साधे उदाहरण आहे. ते अधिक क्लिष्ट असू शकते?

होय करा. पोझिशन्स दर्शविण्यासाठी, आम्ही पोझिशन्स वापरतो, गट सूचित करण्यासाठी, आम्ही गटांमध्ये गटांची सूची सूचित करतो आणि घटकांना स्वतःच गट गुणधर्म असतात.

आणि हा कोड आहे:

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

एकीकडे, अशी योजना म्हणजे लॅपटॉपवरील कोडच्या जवळजवळ दोन स्क्रीन्स आहेत, तर दुसरीकडे, la json ची रचना आपल्याला सर्व डेटा सादृश्यतेने, द्रुतपणे भरण्याची परवानगी देते आणि आपण कॉपी-पेस्ट करू शकता.

पोझिशन्स नोड्सपासून वेगळ्या का ठेवल्या जातात?

ते अधिक आरामदायक आहे. प्रथम आम्ही नोड्स निर्दिष्ट करतो. मग आपण काही गट निर्दिष्ट करू शकतो आणि त्यांना नोड्समध्ये सूचित करू शकतो. मग आम्ही कनेक्शन नियुक्त करतो. आणि केवळ तेव्हाच, जेव्हा मुख्य वस्तू आणि त्यांच्यातील कनेक्शन असतात, तेव्हा आम्ही आकृतीवर या वस्तूंचे स्थान घेतो. किंवा या उलट.

पदांशिवाय हे शक्य आहे का?

हे पदांशिवाय शक्य आहे. परंतु ते थोडेसे कुरकुरीत होईल; तुम्ही उदाहरणांमध्ये हा पर्याय पाहू शकता. हे साइटोस्केपसाठी नोड्सच्या स्थानासाठी अल्गोरिदम आहे या वस्तुस्थितीमुळे आहे fcose, जे गटांची उपस्थिती देखील विचारात घेते. पोझिशन्स निर्दिष्ट केल्याने आकृती अधिक नियंत्रणीय बनते, परंतु आकृतीच्या पहिल्या मसुद्याच्या टप्प्यावर ते स्थानांशिवाय शक्य आहे.

बॅटलशिप शैलीमध्ये पोझिशन्स देखील निर्दिष्ट केल्या जाऊ शकतात. त्या. एक नोड a1 मध्ये आहे आणि दुसरा d5 मध्ये आहे. हे विशेषतः सायटोस्केप कॅनव्हासवरील वस्तू हलवण्यायोग्य बनविण्यास मदत करते, उदा. आम्ही त्यांना हलवू शकतो, विविध लेआउट पर्याय पाहू शकतो आणि नंतर कोडमध्ये आम्हाला आवडलेल्या घटकांची व्यवस्था निश्चित करू शकतो.

सर्वसाधारणपणे, ते समजण्यासारखे आहे. आपण देखील प्रयत्न करू शकता?
 
अर्थात, त्वरीत सर्किट्स तयार करण्यासाठी, मी स्वत: ला एक लहान केले संपादक, जे स्वतः स्कीमा अद्यतनित करते आणि नवीनतम आवृत्ती ब्राउझरमध्ये संग्रहित करते (लोकल स्टोरेजमध्ये).

तुम्ही प्रयत्न केला आहे का? तुम्ही आता ते तुमच्या पेजवर जोडू शकता.

मग पुन्हा:

1. स्क्रिप्ट कनेक्ट करत आहे

<script src="https://unpkg.com/@antirek/[email protected]/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. आम्हाला आवश्यक असलेल्या आकृतीमध्ये आम्ही कोड संपादित करतो (मला वाटते की हे घुबड काढण्यापेक्षा सोपे आहे :)

येथे अधिक तपशील प्रकल्प पृष्ठ github वर.

शेवटी काय?

मी माझे ध्येय साध्य केले - दस्तऐवजीकरणामध्ये इनलाइन आकृत्या जोडण्यासाठी, स्वरूप अगदी सोपे आणि समजण्यासारखे आहे. हे सुपर सर्किट्ससाठी योग्य नाही, परंतु लहान सर्किट्ससाठी जे कनेक्शनची रचना स्पष्ट करतात, ते पूर्णपणे ठीक आहे. आपण नेहमी द्रुतपणे बदल करू शकता आणि कालांतराने काहीतरी बदलू शकता. होय, आणि सहकारी स्वत: डॉकमध्ये काहीतरी दुरुस्त करू शकतात, कमीतकमी वस्तूंसाठी मथळे, विशेष प्रशिक्षणाशिवाय))

काय सुधारले जाऊ शकते?

अर्थात, येथे बरेच पर्याय आहेत. अतिरिक्त चिन्ह जोडा (सर्व विद्यमान चिन्हे स्क्रिप्टमध्ये इनलाइन जोडली आहेत). चिन्हांचा अधिक अर्थपूर्ण संच निवडा. कनेक्शन लाइनची शैली निर्दिष्ट करणे शक्य करा. पार्श्वभूमी प्रतिमा जोडा.

तुला काय वाटत?
 
माझ्याकडे आधीपासूनच समस्यांच्या अंमलबजावणीसाठी अनेक कल्पना आहेत, आपण टिप्पण्यांमध्ये आपले देखील जोडू शकता.

• भांडार
• उदाहरणे
• ऑनलाइन संपादक

माझे समाधान निश्चितपणे समस्यांच्या संकुचित श्रेणीत लागू आहे, आणि कदाचित तुम्हाला फक्त कोडिंग करून आकृत्या काढण्यासाठी अधिक सोयीस्कर साधन सापडेल - जसे ते म्हणतात 'तुमचा आकृती कोड म्हणून दाखवा'

1. छान निवड
2. उत्तम सेवा (9 प्रकारचे चार्ट ऑनलाइन संपादक)
3. अर्थात, mermaid.js
4. आणि जर तुम्हाला अतिशय तपशीलवार आणि जटिल आकृत्या आवडत असतील तर तुम्ही या प्रकल्पाचे नक्कीच कौतुक कराल: go.drawthe.net

स्त्रोत: www.habr.com