User -> API -> Database এর মতো তীর লিখুন, সাজানো আর্কিটেকচার বা ফ্লো ডায়াগ্রাম পান। বড় ছবির জন্য গ্রুপ ভাঁজ করুন, বিস্তারিত ফ্লোর জন্য ধাপে নম্বর দিন।
100%
বাঁ দিকে User -> App -> Database এর মতো একটি লাইন লিখুন, অথবা বক্স যোগ করতে এখানে ডাবল-ক্লিক করুন।
বক্স সরাতে টেনে আনুন। নাম বদলাতে বা নতুন বক্স যোগ করতে ডাবল-ক্লিক করুন। যুক্ত করতে বক্সের বিন্দু টানুন। Ctrl+Z পূর্বাবস্থায় ফেরায়।
কিছুই আপলোড হয় না: ডায়াগ্রাম আপনার ব্রাউজারে আর আপনার শেয়ার করা লিংকে থাকে।
সম্পর্কে সিস্টেম ডায়াগ্রাম মেকার
হোয়াইটবোর্ড টুলে প্রতিটি বক্স আর তীর আপনি নিজে আঁকেন এবং হাতে সাজান। এখানে লিখুন কে কার সাথে কথা বলে, প্রতি তীরে এক লাইন, লেআউট নিজে থেকেই হয়ে যায়। সম্পর্কিত সার্ভিস একটি গ্রুপে রাখুন, বড় ছবির জন্য তা একটি বক্সে ভাঁজ করুন; বিস্তারিতের জন্য আবার খুলুন।
এটি কী করে
লেখার সাথে সাথে আপডেট হওয়া স্বয়ংক্রিয় লেআউট, বাম থেকে ডানে বা ওপর থেকে নিচে।
নাম দেখে আকার: DB ডেটাবেস, Kafka কিউ, User ব্যক্তি, ? দিয়ে শেষ নাম সিদ্ধান্ত।
একটি বক্সে ভাঁজ হওয়া গ্রুপ, যাতে একটি ডায়াগ্রামেই উচ্চ ও নিম্ন স্তরের দৃশ্য মেলে।
ক্যানভাসেও বক্স টানুন, যুক্ত করুন, নাম বদলান ও যোগ করুন; প্রতিটি পরিবর্তন টেক্সটে লেখা হয়।
নম্বরযুক্ত ধাপ, হাতে আঁকা ধরন, PNG ও SVG এক্সপোর্ট এবং শেয়ার লিংক। কিছুই আপলোড হয় না।
এটি যেভাবে কাজ করে
1User -> Web App -> Orders DB এর মতো লাইন লিখুন বা একটি টেমপ্লেট দিয়ে শুরু করুন।
2Name { ... } দিয়ে গ্রুপ, কোলনের পরে লেবেল এবং async কলের জন্য --> যোগ করুন।
3ওভারভিউ আর বিস্তারিতের মধ্যে বদলান, টেনে বক্স সাজান, তারপর এক্সপোর্ট করুন বা লিংক কপি করুন।
প্রশ্নাবলী
এটি Excalidraw থেকে কীভাবে আলাদা?
Excalidraw একটি মুক্ত হোয়াইটবোর্ড, যেখানে প্রতিটি আকার ও তীর আপনি নিজে বসান। এখানে টেক্সটই ডায়াগ্রাম আর লেআউট স্বয়ংক্রিয়, তাই নতুন সার্ভিস যোগ করা মানে এক লাইন, বক্স আঁকা ও সাজানো নয়। মুক্ত স্কেচের জন্য Excalidraw এখনও ভালো।
উচ্চ ও নিম্ন স্তরের দুই দৃশ্য কীভাবে দেখাব?
সম্পর্কিত বক্সগুলো Name { ... } দিয়ে একটি গ্রুপে রাখুন। ওভারভিউ প্রতিটি গ্রুপকে একটি বক্সে ভাঁজ করে তীরগুলো মিলিয়ে দেয়; বিস্তারিত আবার খোলে। শিরোনাম থেকে একটি করে গ্রুপও ভাঁজ করা যায়।
আমার ডায়াগ্রাম কি কোথাও সংরক্ষিত হয়?
না। এটি আপনার ব্রাউজারে আঁকা হয় এবং তার লোকাল স্টোরেজে থাকে। শেয়ার লিংক ডায়াগ্রামটি লিংকের ভেতরেই # চিহ্নের পরে বহন করে, যা ব্রাউজার কখনও সার্ভারে পাঠায় না।
আমি কি Mermaid ফ্লোচার্ট পেস্ট করতে পারি?
সরাসরি নয়; Mermaid ইমপোর্ট নেই। A -> B এর মতো সাধারণ লাইন চলে, তবে তিনটি পার্থক্য আছে। graph TD হেডার লাইনটি মুছে দিন, নইলে সেটি একটি বক্স হয়ে যাবে, আর তার বদলে direction: down লিখুন। বর্গবন্ধনীর ভেতরের Mermaid লেবেল সরিয়ে দিন, কারণ এখানে [ ] এর ভেতরের লেখা আকার ও রঙের ট্যাগ হিসেবে পড়া হয়। আর এখানে --> অ্যাসিঙ্ক কলের জন্য ড্যাশ দেওয়া তীর আঁকে, যেখানে Mermaid-এ এটি সাধারণ তীর; টানা তীরের জন্য -> লিখুন।
A -> B ছাড়া আর কী লেখা যায়?
A -> B: লেখা তীরে লেবেল বসায়, A --> B ড্যাশ দেওয়া তীর, A <-> B দুই দিকের তীর আঁকে আর A <- B পেছনের দিকে নির্দেশ করে। নাম [db, blue] আকার ও রঙ ঠিক করে; আকারগুলো হলো service, db, cache, queue, actor, client, storage, external, decision, terminal ও note। title: ডায়াগ্রামের নাম দেয়, direction: down ওপর থেকে নিচে সাজায়, আর # বা // দিয়ে শুরু হওয়া লাইন মন্তব্য। একটি ডায়াগ্রামে সর্বোচ্চ 300টি বক্স, 600টি তীর ও 20,000 অক্ষরের লেখা ধরে।