✖️ 🤴 🎅🏿 مخطط الشبكة كرمز ❗️ 🚟 🥚

في العامين الماضيين ، بدأت التعامل بشكل أكبر مع الوثائق. اكتب نصًا توضيحيًا حول كيفية عمل هذا النظام أو ذاك - بشكل عام ، إنه بسيط للغاية. ارسم رسمًا بيانيًا يتم عرض جميع الكائنات الرئيسية عليه ، كما أن العلاقة بين هذه الكائنات سهلة للغاية.

لكن اللحظة الأكثر إشكالية هي إبقاء هذه الوثائق محدثة. حسنا ، النص ، ولكن المخططات ... لأن جميع الوثائق على الإنترنت ، أي في تنسيق html ، يتم إرفاق صور gif / jpeg / png بالنص ، حيث يتم تصوير الرسوم البيانية فعليًا. ويتم رسم المخططات في برامج مختلفة مثل Visio أو الخدمات عبر الإنترنت على شكل draw.io. ثم تقوم بتصدير الرسم التخطيطي إلى تنسيق رسومي وإرفاقه بـ html. كل شيء بسيط.

ما المشكلة؟

عادة ما تكون المخططات بسيطة. بتعبير أدق ، ليست معقدة للغاية. نعم ، عدد العناصر عشرة أو اثنين ، وعدد الاتصالات هو نفسه تقريبًا. بالإضافة إلى التوقيعات وبعض التعيينات. يمكن وصف المخططات البسيطة بالكلمات ، ولكن معقدة للغاية ، همم ... (ق) "إنهم لا يفهمون يا سيدي". هناك الكثير من المخططات ، ويجب إجراء تغييرات فيها بشكل دوري ودوري ، أي باستمرار ، لأن يتبعون تطوير منتجاتنا.

يمكنك تضمين خدمة html. هل جربته؟

نعم بالطبع. على سبيل المثال ، تعجبني رسومات gliffy.com. ولكن بالنسبة للتغييرات ، يجب الانتقال إلى خدمة جهة خارجية ، هناك للتعديل. ومن الأصعب تفويض تعديلات لزميل.

ماذا أفعل؟

في الآونة الأخيرة ، على github ، صادفت مستودع github.com/RaoulMeyer/diagram-as-code في التوصيات. التخطيط كرمز. أولئك. نصف على الدائرة التي نحتاجها. نكتب هذا js مباشرة في نفس html حيث نص الوثائق الأخرى.

بالمناسبة ، لكنني لا أكتب وثائق بتنسيق html على الإطلاق. عادةً ما تكون الوثائق عبارة عن مجموعة من الملفات بنص تخفيض القيمة ، ثم يتم تحويلها بعد ذلك إلى موقع توثيق كامل بواسطة بعض المحركات ، على سبيل المثال wintersmith. أو نظام ويكي.

اتضح أنه ملائم للغاية: هنا كتبنا النص ، ثم تم فتح علامة البرنامج النصي ووصف كود js للدائرة فيه.

ما الخطأ مرة أخرى؟

أعجبني هذا المستودع ، ولكن هذا ليس المثال الوحيد عندما يتم رسم مخطط باستخدام التعليمات البرمجية أو عرض النص. (في نهاية المقال سيكون هناك روابط لمشاريع ومقالات غوغل على مخطط الموضوع كرمز.)

ولست الوحيد الذي يصحح الوثائق. في بعض الأحيان يقدم الزملاء أيضًا مساهمة - صحح الكلمة ، غير الوصف ، أدخل صورًا جديدة.

لذلك ، أود أن أرى الرسم التخطيطي بتنسيق نص قابل للقراءة ومفهوم ، والذي لن يتعين دراسته لفترة طويلة. وفي الأماكن يكون من السهل عمل لصق ولصق لتسريع إضافة مخطط جديد.

وأشار زميل آخر إلى أن الشفرة جيدة بالطبع ، ولكن إذا استخدمت الهيكل ، يمكن أن يكون كل شيء صارمًا ومعبّرًا للغاية.

لذلك ، حاولت تقديم المخطط كمجموعة من عدة صفائف صغيرة تصف العقد ، الروابط ، مجموعات العقد ، بالإضافة إلى موقع العقد. اتضح ، في رأيي المتواضع ، أنه من الملائم تمامًا ، على الرغم من أن الذوق واللون بالطبع ...

كيف هو المخطط في المصفوفة؟

يتم وصف كل عقدة بواسطة معرف يحدد العقدة بشكل فريد.
يمكنك أيضًا إضافة رمز إلى العقدة ، وإضافة نقش.
يمكنك تحديد علاقة بين عقدتين.
للتواصل على المخطط ، يمكنك تعيين اللون والنقش.
يتم تعريف اتجاه الاتصال من المصدر إلى الهدف. ويشار إلى المصدر والهدف بمعرفات العقدة.
يمكن إضافة عقد واحد أو أكثر إلى المجموعة.
يمكن أيضًا تحديد ارتباط من مجموعة إلى مجموعة.

باستخدام هذه القواعد البسيطة ، نحصل على مثل هذا المخطط. ببساطة؟ الى حد كبير.

ويتم وصفه بواسطة كود js التالي. الشيء الرئيسي هنا هو كائن العناصر. يتم فيها الإشارة إلى العقد - العقد ، الحواف - الاتصالات.

  const elements = {
    nodes: [       //  
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [       //  
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);

بالطبع ، لم أفكر في رسم الدائرة بنفسي ، لكنني استخدمت مكتبة cytoscape.js ، وهي أداة تصوير قوية جدًا. فرص Toliku التي أستخدمها في قراري فقط.

من الواضح أن هذا مثال بسيط. هل يمكن أن يكون أكثر تعقيدا؟

نعم من فضلك. للإشارة إلى المواضع - نستخدم المواضع ، للإشارة إلى المجموعات - نحدد قائمة بالمجموعات في المجموعات ، والعناصر نفسها لها سمة مجموعة.

وهذا هو الرمز:

<div id="scheme5" style="height:500px;width:800px;"></div>
<script>
  const elements5 = {
    groups: [
      { id: 'g1', label: '  1'},
      { id: 'g2', label: '  2'},
    ],
    nodes: [
      { id: 'man1', type: 'person', label: ''},
      { id: 'client', type: 'smartphone', label: ''},
      { id: 'agent-backend', type: 'server', group: 'g1', label: 'agent-backend'},
      { id: 'web', type: 'server', group: 'g1', label: ' admin'},
      { id: 'www', type: 'server', group: 'g1', label: ' '},
      { id: 'mongodb1', type: 'database', group: 'g1', label: 'Mongo DB 1'},
      { id: 'mongodb2', type: 'database', group: 'g1', label: 'Mongo DB 2'},
      { id: 'runner-integration1', type: 'worker', group: 'g1', label: ''},
      { id: 'runner-integration2', type: 'worker', group: 'g1', label: ''},
      { id: 'api', type: 'server', group: 'g1', label: 'API'},
      { id: 'server2', type: 'server', group:'g2', label: ''},
      { id: 'otherServer', type: 'server', group:'g2', label: ''},
      { id: 'firebase', type: 'cloud', label: 'Google Firebase'},
    ],
    edges: [
      { source: 'client', target: 'agent-backend', label: 'json', color: 'red' },
      { source: 'agent-backend', target: 'mongodb1', color: 'red' },
      { source: 'agent-backend', target: 'mongodb2',  color: 'red' },
      { source: 'mongodb1', target: 'runner-integration1', label: '' },
      { source: 'mongodb2', target: 'runner-integration2', label: '' },
      { source: 'mongodb1', target: 'web', label: '  ' },
      { source: 'runner-integration1', target: 'server2', label: '' },
      { source: 'runner-integration2', target: 'otherServer', label: '' },
      { source: 'api', target: 'firebase', label: '', color: 'blue', },
      { source: 'firebase', target: 'client', label: 'push', color: 'blue'},
      { source: 'server2', target: 'api', label: '', color: 'blue'},
      { source: 'man1', target: 'client', },
    ],
    positions: [
      { id: 'client', row: 2, col: 1,},
      { id: 'agent-backend', row: 2, col: 3,},
      { id: 'web', row: 6, col: 3,},
      { id: 'www', row: 1, col: 3,},
      { id: 'mongodb1', row: 1, col: 4,},
      { id: 'mongodb2', row: 2, col: 5,},
      { id: 'runner-integration1', row: 3, col: 3,},
      { id: 'runner-integration2', row: 4, col: 3,},
      { id: 'api', row: 5, col: 3,},
      { id: 'server2', row: 6, col: 7,},
      { id: 'otherServer', row: 4, col: 7,},
      { id: 'firebase', row: 5, col: 1,},
      { id: 'logger', row: 2, col: 7,},
      { id: 'crm', row: 5, col: 8,},
    ],
};
  Diagram('scheme5', elements5, {layout: 'grid'});
</script>

مثل هذا المخطط ، من ناحية ، هو ما يقرب من شاشتي كود على الكمبيوتر المحمول ، من ناحية أخرى ، يسمح لك هيكل la json بملء جميع البيانات عن طريق القياس ، وبسرعة ويمكنك نسخ ولصق.

ولماذا يتم أخذ المواقف بشكل منفصل عن العقد؟

هذا أكثر راحة. أولا نحدد العقد. ثم يمكننا الإشارة إلى مجموعتين وتوضيحها في العقد. ثم نشير إلى الاتصال. وبعد ذلك ، عندما تكون الكائنات الرئيسية والصلات بينها ، فإننا نتناول موقع هذه الكائنات في الرسم التخطيطي. أو العكس.

هل ممكن بدون مواقف؟

ممكن بدون مواقف. ولكن سيكون مجعدًا قليلاً ، في الأمثلة يمكنك رؤية هذا الخيار. هذا يرجع إلى حقيقة أنه ل cytoscape هناك خوارزمية لموقع عقد fcose، الذي يأخذ أيضًا في الاعتبار وجود مجموعات. تحديد المواضع يجعل المخطط أكثر قابلية للتحكم ، ولكن في مرحلة المسودة الأولى من المخطط ، يمكن تحقيقه بدون المواقف.

أيضا ، يمكن تحديد المواقف في أسلوب المعركة البحرية. أولئك. تقع إحدى العقدة في a1 والأخرى في d5. يساعد بشكل خاص على أن cytoscape يشكل كائنات على قماش منقولة ، أي يمكننا تحريكها ، وإلقاء نظرة على خيارات التخطيط المختلفة ، ثم إصلاح الكود ترتيبك المفضل للعناصر.

بشكل عام ، أرى. يمكنك أيضًا المحاولة؟

بالطبع ، لإنشاء المخططات بسرعة ، جعلت من نفسي محررًا صغيرًا ، يقوم بتحديث المخطط نفسه ويخزن الخيار الأخير في المتصفح (في localStorage).

هل جربته؟ يمكنك الآن إضافة إلى صفحتك.

ثم مرة أخرى:

1. نقوم بتوصيل برنامج نصي

<script src="https://unpkg.com/@antirek/network-diagram@0.1.4/dist/code-full.min.js"></script>

2. أضف إلى كود html

<div id="scheme1" style="height:300px;width:800px;"></div>
<script>      
  const elements = {    
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);
</script>

3. عدّل الشفرة إلى المخطط الذي نحتاجه (أعتقد أنه أسهل من رسم بومة :)

مزيد من التفاصيل في صفحة المشروع على github.

ما هي النتيجة؟

لقد حققت أهدافي - لإضافة مخططات مضمنة للوثائق ، فإن التنسيق بسيط للغاية ومباشر. إنها غير مناسبة للكيانات الفائقة ، ولكن للدوائر الصغيرة التي تشرح بنية الاتصالات ، فهي ليست شيئًا. يمكنك دائمًا إصلاحه بسرعة وتغيير شيء ما بمرور الوقت. نعم ، ويمكن للزملاء تصحيح شيء ما في المرسى بأنفسهم ، على الأقل التوقيعات على الأشياء دون تدريب خاص))

ما الذي يمكن تحسينه؟

هناك بالطبع الكثير من الخيارات. قم بإضافة رموز إضافية (تتم إضافة كل ما هو متاح في البرنامج النصي). اختر مجموعة رموز أكثر تعبيرا. جعل من الممكن تحديد نمط خط الرابط. أضف صورة خلفية.

ما رأيك؟

لدي بالفعل بعض الأفكار للتنفيذ في القضايا ، يمكنك أيضًا إضافة أفكارك في التعليقات.

الحل الخاص بي قابل للتطبيق بالتأكيد في مجموعة ضيقة من المهام ، وربما ستجد أداة أكثر ملاءمة لرسم الرسوم البيانية عن طريق تشفيرها ببساطة - كما يقولون "اعرض لي الرسم البياني الخاص بك كرمز"

اختيار جيد
خدمة Posh (9 أنواع من محرر الرسوم البيانية عبر الإنترنت)
بالطبع mermaid.js
وإذا كنت تحب مخططات فائقة التفاصيل ومعقدة ، فإن هذا المشروع سيسعدك بالتأكيد: go.drawthe.net

مخطط الشبكة كرمز

More articles: