DevPulse

نظرة عامة#

DevPulse هو مصمم معماريات وقواعد بيانات بلا أي تبعيات خارجية، يعمل بالكامل في المتصفح من ملف HTML واحد. يسحب المهندسون المعماريون والمطورون مكونات الخدمات الدقيقة على اللوحة، يربطونها بمنحنيات بيزيه، يعرّفون مخططات قواعد البيانات مباشرةً، ويحصلون على كود جاهز للإنتاج — نماذج Prisma وSQL DDL وDocker Compose ومانيفست Kubernetes ومخططات Mermaid — تُولَّد فورًا أثناء التصميم.

المشكلة#

أدوات الرسم الموجودة (Lucidchart وdraw.io وMiro) لوحات بيضاء عامة — تنتج صورًا جميلة، لكن الفجوة بين المخطط والكود القابل للنشر لا تزال عملًا يدويًا. يجد المطورون أنفسهم يديرون مصدرَي حقيقة منفصلين: المخطط وقاعدة الكود. DevPulse يُغلق هذه الفجوة: المخطط هو مولّد الكود.

الحل#

ملف HTML مكتفٍ بذاته بدون خطوة بناء أو تبعيات CDN أو خلفية — لذا يمكن نشره على أي مضيف ثابت في ثوانٍ. الطبقة البصرية تستخدم منحنيات بيزيه SVG للحواف، وCSS transform: translate + scale للتكبير/التحريك اللامحدود. كل نوع عقدة يعرف قالب الكود الخاص به؛ عند تغيير الرسم البياني، تُحدَّث جميع لوحات الإخراج فورًا.

المعمارية#

التطبيق هو تمرين في القيود المتعمدة: ملف .html واحد، JavaScript خالص، بدون أطر عمل. العقد عناصر div ذات موضع مطلق داخل حاوية مُحوَّلة؛ الحواف عناصر SVG <path> بتوجيه بيزيه تكعيبي يتحول تلقائيًا بين المنحنيات-S (الاتصالات الأمامية) والأقواس العمودية (الاتصالات الخلفية). تصدير PNG يستخدم HTML5 Canvas API، مع إعادة رسم الرسم البياني بالكامل برمجيًا. الحالة كائن JSON بسيط يُنسخ عميقًا في سجل تاريخ لـ undo/redo، ويُسلسَل عبر btoa في URL hash للمشاركة بنقرة واحدة.

الميزات#

• لوحة سحب وإفلات — 12 نوع مكوّن عبر 4 فئات: الخدمات وقواعد البيانات والبنية التحتية والواجهة الأمامية.
• توجيه بيزيه ذكي — منحنى-S للحواف الأمامية، قوس عمودي للحواف الخلفية، تحديد تلقائي لموضع رأس السهم.
• تكبير/تحريك لا محدود — CSS transform مع شبكة خلفية تتحرك بالتزامن؛ تحويل صحيح للإحداثيات بين مساحة الشاشة والنقوش عند جميع مستويات التكبير.
• توليد كود فوري — مخطط Prisma وSQL DDL وDocker Compose وK8s Deployment + Service YAML ومخطط Mermaid — كلها مشتقة من حالة الرسم البياني الحالية.
• مصمم مخطط قاعدة البيانات — تعريف الجداول والأعمدة مباشرةً لكل عقدة؛ لوحات Prisma وSQL تعكس التغييرات فورًا.
• تحديد متعدد وعمليات دفعية — Shift+نقر، مستطيل السحب للتحديد، Ctrl+D للنسخ، Ctrl+A لتحديد الكل.
• تراجع/إعادة — سجل تاريخ كامل بلقطات JSON عميقة النسخ.
• مشاركة URL — حالة المخطط بأكملها مُشفَّرة في URL hash؛ أي شخص لديه الرابط يرى نفس المخطط.
• تصدير PNG — إعادة رسم Canvas API بنفس رياضيات بيزيه المستخدمة في طبقة SVG.
• ملاحظات لكل عقدة — تعليق توضيحي مدمج مع شارة 📝 مرئية.
• ترتيب تلقائي — ترتيب شبكي بنقرة واحدة عند ازدحام اللوحة.
• ملاءمة العرض — تكبير وتحريك لإظهار جميع العقد دفعة واحدة.
• محاذاة للشبكة — تبديل محاذاة 24px.
• اختصارات لوحة المفاتيح — Ctrl+A وCtrl+D وCtrl+Shift+F و? وEscape.

تحديات التطوير#

الجزء الأصعب كان الحفاظ على تناسق رسم حواف SVG عبر التحريك والتكبير وسحب عقد متعددة. الرؤية الجوهرية: يجب تحويل كل إحداثي من مساحة الشاشة إلى مساحة النقوش بطرح إزاحة التحريك والقسمة على مستوى التكبير — إغفال هذا في مكان واحد يُحدث انجرافًا بصريًا للحواف بينما تتحرك العقد بشكل صحيح. خطأ آخر دقيق: عناصر SVG تتطلب setAttribute('class', ...) — تعيين .className مباشرةً يُرجع كائن SVGAnimatedString لا سلسلة نصية، لذا querySelectorAll('.edge-group') لم يجد شيئًا وتراكمت مجموعات الحواف القديمة بصمت في كل حركة ماوس، منتجةً مئات المسارات المتداخلة في ثوانٍ من سحب عقدة.

النتائج#

أداة تصميم معماريات كاملة الوظائف في أقل من 2500 سطر من HTML/JS/CSS خالص — بدون أدوات بناء أو أطر عمل أو طلبات شبكة. قابلة للنشر في أقل من 60 ثانية على أي VPS يدعم Docker.

تحسينات مستقبلية#

تحرير تعاوني في الوقت الفعلي (WebSockets + التحويلات التشغيلية)، تدفق استيراد لملفات docker-compose.yml وprisma.schema الموجودة، وإضافة Figma plugin يزامن المخطط ثنائيًا مع ملف التصميم.