এক্সক্যালিড্র কোড খেলার মাঠ

লেখকবৃন্দ
  • এক্সক্যালিড্র কোড খেলার মাঠ

MassiveDiag Playground: এক্সকালিড্র’ কোড প্লে-গ্রাউন্ড

১. পরিচিতি

ডায়াগ্রামগুলি প্রযুক্তিগত ডকুমেন্টেশন, সিস্টেম আর্কিটেকচার, এবং ধারণা বিকাশের জন্য অপরিহার্য। তবে, ম্যানুয়ালি ডিজাইন করা সময়সাপেক্ষ হতে পারে। এজন্যই আমরা তৈরি করেছি MassiveDiag Playground — একটি সহজ Excalidraw কোড থেকে ডায়াগ্রাম জেনারেটর যা কাঁচা কোডকে সুন্দর, ডাউনলোডযোগ্য ভিজ্যুয়ালে রূপান্তরিত করে SVG, PNG, Word, এবং PDF ফরম্যাটে।

Excalidraw Example

এখনই চেষ্টা করুন, বিনামূল্যে: MassiveDiag Playground চেষ্টা করুন


২. এক্সকালিড্র’ ডায়াগ্রাম কী?

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


৩. সমর্থিত Excalidraw ডায়াগ্রাম ফিচারগুলি

MassiveDiag অনেক ধরনের Excalidraw উপাদান সমর্থন করে, যার মধ্যে রয়েছে:

  • আকার: আয়তক্ষেত্র, ডিম্বাকৃতি, হীরক আকার
  • টেক্সট বক্স এবং ফ্রি-ফর্ম টীকা
  • তীর চিহ্ন এবং সংযোগকারী
  • গ্রুপ করা উপাদান
  • স্তর এবং অবস্থান
  • হ্যান্ড-ড্রন ভিজ্যুয়াল স্টাইল রেন্ডারিং

৪. এক্সকালিড্র’ ডায়াগ্রামের উদাহরণ


🧠 ১. ব্রেইনস্টর্মিং আইডিয়া ম্যাপ

ব্যবহার: পরিকল্পনা বা ধারণা তৈরি সেশনগুলিতে আইডিয়া মানচিত্র তৈরি করা।

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    { "type": "ellipse", "id": "1", "x": 100, "y": 50, "width": 140, "height": 60, "stroke": "black" },
    { "type": "text", "id": "2", "x": 120, "y": 70, "text": "Main Idea" },
    { "type": "arrow", "id": "3", "x": 170, "y": 110, "width": 0, "height": 80, "points": [[0,0],[0,80]], "stroke": "black" },
    { "type": "rectangle", "id": "4", "x": 120, "y": 200, "width": 120, "height": 50, "stroke": "blue" },
    { "type": "text", "id": "5", "x": 130, "y": 215, "text": "Supporting Idea" }
  ]
}

Excalidraw Example


📊 ২. সিম্পল ফ্লোচার্ট

ব্যবহার: প্রসেস ফ্লো বা সিদ্ধান্ত গ্রহণের পদক্ষেপ দেখানো।

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    { "type": "rectangle", "id": "start", "x": 50, "y": 50, "width": 120, "height": 50, "stroke": "black" },
    { "type": "text", "id": "startText", "x": 70, "y": 65, "text": "Start" },
    { "type": "arrow", "id": "arrow1", "x": 110, "y": 100, "points": [[0,0],[0,60]], "stroke": "black" },
    { "type": "diamond", "id": "decision", "x": 50, "y": 160, "width": 120, "height": 60, "stroke": "black" },
    { "type": "text", "id": "decisionText", "x": 70, "y": 180, "text": "Decision?" }
  ]
}

Excalidraw Example


💻 ৩. ইউআই ওয়্যারফ্রেম স্কেচ

ব্যবহার: ইউজার ইন্টারফেসের দ্রুত প্রোটোটাইপ তৈরি।

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    { "type": "rectangle", "id": "header", "x": 30, "y": 30, "width": 300, "height": 60, "stroke": "black" },
    { "type": "text", "id": "headerText", "x": 50, "y": 50, "text": "Header" },
    { "type": "rectangle", "id": "sidebar", "x": 30, "y": 100, "width": 80, "height": 200, "stroke": "black" },
    { "type": "rectangle", "id": "content", "x": 120, "y": 100, "width": 210, "height": 200, "stroke": "black" },
    { "type": "text", "id": "contentText", "x": 130, "y": 150, "text": "Main Content" }
  ]
}

Excalidraw Example


🏗️ ৪. সিস্টেম আর্কিটেকচার

ব্যবহার: সফটওয়্যার সিস্টেমের উচ্চস্তরের উপাদান উপস্থাপন করা।

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    { "type": "rectangle", "id": "frontend", "x": 50, "y": 50, "width": 120, "height": 50, "stroke": "green" },
    { "type": "text", "id": "frontendText", "x": 70, "y": 65, "text": "Frontend" },
    { "type": "arrow", "id": "arrow1", "x": 110, "y": 100, "points": [[0,0],[100,0]], "stroke": "black" },
    { "type": "rectangle", "id": "backend", "x": 160, "y": 50, "width": 120, "height": 50, "stroke": "blue" },
    { "type": "text", "id": "backendText", "x": 180, "y": 65, "text": "Backend" }
  ]
}

Excalidraw Example

আপনি এটি SVG, PNG, Word ডকুমেন্ট, বা PDF হিসেবে রপ্তানি করতে পারবেন।


৫. Excalidraw ডায়াগ্রাম দিয়ে শুরু করা

  1. Excalidraw এডিটর থেকে আপনার Excalidraw JSON কোড কপি করুন বা এটি একটি AI এর মাধ্যমে তৈরি করুন।
  2. যান MassiveDiag Playground
  3. কোডটি ইনপুট এলাকায় পেস্ট করুন বা একটি .json ফাইল আপলোড করুন।
  4. যদি এটি অটো-ডিটেক্ট না হয় তবে "Excalidraw কোড" নির্বাচন করুন।
  5. “Create Diagram” এ ক্লিক করুন আপনার ভিজ্যুয়ালাইজেশনটি তাত্ক্ষণিকভাবে তৈরি করতে।

শেয়ার করুন