इस प्रोजेक्ट के बारे में

डायग्राम डिज़ाइन 39 प्रकार के संपादकीय-गुणवत्ता वाले आरेखों का एक संग्रह है, जो स्व-निहित HTML और SVG फ़ाइलों के रूप में वितरित किया जाता है। इसे AI कोडिंग सहायकों—जिनमें Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, और OpenCode शामिल हैं—के लिए एक स्किल या प्लगइन के रूप में डिज़ाइन किया गया है। परियोजना का मूल दर्शन यह है कि आरेख आस-पास की सामग्री की दृश्य गुणवत्ता से मेल खाने चाहिए, न कि सामान्य गोल-बॉक्स टेम्पलेट्स जैसे दिखने चाहिए। प्रत्येक आरेख प्रकार तीन स्थिर वेरिएंट में उपलब्ध है: न्यूनतम लाइट, न्यूनतम डार्क, और पूर्ण-संपादकीय। सभी आउटपुट स्व-निहित हैं—कोई बिल्ड स्टेप, जावास्क्रिप्ट, या बाहरी छवि निर्भरता नहीं। 39 प्रकार विभिन्न उपयोग-मामलों को कवर करते हैं, जिनमें आर्किटेक्चर आरेख, फ्लोचार्ट, सीक्वेंस आरेख, स्टेट मशीन, ER/डेटा मॉडल, टाइमलाइन, स्विमलेन, क्वाड्रेंट, रडार चार्ट, लूप/फ्लाईव्हील, नेस्टेड पदानुक्रम, ट्री, ऑर्ग चार्ट, लेयर स्टैक, वेन आरेख, पिरामिड/फ़नल, बार चार्ट, ट्रीमैप, लाइन चार्ट, गैंट चार्ट, स्कैटर प्लॉट, उच्च-स्तरीय स्टैक, प्रक्रियाएँ, मेडलियन आर्किटेक्चर, डेटा फ्लो, डेटा प्लेटफ़ॉर्म एकीकरण, सुरक्षा मैट्रिक्स, सैंकी आरेख, फिशबोन आरेख, वार्डली मैप, कानबन बोर्ड, उपयोगकर्ता यात्रा, डिप्लॉयमेंट आरेख, निर्भरता ग्राफ़, UML क्लास आरेख, स्टोरी मैप, डेटाबेस स्कीमा, पोलर चार्ट, और वॉटरफॉल चार्ट शामिल हैं। एक प्रमुख विभेदक ब्रांड-मिलान ऑनबोर्डिंग फ्लो है। यह स्किल किसी वेबसाइट के होमपेज को ला सकता है, प्रमुख रंग पैलेट और फ़ॉन्ट स्टैक निकाल सकता है, पहचाने गए मानों को अर्थपूर्ण भूमिकाओं (पेपर, इंक, म्यूटेड, एक्सेंट, लिंक) में मैप कर सकता है, और उन्हें हर आरेख पर लागू कर सकता है। यह स्वचालित रूप से WCAG AA कंट्रास्ट जाँच करता है और एक निष्ठा रसीद (fidelity receipt) उत्पन्न करता है जिसमें नमूना किए गए URL, सटीक रंग भूमिकाएँ, फ़ॉन्ट परिवार, और कोई भी फ़ॉलबैक दर्ज होते हैं। प्रोफ़ाइल को `.diagram-design` मार्कर फ़ाइल का उपयोग करके कई क्लाइंट परियोजनाओं में सहेजा और साझा किया जा सकता है। यह टूल draw.io, Mermaid, या Excalidraw से मौजूदा आरेखों को आयात करने और उन्हें चुने गए प्रारूप, आकार, और विवरण स्तर पर डायग्राम डिज़ाइन सिस्टम में फिर से बनाने का समर्थन करता है। अर्थपूर्ण पैटर्न व्यवहार को लेआउट से अलग वर्णित करते हैं, इसलिए कतारें, नीति ट्रेस, या विश्वास सीमाएँ जैसी अवधारणाएँ प्रकारों की संख्या बढ़ाए बिना निकटतम मौजूदा प्रकार का उपयोग कर सकती हैं। क्रमबद्ध स्पष्टीकरणों के लिए वैकल्पिक सुलभ गति उपलब्ध है, जिसमें कम-गति समर्थन और स्थिर डिफ़ॉल्ट शामिल है। पहुँच (Accessibility) डिफ़ॉल्ट रूप से निर्मित है: प्रत्येक SVG में role="img", aria-labelledby, और title/desc तत्व शामिल हैं, जिनमें प्रति-आरेख ID उपसर्ग होते हैं ताकि एक पृष्ठ पर कई आरेख इनलाइन होने पर टकराव न हो। स्थापना प्रत्येक होस्ट के मूल प्लगइन मार्केटप्लेस के माध्यम से या संपादन योग्य स्थापनाओं के लिए सीधे Git क्लोन के माध्यम से उपलब्ध है। साझा स्किल `skills/diagram-design/` पर स्थित है और सभी समर्थित Agent Skills होस्टों के साथ संगत है।