إنشاء الرسوم البيانية باستخدام MermaidJS و ChatGPT: أتمتة تصور العمليات وسير العمل

visible
visible
date
Jan 29, 2023
thumbnail
header.png
slug
creating_diagrams_with_mermaidjs_and_chatgpt_automating_the_visualization_of_processes_and_workflows
author
status
Public
tags
المدونة
Open Source
summary
قم بإنشاء الرسوم البيانية بسهولة باستخدام MermaidJS و ChatGPT. أتمتة تصور العمليات وسير العمل ، مما يوفر الوقت والجهد للمطورين ومديري المشاريع.
type
Post
updatedAt
Dec 2, 2023 02:20 AM
Status
In progress
Person
مقدمة عن MermaidJSفهم بناء جملة MermaidJSإنشاء مخططات انسيابية باستخدام MermaidJS.استخدام MermaidJS مع ChatGPT.استنتاج

مقدمة عن MermaidJS

MermaidJS هي مكتبة JavaScript تتيح للمطورين وغير المطورين إنشاء الرسوم البيانية والمخططات الانسيابية بطريقة بسيطة وبديهية. تستخدم المكتبة صيغة شبيهة بالعلامات التجارية لتحديد الرسوم التخطيطية ، مما يجعل من السهل إنشاء وتخصيص التمثيلات المرئية للعمليات وسير العمل.
يدعم MermaidJS مجموعة كبيرة من أنواع المخططات ، بما في ذلك المخططات الانسيابية ومخططات جانت ومخططات الحالة والمزيد. تسمح المكتبة أيضًا بتخصيص المخططات من خلال استخدام أشكال وألوان وأنماط مختلفة ، مما يجعلها أداة قوية لتصور الأنظمة والعمليات المعقدة.
تتمثل إحدى الميزات الفريدة لـ MermaidJS في قدرتها على الاندماج مع مجموعة متنوعة من الأنظمة الأساسية ، بما في ذلك تطبيقات الويب وروبوتات الدردشة وحتى لغات البرمجة النصية مثل ChatGPT. يتيح ذلك للمطورين إنشاء رسوم بيانية ومخططات انسيابية مباشرة داخل التعليمات البرمجية الخاصة بهم ، مما يجعل من السهل تصور وفهم منطق تطبيقاتهم.
بشكل عام ، تعد MermaidJS مكتبة متعددة الاستخدامات وسهلة الاستخدام يمكنها مساعدة المطورين وغير المطورين على حد سواء في إنشاء تمثيلات مرئية للعمليات وسير العمل بطريقة بسيطة وبديهية. مع مجموعة واسعة من أنواع المخططات وخيارات التخصيص ، يمكن أن تكون MermaidJS أداة قيمة لفهم الأنظمة والعمليات المعقدة والتواصل معها.

فهم بناء جملة MermaidJS

تم تصميم بنية MermaidJS لتكون بسيطة وبديهية ، مما يسهل على المطورين وغير المطورين إنشاء الرسوم البيانية والمخططات الانسيابية. تستخدم المكتبة صيغة شبيهة بعلامات البيع لتحديد المخططات ، والتي تتكون من سلسلة من العقد والأسهم التي تمثل العناصر المختلفة للرسم التخطيطي.
يتم تمثيل العقد في MermaidJS بنص محاط بأقواس ، ويمكن توصيلها بأسهم لتمثيل تدفق العملية. على سبيل المثال ، في مخطط انسيابي ، يمكن توصيل عقدة تمثل صفحة تسجيل دخول إلى عقدة تمثل خطوة التحقق من بيانات الاعتماد.
graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
في هذا المثال ، يتم توصيل عقدتي "تسجيل الدخول" و "CheckCredentials" بواسطة سهم ، مما يشير إلى أن صفحة تسجيل الدخول تؤدي إلى خطوة التحقق من بيانات الاعتماد.
يتم تمثيل الأسهم في MermaidJS بخطوط تربط العقد ، ويمكن أن تتضمن تسميات للإشارة إلى تدفق العملية. في المثال أعلاه ، تم إلغاء تسمية السهم ، ولكن يمكن أن يتضمن أيضًا تسمية مثل "إرسال" للإشارة إلى أن المستخدم يرسل بيانات الاعتماد الخاصة به.
graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    Login-->CheckCredentials[Submit];
بالإضافة إلى العقد والأسهم ، يسمح MermaidJS أيضًا بإنشاء الرسوم البيانية الفرعية ، والتي يمكن استخدامها لتجميع العناصر ذات الصلة من الرسم التخطيطي معًا. يتم تعريف الرسوم البيانية الفرعية بإحاطة العناصر بأقواس معقوفة وهي مفيدة لتنظيم المخططات الكبيرة.
graph TD;
    subgraph Login Flow
        Login(Login Page)-->CheckCredentials(Check Credentials);
    end
    subgraph Access Flow
        CheckCredentials-->AccessGranted(Access Granted);
        CheckCredentials-->AccessDenied(Access Denied);
    end
في هذا المثال ، تم تقسيم الرسم التخطيطي إلى رسمين بيانيين فرعيين ، "تدفق تسجيل الدخول" و "تدفق الوصول" ، اللذان يجمعان العناصر المرتبطة بالرسم التخطيطي معًا.
باختصار ، يعتبر بناء جملة MermaidJS بسيطًا وبديهيًا ، مما يجعل من السهل على المطورين وغير المطورين إنشاء الرسوم البيانية والمخططات الانسيابية. تستخدم المكتبة صيغة شبيهة بالعلامات التجارية التي تتكون من العقد والسهام والرسوم البيانية الفرعية لتحديد العناصر المختلفة للرسم التخطيطي وتمثيل تدفق العملية.

إنشاء مخططات انسيابية باستخدام MermaidJS.

إنشاء مخططات انسيابية باستخدام MermaidJS
تعد المخططات الانسيابية طريقة شائعة ومفيدة لتصور العمليات وسير العمل ، ويسهل MermaidJS إنشائها. تستخدم المكتبة بناء جملة بسيطًا وبديهيًا لتحديد العناصر المختلفة للمخطط الانسيابي ، بما في ذلك العقد والأسهم.
لإنشاء مخطط انسيابي أساسي ، ستحتاج إلى تحديد العقد المختلفة في العملية ، وربطها بأسهم لتمثيل تدفق العملية. على سبيل المثال ، يُنشئ الرمز التالي مخططًا انسيابيًا لعملية تسجيل الدخول الأساسية:
graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);


graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
في هذا المثال ، يبدأ المخطط الانسيابي بعقدة "صفحة تسجيل الدخول" ، والتي تؤدي إلى عقدة "التحقق من بيانات الاعتماد". ثم يتم توصيل عقدة "التحقق من بيانات الاعتماد" بعقدتين أخريين ، "تم منح الوصول" و "تم رفض الوصول" ، والتي تمثل النتائج المحتملة لعملية تسجيل الدخول.
لإضافة تسميات إلى الأسهم ، يمكنك استخدام الأقواس المربعة بعد السهم ، على النحو التالي:
graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];


graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];
في هذا المثال ، السهم الذي يربط "صفحة تسجيل الدخول" بعقدة "التحقق من بيانات الاعتماد" يسمى "إرسال".
بالإضافة إلى البنية الأساسية ، يسمح MermaidJS أيضًا بتخصيص المخططات الانسيابية من خلال استخدام أشكال وألوان وأنماط مختلفة. يمكنك تغيير أشكال العقد وألوان الأسهم والخلفيات وحتى إضافة الصور.

graph TD;
    style Login fill:#f9f,stroke:#333,stroke-width:4px;
    style CheckCredentials fill:#f9f,stroke:#333,stroke-width:4px;
    style AccessGranted fill:#f9f,stroke:#333,stroke-width:4px;
    style AccessDenied fill:#f9f,stroke:#333,stroke-width:4px;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];



graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];
في هذا المثال ، كل عقدة لها نمطها الخاص ، بلون تعبئة وعرض حد مختلفين.
في الختام ، يجعل MermaidJS من السهل إنشاء مخططات انسيابية ، ويسمح بتخصيص المخططات من خلال استخدام أشكال وألوان وأنماط مختلفة. بفضل تركيبته البسيطة والبديهية ، فهو أداة قوية لتصور العمليات وسير العمل.
 

استخدام MermaidJS مع ChatGPT.

يعد ChatGPT نموذجًا قويًا للغة يمكن استخدامه لإنشاء نص بلغة طبيعية بناءً على موجه معين. يمكن استخدامه أيضًا لإنشاء التعليمات البرمجية والنصوص المهيكلة الأخرى ، مثل الرسوم البيانية.
تتمثل إحدى طرق استخدام ChatGPT مع MermaidJS في تدريب النموذج على مجموعة بيانات من الرسوم البيانية المكتوبة بصيغة MermaidJS. سيسمح هذا للنموذج بإنشاء مخططات بناءً على المدخلات التي يتلقاها.
لاستخدام ChatGPT مع MermaidJS ، ستحتاج أولاً إلى تدريب النموذج على مجموعة بيانات من الرسوم التخطيطية المكتوبة بصيغة MermaidJS. بمجرد تدريب النموذج ، يمكنك مطالبته بإنشاء رسم تخطيطي من خلال تزويده بوصف للرسم التخطيطي الذي تريد إنشاءه.
على سبيل المثال ، يمكنك مطالبة النموذج بما يلي:
Generate a flowchart of a basic login process.
سيقوم النموذج بعد ذلك بإنشاء رسم تخطيطي في بناء جملة MermaidJS ، على غرار المثال المقدم سابقًا في هذه المقالة:
graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];


graph TD;
    Login(Login Page)-->CheckCredentials(Check Credentials);
    CheckCredentials-->AccessGranted(Access Granted);
    CheckCredentials-->AccessDenied(Access Denied);
    Login-->CheckCredentials[Submit];
هناك طريقة أخرى لاستخدام ChatGPT مع MermaidJS وهي استخدام النموذج لإنشاء أوصاف نصية للرسومات التخطيطية ، ثم استخدام مكتبة MermaidJS لعرض الرسوم البيانية بناءً على الأوصاف.
في الختام ، يمكن استخدام ChatGPT جنبًا إلى جنب مع MermaidJS لإنشاء الرسوم البيانية بناءً على أوصاف اللغة الطبيعية. يمكن أن يكون هذا أداة قوية لأتمتة إنشاء الرسوم البيانية ، ويمكن أن يوفر الوقت والجهد للمستخدمين الذين ليسوا على دراية ببنية MermaidJS.

استنتاج

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