কোড হিসাবে নেটওয়ার্ক ডায়াগ্রাম / কোড হিসাবে নেটওয়ার্ক ডায়াগ্রাম

গত কয়েক বছরে আমি ডকুমেন্টেশনের সাথে আরও জড়িত হয়েছি। এই বা সেই সিস্টেমটি কীভাবে কাজ করে সে সম্পর্কে একটি ব্যাখ্যামূলক পাঠ্য লেখা সাধারণত বেশ সহজ। একটি ডায়াগ্রাম আঁকা যা সমস্ত মূল বস্তু এবং এই বস্তুর মধ্যে সংযোগ প্রদর্শন করবে।

কিন্তু সবচেয়ে সমস্যাযুক্ত দিক হল এই ডকুমেন্টেশন আপ টু ডেট রাখা। এবং টেক্সট ঠিক হবে, কিন্তু ডায়াগ্রাম... কারণ... সমস্ত ডকুমেন্টেশন অনলাইন, যেমন html ফরম্যাটে, তারপর টেক্সটের সাথে gif/jpeg/png ছবি থাকে, যা আসলে ডায়াগ্রাম দেখায়। এবং চিত্রগুলি বিভিন্ন প্রোগ্রামে আঁকা হয় যেমন ভিসিও বা অনলাইন পরিষেবা a la draw.io। তারপর আপনি ডায়াগ্রামটিকে গ্রাফিক ফরম্যাটে রপ্তানি করুন এবং এটি html এর সাথে সংযুক্ত করুন। ইহা সহজ.

সমস্যা কি?

স্কিম সাধারণত সহজ. আরও স্পষ্টভাবে, খুব জটিল নয়। হ্যাঁ, বস্তুর সংখ্যা এক ডজন বা দুই, সংযোগের সংখ্যা প্রায় একই। প্লাস স্বাক্ষর, কিছু পদবী। সহজ স্কিমগুলিকে শব্দে বর্ণনা করা যেতে পারে, কিন্তু খুব জটিল, আহেম... (গ) "তারা বুঝবে না, স্যার।" অনেকগুলি স্কিম রয়েছে, সেগুলিতে পর্যায়ক্রমে পরিবর্তন করা দরকার, পর্বগতভাবে, যেমন ক্রমাগত, কারণ তারা আমাদের পণ্য উন্নয়ন অনুসরণ.

আপনি পরিষেবাটির html এম্বেড করতে পারেন। আপনি কি এটা চেষ্টা করেছেন?

হ্যাঁ অবশ্যই. উদাহরণস্বরূপ, আমি gliffy.com থেকে গ্রাফিক্স পছন্দ করি। কিন্তু পরিবর্তন করতে, আপনাকে তৃতীয় পক্ষের পরিষেবাতে যেতে হবে এবং সেখানে সম্পাদনা করতে হবে। এবং একজন সহকর্মীকে সংশোধন অর্পণ করা আরও কঠিন।

কি করতে হবে?

সম্প্রতি আমি সুপারিশগুলিতে গিথুবের একটি সংগ্রহস্থল জুড়ে এসেছি 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>

একদিকে, এই ধরনের একটি স্কিম একটি ল্যাপটপে প্রায় কয়েকটি স্ক্রীন কোড, অন্যদিকে, একটি লা 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. আমরা আমাদের প্রয়োজনীয় ডায়াগ্রামে কোডটি সম্পাদনা করি (আমি মনে করি এটি একটি পেঁচা আঁকার চেয়ে সহজ :)

এ আরো বিস্তারিত প্রকল্প পাতা গিথুবে।

শেষ কি?

আমি আমার লক্ষ্য অর্জন করেছি - ডকুমেন্টেশনে ইনলাইন ডায়াগ্রাম যোগ করতে, বিন্যাসটি বেশ সহজ এবং বোধগম্য। এটি সুপার সার্কিটের জন্য উপযুক্ত নয়, তবে ছোট সার্কিটগুলির জন্য যা সংযোগের গঠন ব্যাখ্যা করে, এটি একেবারে সূক্ষ্ম। আপনি সবসময় দ্রুত পরিবর্তন করতে পারেন এবং সময়ের সাথে সাথে কিছু পরিবর্তন করতে পারেন। হ্যাঁ, এবং সহকর্মীরা নিজেরাই ডকে কিছু সংশোধন করতে পারে, অন্তত বস্তুর জন্য ক্যাপশন, বিশেষ প্রশিক্ষণ ছাড়াই))

কি উন্নত করা যেতে পারে?

অবশ্যই, এখানে অনেক বিকল্প আছে। অতিরিক্ত আইকন যোগ করুন (সকল বিদ্যমান স্ক্রিপ্টে ইনলাইনে যোগ করা হয়েছে)। আইকনগুলির একটি আরও অভিব্যক্তিপূর্ণ সেট চয়ন করুন। সংযোগ লাইনের শৈলী নির্দিষ্ট করা সম্ভব করুন। একটি পটভূমি ছবি যোগ করুন.

আপনি কি মনে করেন?
 
ইস্যুতে বাস্তবায়নের জন্য আমার কাছে ইতিমধ্যে বেশ কয়েকটি ধারণা রয়েছে, আপনি মন্তব্যগুলিতেও আপনার যোগ করতে পারেন।

• ভান্ডার
• উদাহরণ
• অনলাইন সম্পাদক

আমার সমাধানটি সমস্যাগুলির একটি সংকীর্ণ পরিসরে অবশ্যই প্রযোজ্য, এবং সম্ভবত আপনি কেবল কোডিং করে ডায়াগ্রাম আঁকার জন্য আরও সুবিধাজনক টুল পাবেন - যেমন তারা বলে 'কোড হিসাবে আপনার ডায়াগ্রামটি দেখান'

1. ভালো নির্বাচন
2. মহৎ সেবা (9 ধরনের চার্ট অনলাইন সম্পাদক)
3. অবশ্যই, mermaid.js
4. এবং আপনি যদি সুপার বিস্তারিত এবং জটিল ডায়াগ্রাম পছন্দ করেন, তাহলে আপনি অবশ্যই এই প্রকল্পের প্রশংসা করবেন: go.drawthe.net

উত্স: www.habr.com