18 KiB
FossFLOW - आइसोमेट्रिक आरेख उपकरण 
English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch
नमस्ते! मैं Stan हूं, यदि आपने FossFLOW का उपयोग किया है और इसने आपकी मदद की है, तो मैं वास्तव में सराहना करूंगा यदि आप कुछ छोटा दान कर सकें :) मैं पूर्णकालिक काम करता हूं, और इस परियोजना पर काम करने के लिए समय निकालना पर्याप्त चुनौतीपूर्ण है। यदि मैंने आपके लिए कोई सुविधा लागू की है या कोई बग ठीक किया है, तो यह बहुत अच्छा होगा यदि आप कर सकें :) यदि नहीं, तो कोई समस्या नहीं है, यह सॉफ्टवेयर हमेशा मुफ्त रहेगा!
साथ ही! यदि आपने अभी तक नहीं किया है, तो कृपया @markmanx द्वारा बनाई गई अंतर्निहित लाइब्रेरी देखें, जिस पर यह बना है। मैं वास्तव में यहां एक दिग्गज के कंधों पर खड़ा हूं 🫡
https://buymeacoffee.com/stan.smith
धन्यवाद,
-Stan
इसे ऑनलाइन आज़माएं
यहां जाएं --> https://stan-smith.github.io/FossFLOW/ <--
FossFLOW सुंदर आइसोमेट्रिक आरेख बनाने के लिए एक शक्तिशाली, ओपन-सोर्स प्रोग्रेसिव वेब ऐप (PWA) है। React और Isoflow लाइब्रेरी (अब फोर्क किया गया और NPM पर fossflow के रूप में प्रकाशित) के साथ बनाया गया, यह ऑफ़लाइन समर्थन के साथ पूरी तरह से आपके ब्राउज़र में चलता है।
- 🤝 CONTRIBUTORS.md - परियोजना में योगदान कैसे करें।
हाल के अपडेट (अक्टूबर 2025)
बहुभाषी समर्थन
- 8 भाषाएं समर्थित - अंग्रेजी, चीनी (सरलीकृत), स्पेनिश, पुर्तगाली (ब्राज़ीलियाई), फ्रेंच, हिंदी, बंगाली और रूसी में पूर्ण इंटरफ़ेस अनुवाद
- भाषा चयनकर्ता - ऐप हेडर में उपयोग में आसान भाषा स्विचर
- पूर्ण अनुवाद - सभी मेनू, संवाद, सेटिंग्स, टूलटिप्स और सहायता सामग्री अनुवादित
- लोकेल-जागरूक - स्वचालित रूप से आपकी भाषा प्राथमिकता का पता लगाता है और याद रखता है
बेहतर कनेक्टर उपकरण
- क्लिक-आधारित निर्माण - नया डिफ़ॉल्ट मोड: पहले नोड पर क्लिक करें, फिर कनेक्ट करने के लिए दूसरे नोड पर क्लिक करें
- ड्रैग मोड विकल्प - मूल ड्रैग-एंड-ड्रॉप अभी भी सेटिंग्स के माध्यम से उपलब्ध है
- मोड चयन - सेटिंग्स → कनेक्टर टैब में क्लिक और ड्रैग मोड के बीच स्विच करें
- बेहतर विश्वसनीयता - क्लिक मोड अधिक अनुमानित कनेक्शन निर्माण प्रदान करता है
कस्टम आइकन आयात
- अपने स्वयं के आइकन आयात करें - अपने आरेखों में उपयोग करने के लिए कस्टम आइकन (PNG, JPG, SVG) अपलोड करें
- स्वचालित स्केलिंग - पेशेवर उपस्थिति के लिए आइकन स्वचालित रूप से सुसंगत आकारों में स्केल किए जाते हैं
- आइसोमेट्रिक/फ्लैट टॉगल - चुनें कि आयातित आइकन 3D आइसोमेट्रिक या फ्लैट 2D के रूप में दिखाई दें
- स्मार्ट दृढ़ता - कस्टम आइकन आरेखों के साथ सहेजे जाते हैं और सभी भंडारण विधियों में काम करते हैं
- आइकन संसाधन - मुफ्त आइकन यहां खोजें:
- Iconify Icon Sets - हजारों मुफ्त SVG आइकन
- Flaticon Isometric Icons - उच्च गुणवत्ता वाले आइसोमेट्रिक आइकन पैक
सर्वर स्टोरेज समर्थन
- स्थायी भंडारण - सर्वर फ़ाइल सिस्टम में सहेजे गए आरेख, ब्राउज़र सत्रों में बने रहते हैं
- बहु-डिवाइस पहुंच - Docker डिप्लॉयमेंट का उपयोग करते समय किसी भी डिवाइस से अपने आरेखों तक पहुंचें
- स्वचालित पहचान - उपलब्ध होने पर UI स्वचालित रूप से सर्वर स्टोरेज दिखाता है
- अधिलेखन सुरक्षा - डुप्लिकेट नामों से सहेजते समय पुष्टिकरण संवाद
- Docker एकीकरण - Docker डिप्लॉयमेंट में डिफ़ॉल्ट रूप से सर्वर स्टोरेज सक्षम
बेहतर इंटरैक्शन सुविधाएं
- कॉन्फ़िगर करने योग्य हॉटकी - विजुअल संकेतकों के साथ उपकरण चयन के लिए तीन प्रोफाइल (QWERTY, SMNRCT, कोई नहीं)
- उन्नत पैन नियंत्रण - रिक्त क्षेत्र ड्रैग, मध्य/दाएं क्लिक, संशोधक कुंजी (Ctrl/Alt) और कीबोर्ड नेविगेशन (Arrow/WASD/IJKL) सहित कई पैन विधियां
- कनेक्टर तीर टॉगल करें - व्यक्तिगत कनेक्टरों पर तीर दिखाने/छिपाने का विकल्प
- स्थायी उपकरण चयन - कनेक्शन बनाने के बाद कनेक्टर उपकरण सक्रिय रहता है
- सेटिंग्स संवाद - हॉटकी और पैन नियंत्रण के लिए केंद्रीकृत कॉन्फ़िगरेशन
Docker और CI/CD सुधार
- स्वचालित Docker बिल्ड - कमिट्स पर स्वचालित Docker Hub डिप्लॉयमेंट के लिए GitHub Actions वर्कफ़्लो
- बहु-आर्किटेक्चर समर्थन -
linux/amd64औरlinux/arm64दोनों के लिए Docker छवियां - पूर्व-निर्मित छवियां -
stnsmith/fossflow:latestपर उपलब्ध
Monorepo आर्किटेक्चर
- लाइब्रेरी और एप्लिकेशन दोनों के लिए एकल रिपॉजिटरी
- सुव्यवस्थित निर्भरता प्रबंधन के लिए NPM Workspaces
- रूट पर
npm run buildके साथ एकीकृत बिल्ड प्रक्रिया
UI सुधार
- Quill संपादक टूलबार आइकन प्रदर्शन समस्या ठीक की गई
- संदर्भ मेनू में React कुंजी चेतावनियां हल की गईं
- markdown संपादक स्टाइलिंग में सुधार किया गया
विशेषताएं
- 🎨 आइसोमेट्रिक आरेख - आश्चर्यजनक 3D-शैली तकनीकी आरेख बनाएं
- 💾 ऑटो-सेव - आपका काम हर 5 सेकंड में स्वचालित रूप से सहेजा जाता है
- 📱 PWA समर्थन - Mac और Linux पर मूल ऐप के रूप में इंस्टॉल करें
- 🔒 गोपनीयता-प्रथम - सभी डेटा आपके ब्राउज़र में स्थानीय रूप से संग्रहीत
- 📤 आयात/निर्यात - JSON फ़ाइलों के रूप में आरेख साझा करें
- 🎯 सत्र भंडारण - संवाद के बिना त्वरित सहेजें
- 🌐 ऑफ़लाइन समर्थन - इंटरनेट कनेक्शन के बिना काम करें
- 🗄️ सर्वर स्टोरेज - Docker उपयोग करते समय वैकल्पिक स्थायी भंडारण (डिफ़ॉल्ट रूप से सक्षम)
- 🌍 बहुभाषी - 8 भाषाओं के लिए पूर्ण समर्थन: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский
🐳 Docker के साथ त्वरित डिप्लॉय
# Docker Compose का उपयोग करना (अनुशंसित - स्थायी भंडारण शामिल)
docker compose up
# या स्थायी भंडारण के साथ Docker Hub से सीधे चलाएं
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest
Docker में सर्वर स्टोरेज डिफ़ॉल्ट रूप से सक्षम है। आपके आरेख होस्ट पर ./diagrams में सहेजे जाएंगे।
सर्वर स्टोरेज अक्षम करने के लिए, ENABLE_SERVER_STORAGE=false सेट करें:
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest
त्वरित प्रारंभ (स्थानीय विकास)
# रिपॉजिटरी क्लोन करें
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
# निर्भरताएं इंस्टॉल करें
npm install
# लाइब्रेरी बनाएं (पहली बार आवश्यक)
npm run build:lib
# विकास सर्वर प्रारंभ करें
npm run dev
अपने ब्राउज़र में http://localhost:3000 खोलें।
Monorepo संरचना
यह दो पैकेज वाला एक monorepo है:
packages/fossflow-lib- नेटवर्क आरेख बनाने के लिए React घटक लाइब्रेरी (Webpack के साथ निर्मित)packages/fossflow-app- आइसोमेट्रिक आरेख बनाने के लिए Progressive Web App (RSBuild के साथ निर्मित)
विकास आदेश
# विकास
npm run dev # ऐप विकास सर्वर शुरू करें
npm run dev:lib # लाइब्रेरी विकास के लिए वॉच मोड
# बिल्डिंग
npm run build # लाइब्रेरी और ऐप दोनों बनाएं
npm run build:lib # केवल लाइब्रेरी बनाएं
npm run build:app # केवल ऐप बनाएं
# परीक्षण और लिंटिंग
npm test # यूनिट टेस्ट चलाएं
npm run lint # लिंटिंग त्रुटियों की जांच करें
# E2E टेस्ट (Selenium)
cd e2e-tests
./run-tests.sh # एंड-टू-एंड टेस्ट चलाएं (Docker और Python आवश्यक)
# प्रकाशन
npm run publish:lib # npm पर लाइब्रेरी प्रकाशित करें
उपयोग कैसे करें
आरेख बनाना
-
आइटम जोड़ें:
- शीर्ष दाईं ओर मेनू पर "+" बटन दबाएं, घटक लाइब्रेरी बाईं ओर दिखाई देगी
- लाइब्रेरी से घटकों को कैनवास पर ड्रैग और ड्रॉप करें
- या ग्रिड पर राइट-क्लिक करें और "नोड जोड़ें" चुनें
-
आइटम कनेक्ट करें:
- कनेक्टर उपकरण चुनें ('C' दबाएं या कनेक्टर आइकन पर क्लिक करें)
- क्लिक मोड (डिफ़ॉल्ट): पहले नोड पर क्लिक करें, फिर दूसरे नोड पर क्लिक करें
- ड्रैग मोड (वैकल्पिक): पहले से दूसरे नोड तक क्लिक करें और ड्रैग करें
- सेटिंग्स → कनेक्टर टैब में मोड स्विच करें
-
अपना काम सहेजें:
- त्वरित सहेजें - ब्राउज़र सत्र में सहेजता है
- निर्यात - JSON फ़ाइल के रूप में डाउनलोड करें
- आयात - JSON फ़ाइल से लोड करें
भंडारण विकल्प
- सत्र भंडारण: ब्राउज़र बंद होने पर अस्थायी सहेजें साफ़ हो जाते हैं
- निर्यात/आयात: JSON फ़ाइलों के रूप में स्थायी भंडारण
- ऑटो-सेव: सत्र में हर 5 सेकंड में परिवर्तन स्वचालित रूप से सहेजता है
योगदान देना
हम योगदान का स्वागत करते हैं! कृपया दिशानिर्देशों के लिए CONTRIBUTORS.md देखें।
प्रलेखन
- FOSSFLOW_ENCYCLOPEDIA.md - कोडबेस के लिए व्यापक गाइड
- CONTRIBUTORS.md - योगदान दिशानिर्देश
लाइसेंस
MIT