نيٽ ورڪ ڊاگرام ڪوڊ طور / نيٽ ورڪ ڊاگرام ڪوڊ طور

گذريل ڪجھ سالن ۾ آئون دستاويزن ۾ وڌيڪ ملوث ٿي چڪو آهيان. اهو يا اهو سسٽم ڪيئن ڪم ڪري ٿو بابت هڪ وضاحتي متن لکڻ عام طور تي بلڪل سادو آهي. هڪ ڊرائگرام ڊرائنگ جيڪو سڀني اهم شين کي ڏيکاريندو ۽ انهن شين جي وچ ۾ ڪنيڪشن پڻ تمام آسان آهي.

پر سڀ کان وڏو مسئلو اهو آهي ته هن دستاويز کي تاريخ تائين رکيو وڃي. ۽ متن ٺيڪ هوندو، پر ڊراگرام... ڇو ته... سڀ دستاويز آن لائن آهن، يعني html فارميٽ ۾، پوءِ متن سان گڏ آھي gif/jpeg/png تصويرون، جيڪي اصل ۾ ڊاگرام ڏيکارين ٿيون. ۽ ڊراگرام مختلف پروگرامن جهڙوڪ Visio يا آن لائن خدمتون a la draw.io ۾ ٺهيل آهن. پوء توھان ڊراگرام کي گرافڪ فارميٽ ۾ برآمد ڪريو ۽ ان کي html سان ڳنڍيو. اهو سادو آهي.

مسئلو ڇا آهي؟

منصوبا عام طور تي سادي آهن. وڌيڪ واضح طور تي، تمام پيچيده نه. ها، شين جو تعداد هڪ درجن يا ٻه آهي، ڪنيڪشن جو تعداد تقريبن ساڳيو آهي. گڏوگڏ دستخط، ڪجهه نامزدگي. سادي اسڪيمون لفظن ۾ بيان ڪري سگھجن ٿيون، پر ڏاڍا پيچيده، احم... (c) ”اهي نه سمجھندا، صاحب. ڪيتريون ئي اسڪيمون آهن، انهن کي وقتي طور تي تبديل ڪرڻ جي ضرورت آهي، episodicly، يعني. مسلسل، ڇاڪاڻ ته اهي اسان جي شين جي ترقي جي تابعداري ڪريو.

توھان خدمت جي html کي شامل ڪري سگھو ٿا. ڇا توهان ان جي ڪوشش ڪئي؟

ها، ضرور. مثال طور، مون کي gliffy.com مان گرافڪس پسند آهن. پر تبديليون ڪرڻ لاءِ، توھان کي ھڪڙي ٽئين پارٽي جي خدمت ڏانھن وڃڻ جي ضرورت آھي ۽ اتي تبديلي آڻيو. ۽ اهو وڌيڪ ڏکيو آهي هڪ ساٿي کي سڌارن جي نمائندگي ڪرڻ.

آئون ڇا ڪريان؟

تازو مون سفارشن ۾ Github تي هڪ مخزن ۾ آيو github.com/RaoulMeyer/diagram-as-code. ڊاگرام جيئن ڪوڊ. اهي. اسان وضاحت ڪريون ٿا سرڪٽ اسان کي js ۾ گهربل آهي. اسان هن js کي سڌو سنئون html ۾ لکون ٿا جتي ٻيو دستاويز متن آهي.

رستي ۾، مان دستاويز لکان ٿو مڪمل طور تي html ۾ نه. عام طور تي، دستاويز مارڪ ڊائون متن سان فائلن جو هڪ سيٽ هوندو آهي، جنهن کي پوءِ ڪجهه انجڻ ذريعي مڪمل دستاويزي سائيٽ ۾ تبديل ڪيو ويندو آهي، مثال طور Wintersmith. يا وڪي سسٽم.

اهو تمام آسان ٿي ويو آهي: اسان متن لکيو آهي، پوء اسڪرپٽ ٽيگ کلي ٿو ۽ اسڪيم جو 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>

هڪ طرف، اهڙي اسڪيم هڪ ليپ ٽاپ تي ڪوڊ جي لڳ ڀڳ ٻه اسڪرينون آهن، ٻئي طرف، لا json جي جوڙجڪ توهان کي سڀني ڊيٽا کي قياس سان ڀرڻ جي اجازت ڏئي ٿي، جلدي ۽ توهان ڪاپي پيسٽ ڪري سگهو ٿا.

نوڊس کان الڳ پوزيشن ڇو رکيل آهن؟

اهو وڌيڪ آرامده آهي. پهرين اسان نوڊس بيان ڪريون ٿا. پوء اسان ڪجھ گروپن جي وضاحت ڪري سگھون ٿا ۽ انھن کي نوڊس ۾ اشارو ڪري سگھون ٿا. پوء اسان ڪنيڪشن کي نامزد ڪريون ٿا. ۽ صرف تڏهن، جڏهن مکيه شيون ۽ انهن جي وچ ۾ ڪنيڪشن موجود آهن، اسان انهن شين جي جڳهه کي ڊراگرام تي وٺي سگهون ٿا. يا ان جي برعڪس.

ڇا اهو ممڪن آهي بغير پوزيشن؟

اهو ممڪن آهي بغير پوزيشن. پر اهو ٿورڙو ڀريل هوندو؛ توهان مثالن ۾ هي اختيار ڏسي سگهو ٿا. اهو هن حقيقت جي ڪري آهي ته اتي موجود آهي هڪ الگورٿم لاء نوڊس جي جڳهه لاء cytoscape fcose، جيڪو پڻ گروپن جي موجودگي کي مدنظر رکي ٿو. پوزيشن جي وضاحت ڪرڻ سان ڊراگرام کي وڌيڪ ڪنٽرول لائق بڻائي ٿو، پر ڊراگرام جي پهرين مسودي جي اسٽيج تي اهو ممڪن آهي بغير پوزيشن جي.

پوزيشنون پڻ بيان ڪري سگھجن ٿيون جنگ جي انداز ۾. اهي. ھڪڙو نوڊ a1 ۾ واقع آھي، ۽ ٻيو d5 ۾. اهو خاص طور تي مدد ڪري ٿو ته cytoscape ڪينواس تي شيون متحرڪ بڻائي ٿو، يعني. اسان انھن کي چوڌاري ھلائي سگھون ٿا، مختلف ترتيب جا اختيار ڏسو، ۽ پوءِ ان عناصر جي ترتيب کي درست ڪري سگھون ٿا جيڪي اسان ڪوڊ ۾ پسند ڪندا آھيون.

عام طور تي، اهو سمجھڻ وارو آهي. توهان پڻ ڪوشش ڪري سگهو ٿا؟
 
يقينن، جلدي سرڪٽ ٺاهڻ لاء، مون پاڻ کي ننڍڙو ٺاهيو ايڊٽر، جيڪو پاڻ اسڪيما کي اپڊيٽ ڪري ٿو ۽ جديد ورزن کي برائوزر ۾ محفوظ ڪري ٿو (لوڪل اسٽوريج ۾).

ڇا توهان ان جي ڪوشش ڪئي؟ توھان ھاڻي ان کي پنھنجي صفحي تي شامل ڪري سگھو ٿا.

وري ٻيهر:

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