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 अक्षर तक का टेक्स्ट आ सकता है।