স্পয়লার: DOT ভাষায় লেখা DAG রেন্ডার করতে Vizdom.dev ব্যবহার করুন

একজন সফ্টওয়্যার ডেভলপ হিসাবে, আমি মাঝে মাঝে DAG-এর সাথে কাজ করেছি - যার বেশিরভাগই তাদের ভিজ্যুয়ালাইজ করা জড়িত। অনেক ক্ষেত্রে, আমি একটি দ্রুত রেন্ডারিং পাওয়া কঠিন বলে মনে করেছি এবং নিজেকে টুলিং খুঁজছি।

সৌভাগ্যবশত, বিশ্বস্ত আছে গ্রাফভিজ টুল যা DOT ভাষায় লেখা গ্রাফ রেন্ডার করতে পারে — পারফেক্ট!

ছাড়া…

• এটি ওয়েবে ভাল কাজ করে না*
• আমি এটা ইনস্টল করতে হবে
• এটি অনলাইনে DOT/GV ফাইল পরিচালনা করে না

বিবেচনা

*ঠিক আছে, টেকনিক্যালি গ্রাফভিজকে WebAssembly-এ কম্পাইল করা যেতে পারে, এবং কিছু প্রতিভাবান লোক স্বপ্নপুফের মতো কিছু ঝরঝরে প্রকল্প তৈরি করতে পেরেছে সম্পাদক , নাইকি এর edotor.net , এবং magjac এর সম্পাদক — প্রতিটি তার নিজস্ব মোচড় সঙ্গে. আমি এখনও এই রেন্ডারিংগুলিকে কোনও SVG (বা অন্যান্য মাধ্যমে) রপ্তানি না করে এম্বেড করতে সংগ্রাম করি।

উদাহরণস্বরূপ, আমি আমার গ্রাফ সংরক্ষণ করতে চাই ধারণা. তাই শুধুমাত্র একটি লিঙ্ক পেস্ট করে যা স্বয়ংক্রিয়ভাবে গ্রাফ রেন্ডার করে।

ব্যবহার করতে পারতাম মারমেইডজেএস যা গ্রাফগুলিকে বেশ পরিচ্ছন্নভাবে রেন্ডার করে এবং আশ্চর্যজনকভাবে ভাল কাজ করে — এটি এমন অনেক কারণের মধ্যে একটি 64k+ GitHub-এ শুরু হয় . আমি মার্কডাউন, মিষ্টি ব্যবহার করে নোট/গিটহাবে গ্রাফগুলি এম্বেড করতে পারি!

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

তারপর আছে Terrastruct.com যা হস্তনির্মিত ডায়াগ্রাম পরিচালনার জন্য আশ্চর্যজনক, কিন্তু আমার মারমেইড দুর্ভোগের মতো, আমি DOT কে D2 তে নির্ভরযোগ্যভাবে রূপান্তর করতে পারি না। আমি মনে করি আপনি যদি হাতে ডায়াগ্রাম তৈরি করতে যাচ্ছেন তবে এটি একটি গ্রহণযোগ্য, এককালীন খরচ। সাধারণভাবে, এটি একটি দুর্দান্ত সরঞ্জাম। প্রশংসা!

সমস্যাটি

• আমি প্রোগ্রাম্যাটিকভাবে জেনারেট করা DOT আউটপুট রেন্ডার করতে চাই — কোনো টুলিং আমাকে সেই লক্ষ্য অর্জনে সাহায্য করে বলে মনে হয় না।

• আমি গ্রাফ রেন্ডার যে লিঙ্ক এম্বেড করতে চান.

• আমি আপডেটের জন্য অনলাইনে রেন্ডারিং সঞ্চয় করতে চাই বা অন্যান্য গ্রাফের সাথে দৃশ্যত তুলনা করতে চাই।

সমাধান

হ্যাঁ - আমি একটি তৈরি করেছি অ্যাপ এর জন্য 🎉

…এবং এটি সম্পূর্ণরূপে মরিচা 🦀-এ নির্মিত হয়েছে অনেক ধন্যবাদ লেপ্টোস

tl;dr — অনলাইনে, দ্রুত DAG রেন্ডার করার জন্য একটি সহজ, উদ্দেশ্য-নির্মিত অ্যাপ

গ্রাফ জেনারেশনে এজ ক্রসিং মিনিমাইজ করা, একটি স্বীকৃত NP-হার্ড চ্যালেঞ্জ দৃশ্যত আকর্ষণীয় গ্রাফ তৈরি করার চাবিকাঠি। Terrastruct এ দল একটি অসামান্য প্রকাশ করেছে ব্লগ পোস্ট এই বিষয়ে delving. DagreJS লেআউট অ্যালগরিদম(গুলি) এবং অন্তর্দৃষ্টিপূর্ণ কাগজ " A Technique for Drawing Directed Graphs ¹" দ্বারা উল্লেখযোগ্যভাবে অনুপ্রাণিত হয়ে, আমি Rust-এ একটি বৈকল্পিক বিকাশ করেছি৷

এই সংস্করণটি বিশেষভাবে কার্যকরী শ্রেণীবদ্ধ গ্রাফ রেন্ডার করার জন্য, এই সমস্যার জটিল জটিলতাগুলিকে কাজে লাগানোর জন্য।

বড় ডিএজি (500+ নোড/এজ) রেন্ডার করা Graphviz-এর সাথে কিছুটা মন্থর হতে থাকে। Dagre + D3 ( d3-গ্রাফভিজ এবং ডেরিভেটিভস) বেশ কিছুটা দ্রুত শেষ হয় এবং দুর্দান্ত অ্যানিমেশন/স্টাইলিং কাস্টমাইজেশন অফার করে। তবুও, আমি অনুভব করেছি যে তারা DOT ভাষা যে বৈশিষ্ট্যগুলি সরবরাহ করে তা মিস করে — যেমন, স্টাইলিং বৈশিষ্ট্যগুলি প্রায়শই কেবল তখনই সম্মানিত হয় যদি আপনি গ্রাফভিজের সাথে রেন্ডিং করছেন।

ভিজডম Dagre-এর অনুরূপ ফলাফল তৈরি করবে কিন্তু DOT স্পেসিফিকেশন এবং Graphviz-এর শৈলীর আচরণের দিকে আরও সারিবদ্ধ। যাইহোক, এটির গ্রাফভিজের সাথে বৈশিষ্ট্যের সমতা নেই এবং যে বিবৃতি/গুণগুলি সমর্থিত নয় সেগুলিকে উপেক্ষা করা হয়।

আমি বিশ্বাস করি এটি প্রোগ্রাম্যাটিকভাবে জেনারেট করা DOT ব্যবহার করবে এমন বৈশিষ্ট্যগুলির জন্য একটি ভাল আপস৷

Vizdom বৈশিষ্ট্য

• 🚀 জ্বলন্ত দ্রুত রেন্ডারিং
• 💾 গ্রাফগুলি লিঙ্কগুলিতে সংরক্ষণ করুন
• 0️⃣ শূন্য নির্ভরতা এবং ইনস্টলেশনের প্রয়োজন নেই

রেন্ডারিং গতি

ঠিক আছে, এটি একটি আপেল থেকে কমলালেবুর তুলনা। গ্রাফভিজ এখনও দুর্দান্ত ভিজ্যুয়ালাইজেশন তৈরি করে এবং আরও সমর্থন করে লেআউট ইঞ্জিন তাই আমি বিষয়ভিত্তিক তুলনা করছি ভিজডম Graphviz-এর DOT ইঞ্জিনের বিপরীতে, এটিকে শুধুমাত্র DAGs-এ স্কোপ করা হয়েছে, এবং এমনকি আরও এটিকে DOT ভাষার সংকীর্ণ বৈশিষ্ট্যের তালিকায় স্কোপ করা হয়েছে।

হ্যাঁ, আমি জানি গ্রাফভিজ 30+ বছরের স্ট্রিকের চারপাশে বছরের অভিজ্ঞতা এবং টুলিংয়ের তুলনা করা ভয়ানক, কিন্তু আমার সংকীর্ণ ব্যবহারের ক্ষেত্রে, এটি দ্রুত পাগল। রেন্ডারিংয়ের জন্য আমার M1 ম্যাকবুক প্রো-তে দেওয়ালের কিছু সময় এখানে রয়েছে একটি মোটামুটি বড় গ্রাফ ~400 নোড সহ:

• নেটিভ গ্রাফভিজ: ~30 সেকেন্ড
• ক্রোম (WASM) গ্রাফভিজ: ক্র্যাশ*
• Chrome (জাভাস্ক্রিপ্ট) DagreJS: ~10 সেকেন্ড
• ক্রোম (WASM) ভিজডম : ~1 সেকেন্ড**

* এটি ক্র্যাশ হয় কারণ এমস্ক্রিপ্টেন পতাকা, ALLOW_MEMORY_GROWTH=1 , সেট করা নেই, তাই মোট মেমরি 16MB এ সীমিত। এটি ঠিক করা যেতে পারে, কিন্তু আমি এমন একটি অনলাইন প্রকল্প খুঁজে পাইনি যা প্রশ্নে গ্রাফটি পরিচালনা করতে পারে।

** এডিটর ভিউতে Example 14 নির্বাচন করে উদাহরণ গ্রাফটি রেন্ডার করা হয়েছে । পৃষ্ঠাটি রিফ্রেশ করার ফলে আপনি পৃষ্ঠাটি রিফ্রেশ করবেন এবং একটি 414 পাবেন কারণ গ্রাফে থাকা URIটি খুব বড়। আমি বড় গ্রাফ সঞ্চয় করার জন্য একটি ভাল সমাধানে কাজ করছি।

লিঙ্কে গ্রাফ সংরক্ষণ করুন

আপনি যখন DOT ফাইলে কোনো পরিবর্তন করবেন তখন আপনি লক্ষ্য করবেন, ইউআরএল অবিলম্বে গ্রাফ এবং লেআউট বিকল্পগুলি সংরক্ষণ করার জন্য কয়েকটি ক্যোয়ারী প্যারামিটার আপডেট করে, যা আপনাকে সবসময় লিঙ্কটি সংরক্ষণ করে আপনার ডেটার একটি অনুলিপি উল্লেখ করতে দেয়!

একটি ধরা আছে — বড়-ইশ গ্রাফগুলি URI-কে AWS-এর জন্য খুব বড় করে তোলে (যেখানে ভিজডম বর্তমানে হোস্ট করা হয়েছে) এবং অন্যান্য লোড ব্যালেন্সার।

আমি বর্তমানে বৃহত্তর গ্রাফগুলি পরিচালনা করার জন্য একটি সমাধানের উপর কাজ করছি, কিন্তু ইতিমধ্যে, আমি গ্রাফগুলি বজায় রাখার এবং সঞ্চয় করার কয়েকটি উপায় অন্তর্ভুক্ত করেছি:

• একটি এমবেডযোগ্য লিঙ্ক অনুলিপি করুন যা স্বয়ংক্রিয়ভাবে একটি দৃশ্য রেন্ডার করে যা গ্রাফটিকে সর্বাধিক করে তোলে।

• যেকোন অ্যাপ্লিকেশনে এম্বেড করতে একটি iframe স্নিপেট অনুলিপি করুন যা তাদের রেন্ডারিং সমর্থন করে।

• অথবা রেন্ডার করা SVG ডাউনলোড করুন।

এডিটর ভিউ কেমন দেখায় তার একটি উদাহরণ এখানে ডিফ্লেট জন্য pprof ট্রেস :

এডিটর ভিউতে যান এবং Example 42 লোড করুন

ডিফ ভিউ

মাঝে মাঝে, আমি নিজেকে তৈরি করেছি এমন দুটি গ্রাফ তুলনা করার চেষ্টা করছি, তাই যখন আমি এটিতে ছিলাম, তখন আমি একটি যোগ করেছি ভিন্ন দর্শক দৃশ্যত দুটি ভিন্ন গ্রাফের মধ্যে পরিবর্তন দেখতে।

রঙের কিংবদন্তি:

• লাল: মুছে ফেলা হয়েছে
• কমলা: পরিবর্তিত
• সবুজ: যোগ করা হয়েছে

এখানে কয়েকটি স্ন্যাপ রয়েছে:

আমাকে ক্লিক করুন: একটি নোড আইডি পরিবর্তন করে "e" থেকে "f"

আমাকে ক্লিক করুন: "ক্লাস্টার = সত্য" যোগ করা হচ্ছে

ভবিষ্যৎ দিকনির্দেশনা

ভিজডম এটি এখনও একটি কাজ চলছে, এবং এটি বিকশিত হতে থাকলে, আমি সচেতন যে এই সরঞ্জামটিকে নিখুঁত করার যাত্রা গ্রাফ ভিজ্যুয়ালাইজেশনের ক্ষেত্রের মতোই গতিশীল। যখন আমি কি গর্বিত ভিজডম এখন পর্যন্ত অর্জন করেছে, আমি এর সম্ভাবনা সম্পর্কে আরও বেশি উত্তেজিত। সেখানেই আপনি, পাঠক এবং সম্ভাব্য ব্যবহারকারী, আসেন।

যদি আপনার কোন প্রতিক্রিয়া থাকে, দয়া করে আমাকে মেসেজ করুন গিটার বা বিরোধ .

পড়ার জন্য ধন্যবাদ — আপনি যদি এই নিবন্ধটি উপভোগ করেন, অনুগ্রহ করে অনুসরণ করুন !

[১]: ইআর গ্যান্সার, ই. কাউটসোফিওস, এসসি নর্থ এবং কে. -পি. Vo, সফ্টওয়্যার ইঞ্জিনিয়ারিং-এ IEEE লেনদেন, vol. 19, না। 3, পৃ. 214-230, মার্চ 1993, doi: 10.1109/32.221135।

এছাড়াও এখানে প্রকাশিত