# सिस्टम डायग्राम मेकर

URL: https://discuvr.org/system-diagram/?hl=hi
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

A -> B लिखकर आर्किटेक्चर और फ्लो डायग्राम बनाएं। ऑटो लेआउट, समेटे जा सकने वाले ग्रुप, क्रमांकित स्टेप, PNG और SVG एक्सपोर्ट।

व्हाइटबोर्ड टूल में आप हर बॉक्स और हर तीर खुद बनाते हैं और हाथ से जमाते हैं। यहां आप लिखते हैं कि कौन किससे बात करता है, हर तीर के लिए एक लाइन, और लेआउट अपने-आप बन जाता है। जुड़ी सेवाओं को एक ग्रुप में रखें और बड़ी तस्वीर के लिए उसे एक बॉक्स में समेट दें; डिटेल के लिए फिर खोलें।

## यह क्या करता है

- लिखते-लिखते अपडेट होने वाला ऑटो लेआउट, बाएं से दाएं या ऊपर से नीचे।
- नाम से आकार: DB डेटाबेस, Kafka कतार, User व्यक्ति और ? पर खत्म होने वाला नाम निर्णय बनता है।
- एक बॉक्स में सिमटने वाले ग्रुप, ताकि एक ही डायग्राम हाई-लेवल और लो-लेवल दोनों दिखाए।
- कैनवास पर भी बॉक्स खिसकाएं, जोड़ें, नाम बदलें और नए बनाएं; हर बदलाव टेक्स्ट में लिखा जाता है।
- क्रमांकित स्टेप, हाथ से बना लुक, PNG और SVG एक्सपोर्ट और शेयर लिंक। कुछ भी अपलोड नहीं होता।

## यह कैसे काम करता है

1. User -> Web App -> Orders DB जैसी लाइनें लिखें या किसी टेम्पलेट से शुरू करें।
2. Name { ... } से ग्रुप, कोलन के बाद लेबल और 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 अक्षर तक का टेक्स्ट आ सकता है।

**जब मैं किसी ग्रुप को फोल्ड करता हूँ तो तीरों का क्या होता है?**

फोल्ड किए गए ग्रुप के अंदर के बॉक्सों के बीच के तीर छिप जाते हैं, और जो तीर उसकी सीमा पार करते हैं वे अब ग्रुप बॉक्स से शुरू या उस पर खत्म होते हैं। एक ही दो बॉक्सों के बीच कई तीर मिलकर एक मोटा तीर बन जाते हैं, जो पहला लेबल रखता है और गिनती जोड़ता है। उदाहरण: अगर Payments API और Ledger, Payments { ... } के अंदर हैं, तो ओवरव्यू में Checkout -> Payments API और Checkout -> Ledger वाली लाइनें एक तीर Checkout -> Payments x2 बन जाती हैं। फोल्ड किए गए ग्रुप के अंदर का ग्रुप भी साथ में फोल्ड हो जाता है, और स्टेप चालू होने पर नंबर लिखे गए क्रम में अब भी दिख रहे तीरों के हिसाब से चलते हैं।

## डेवलपर टूल में और

- [JSON फ़ॉर्मेटर](https://discuvr.org/json-formatter/?hl=hi)
- [Python फ़ॉर्मेटर](https://discuvr.org/python-formatter/?hl=hi)
- [HTML व्यूअर](https://discuvr.org/html-viewer/?hl=hi)
- [IP सबनेट कैलकुलेटर](https://discuvr.org/ip-subnet-calculator/?hl=hi)

## अक्सर इनके साथ इस्तेमाल होता है

- [टेक्स्ट तुलना](https://discuvr.org/text-diff/?hl=hi)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.