نیٹ ورک ڈایاگرام بطور کوڈ / نیٹ ورک ڈایاگرام بطور کوڈ

پچھلے دو سالوں میں میں دستاویزات میں زیادہ شامل ہو گیا ہوں۔ کسی خاص نظام کے کام کرنے کے بارے میں وضاحتی متن لکھنا عام طور پر کافی آسان ہوتا ہے۔ ایک خاکہ بنانا جو تمام اہم اشیاء اور ان اشیاء کے درمیان کنکشن کو ظاہر کرے گا بھی کافی آسان ہے۔

لیکن سب سے مشکل پہلو اس دستاویزات کو تازہ ترین رکھنا ہے۔ اور متن ٹھیک ہو گا، لیکن خاکے... کیونکہ... تمام دستاویزات آن لائن ہیں، یعنی html فارمیٹ میں، پھر متن کے ساتھ gif/jpeg/png تصویریں ہوتی ہیں، جو دراصل خاکے دکھاتی ہیں۔ اور خاکے مختلف پروگراموں جیسے Visio یا آن لائن سروسز a la draw.io میں بنائے جاتے ہیں۔ پھر آپ خاکہ کو گرافک فارمیٹ میں ایکسپورٹ کرتے ہیں اور اسے html سے منسلک کرتے ہیں۔ یہ آسان ہے.

مسئلہ کیا ہے؟

اسکیمیں عام طور پر سادہ ہوتی ہیں۔ زیادہ واضح طور پر، بہت پیچیدہ نہیں. جی ہاں، اشیاء کی تعداد ایک درجن یا دو ہے، کنکشن کی تعداد تقریباً ایک جیسی ہے۔ علاوہ دستخط، کچھ عہدہ۔ سادہ سکیموں کو الفاظ میں بیان کیا جا سکتا ہے، لیکن بہت پیچیدہ، ahem... (c) "وہ نہیں سمجھیں گے، جناب۔" بہت سی اسکیمیں ہیں، ان میں وقتاً فوقتاً تبدیلیاں کرنے کی ضرورت ہے، episodicly، یعنی مسلسل، کیونکہ وہ ہماری مصنوعات کی ترقی کی پیروی کرتے ہیں۔

آپ سروس کے ایچ ٹی ایم ایل کو ایمبیڈ کر سکتے ہیں۔ کیا تم نے اسے آزمایا ہے؟

ہاں بالکل. مثال کے طور پر، مجھے gliffy.com سے گرافکس پسند ہیں۔ لیکن تبدیلیاں کرنے کے لیے، آپ کو فریق ثالث کی خدمت پر جانے اور وہاں ترمیم کرنے کی ضرورت ہے۔ اور تصحیح کو کسی ساتھی کو سونپنا زیادہ مشکل ہے۔

کیا؟

حال ہی میں میں نے سفارشات میں گیتوب پر ایک ذخیرہ دیکھا github.com/RaoulMeyer/diagram-as-code. کوڈ کے طور پر خاکہ۔ وہ. ہم جے ایس میں سرکٹ کی وضاحت کرتے ہیں۔ ہم اس js کو براہ راست اسی HTML میں لکھتے ہیں جہاں دیگر دستاویزات کا متن ہے۔

ویسے، میں دستاویزات مکمل طور پر HTML میں نہیں لکھتا۔ عام طور پر، ڈاکومنٹیشن مارک ڈاؤن ٹیکسٹ والی فائلوں کا ایک سیٹ ہے، جسے پھر کچھ انجن، مثال کے طور پر ونٹرسمتھ کے ذریعے ایک مکمل دستاویزی سائٹ میں تبدیل کر دیا جاتا ہے۔ یا ویکی سسٹم۔

یہ بہت آسان نکلا: ہم نے متن لکھا ہے، پھر اسکرپٹ ٹیگ کھلتا ہے اور اسکیم کا جے ایس کوڈ اس میں بیان کیا جاتا ہے۔

پھر کیا خرابی ہے؟

مجھے یہ ذخیرہ پسند آیا، لیکن یہ واحد مثال نہیں ہے جہاں کوڈ یا متن کی نمائندگی کا استعمال کرتے ہوئے خاکہ تیار کیا جاتا ہے۔ (مضمون کے آخر میں پراجیکٹس اور مضامین کے لنکس ہوں گے جنہیں میں نے کوڈ کے طور پر موضوع کے خاکے پر گوگل کیا تھا۔)

اور دستاویزات میں ترمیم کرنے والا میں اکیلا نہیں ہوں۔ بعض اوقات ساتھی بھی تعاون کرتے ہیں - ایک لفظ درست کریں، تفصیل تبدیل کریں، نئی تصویریں ڈالیں۔ 

لہذا، میں خاکہ کو پڑھنے کے قابل، قابل فہم ٹیکسٹ فارمیٹ میں دیکھنا چاہوں گا جس کے لیے طویل سیکھنے کے منحنی خطوط کی ضرورت نہیں ہوگی۔ اور کچھ جگہوں پر آپ نیا سرکٹ شامل کرنے کی رفتار تیز کرنے کے لیے آسانی سے کاپی پیسٹ بھی کر سکتے ہیں۔ 

اور ایک اور ساتھی نے نوٹ کیا کہ کوڈ یقیناً اچھا ہے، لیکن اگر آپ ڈھانچہ استعمال کرتے ہیں تو ہر چیز بہت سخت اور اظہار خیال کر سکتی ہے۔

لہذا، میں نے خاکہ کو کئی چھوٹی صفوں کے ایک سیٹ کے طور پر تصور کرنے کی کوشش کی جو نوڈس، کنکشن، نوڈس کے گروپس کے ساتھ ساتھ نوڈس کے مقام کو بھی بیان کرتی ہے۔ یہ نکلا، میری عاجزانہ رائے میں، کافی آسان، اگرچہ، یقیناً، ذائقہ اور رنگ...

یہ ایک صف میں چارٹ کیسے ہے؟

• ہر نوڈ کو ایک شناخت کنندہ کے ذریعہ بیان کیا جاتا ہے جو نوڈ کی منفرد شناخت کرتا ہے۔
• آپ نوڈ میں ایک آئیکن بھی شامل کر سکتے ہیں اور ایک نوشتہ بھی شامل کر سکتے ہیں۔
• آپ دو نوڈس کے درمیان تعلق کی وضاحت کر سکتے ہیں۔
• آریھ پر مواصلت کے لیے، آپ رنگ اور نوشتہ ترتیب دے سکتے ہیں۔
• مواصلات کی سمت کی وضاحت ذریعہ سے ہدف تک کی گئی ہے۔ اور ذریعہ اور ہدف نوڈ شناخت کنندگان کے ذریعہ اشارہ کیا جاتا ہے۔
• ایک گروپ میں ایک یا زیادہ نوڈس شامل کیے جا سکتے ہیں۔
• تعلق کو گروپ اور گروپ دونوں سے بھی بیان کیا جا سکتا ہے۔

ان آسان اصولوں کا استعمال کرتے ہوئے، ہمیں درج ذیل خاکہ ملتا ہے۔ بس؟ کافی

اور اسے درج ذیل جے ایس کوڈ سے بیان کیا گیا ہے۔ یہاں اہم چیز عناصر کا اعتراض ہے۔ جس میں نوڈس کی نشاندہی کی جاتی ہے - نوڈس، کنارے - کنکشن۔
 

  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 میں واقع ہے۔ یہ خاص طور پر مدد کرتا ہے کہ 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. ہم کوڈ کو اس خاکہ میں ترمیم کرتے ہیں جس کی ہمیں ضرورت ہے (میرے خیال میں یہ اللو بنانے سے زیادہ آسان ہے :)

مزید تفصیلات پر منصوبے کا صفحہ گیتھب پر

نتیجہ؟

میں نے اپنے اہداف حاصل کر لیے - دستاویزات میں ان لائن ڈایاگرام شامل کرنے کے لیے، فارمیٹ کافی آسان اور قابل فہم ہے۔ یہ سپر سرکٹس کے لیے موزوں نہیں ہے، لیکن چھوٹے سرکٹس کے لیے جو کنکشن کی ساخت کی وضاحت کرتے ہیں، یہ بالکل ٹھیک ہے۔ آپ ہمیشہ تیزی سے موافقت کر سکتے ہیں اور وقت کے ساتھ کچھ تبدیل کر سکتے ہیں۔ جی ہاں، اور ساتھی خود گودی میں کچھ درست کر سکتے ہیں، کم از کم اشیاء کے لیے کیپشن، بغیر خصوصی تربیت کے))

کیا بہتر کیا جا سکتا ہے؟

یقیناً یہاں بہت سارے اختیارات ہیں۔ اضافی شبیہیں شامل کریں (تمام موجودہ اسکرپٹ میں ان لائن شامل کیے گئے ہیں)۔ شبیہیں کا ایک زیادہ اظہار خیال سیٹ منتخب کریں۔ کنکشن لائن کے انداز کی وضاحت کرنا ممکن بنائیں۔ پس منظر کی تصویر شامل کریں۔

آپ کیا سوچتے ہیں؟
 
مسائل پر عمل درآمد کے لیے میرے پاس پہلے ہی کئی آئیڈیاز ہیں، آپ تبصرے میں اپنا بھی شامل کر سکتے ہیں۔

• ذخیرہ
• مثالیں
• آن لائن ایڈیٹر

میرا حل یقینی طور پر مسائل کی ایک تنگ رینج میں لاگو ہوتا ہے، اور شاید آپ کو ڈایاگرام کو صرف کوڈنگ کرکے ڈرائنگ کرنے کے لیے زیادہ آسان ٹول مل جائے گا - جیسا کہ وہ کہتے ہیں 'مجھے اپنا ڈایاگرام بطور کوڈ دکھائیں'

1. عمدہ انتخاب
2. عظیم خدمت (9 قسم کے چارٹ آن لائن ایڈیٹر)
3. بلاشبہ، mermaid.js
4. اور اگر آپ انتہائی تفصیلی اور پیچیدہ خاکے پسند کرتے ہیں، تو آپ یقینی طور پر اس منصوبے کی تعریف کریں گے: go.drawthe.net

ماخذ: www.habr.com