كيفية استخدام Mermaid.js لرسم المخططات الانسيابية في NoteRich – دليل شامل

# كيفية استخدام Mermaid.js في إنشاء الرسوم البيانية في NoteRich – دليل كامل تحليل العمليات المعقدة، أو هياكل الأنظمة، أو أشجار القرارات باستخدام النصوص وحدها قد يكون صعبًا. **Mermaid.js** هو أداة قوية مبنية على لغة JavaScript لتصميم الرسوم البيانية وإنشاء الرسوم. في **NoteRich**， قمنا بدمج Mermaid.js مباشرة في المحرر، مما يسمح لك بإنشاء رسوم بيانية احترافية، ورسوم تسلسلية، وغيرها دون الخروج من ملاحظاتك. سيقوم هذا الدليل بتوجيهك في كل ما تحتاج إلى معرفته لتحقيق الإتقان في استخدام رسوم Mermaid في NoteRich، بما في ذلك كيفية استخدام الذكاء الاصطناعي وتقنية OCR لإنشاء الرسوم في الوقت الفعلي. --- ## 🚀 لماذا استخدام Mermaid في NoteRich؟ * **مبني على النص:** يمكنك تعريف الرسوم باستخدام الكود، مما يجعل من السهل التحكم في التصاميم وتعديلها. * **المراجعة الفورية:** يمكنك رؤية التغييرات التي أجريتها فور كتابتها. * **متعدد الاستخدامات:** يدعم رسوم التدفق، ورسوم التسلسل، ورسوم الفئات، ورسوم الحالة، ورسوم Gantt، وغيرها. * **مدعوم بالذكاء الاصطناعي وتقنية OCR:** يمكن إنشاء الرسوم من وصفات بلغة طبيعية أو من خلال مسح الصور الموجودة. * **التركيز على المحتوى المحلي:** يتم تخزين تعريفات الرسوم محليًا في ملاحظاتك، مما يضمن الخصوصية والوصول إلى المحتوى حتى عند عدم الاتصال بالإنترنت. --- ## 📝 البدء: إدراج رسم بياني Mermaid هناك ثلاث طرق رئيسية لإدراج رسم بياني Mermaid في NoteRich: ### الطريقة الأولى: أمر القوس (`/`) 1. ضع المؤشر في المكان الذي تريد وضع الرسم البياني فيه. 2. اكتب `/` لفتح قائمة اختيار المكونات. 3. ابحث عن **"Mermaid"** أو **"Diagram"**. 4. اختر **Mermaid Diagram** من القائمة. ### الطريقة الثانية: شريط الأدوات 1. انقر على زر **Insert** في شريط الأدوات. 2. انتقل إلى قسم **Visualization** أو **Diagrams**. 3. انقر على **Mermaid**. ### الطريقة الثالثة: مساعد الذكاء الاصطناعي 1. افتح **AI Assistant** (من خلال `/ai` أو شريط الأدوات). 2. وصف الرسم البياني الذي تريده (مثلاً، "إنشاء رسم بياني لعملية تسجيل الدخول للمستخدم"). 3. سيقوم الذكاء الاصطناعي بإنشاء كود Mermaid لك، ويمكنك بعد ذلك إدراجه مباشرة في ملاحظاتك. بعد الإدراج، سيظهر نافذة إعدادات مع محرر كود ونافذة مراجعة فورية. --- ## 🛠️ واجهة محرر Mermaid محرر Mermaid في NoteRich مصمم لتحقيق الكفاءة: * **منطقة الكود:** منطقة نصية واحدة حيث تكتب كود Mermaid الخاص بك. * **المراجعة الفورية:** عرض الرسم البياني في الوقت الفعلي. إذا كان هناك خطأ في الكود، سيظهر رمز خطأ لمساعدتك في التصحيح. * **رمز المساعدة:** انقر على الرمز `?` بجانب "Code Diagram" لفتح الوثيقة الرسمية [Mermaid.js Documentation](https://mermaid.js.org/intro/) لمزيد من المعلومات حول الكود. * **زر الموافقة:** يخزن الرسم البياني ويقوم بإدراجه في الملاحظة. > **نصيحة:** يمكنك النقر المزدوج على أي رسم بياني Mermaid موجود في ملاحظاتك لإعادة فتح المحرر وإجراء التغييرات اللازمة. --- ## 📊 صيغة الرسم البياني الأساسية رسوم التدفق هي أكثر الحالات شيوعًا لاستخدام Mermaid. إليك كيفية بناء هذه الرسوم. ### 1. تحديد الاتجاه ابدأ بتحديد اتجاه التدفق: * `graph TD`: من الأعلى إلى الأسفل * `graph LR`: من اليسار إلى اليمين * `graph BT`: من الأسفل إلى الأعلى * `graph RL`: من اليمين إلى اليسار ### 2. إضافة العقد تُعرف العقد بواسطة معرف وعلامة. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: عقدة مستطيلة. * `(Text)`: عقدة مستطيلة محدبة. * `((Text))`: عقدة دائرية. * `{Text}`: عقدة رباعية الأضلاع. * `[[Text]]`: دالة فرعية. ### 3. ربط العقد * `-->`: سهم صلب. * `-.->`: سهم مخطط. * `==>`: سهم سميك. * `-- Text -->`: سهم مع علامة. --- ## 🤖 إنشاء الرسوم باستخدام الذكاء الاصطناعي لا تريد كتابة الكود؟ دع الذكاء الاصطناعي في NoteRich يقوم بذلك نيابة عنك. 1. افتح **AI Assistant**. 2. اكتب تعليمات مثل: *"أنشئ رسم بياني Mermaid لعملية طلبية عبر الإنترنت."* 3. سيقوم الذكاء الاصطناعي بإعادة كود مثل هذا: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. انسخ الكود أو استخدم زر **Insert** إذا كان متاحًا في واجهة الذكاء الاصطناعي لإضافته إلى ملاحظاتك. --- ## 📸 OCR: مسح الرسوم المكتوبة أو المطبوعة هل لديك صورة على لوحة بيضاء أو رسم بياني مطبوع؟ يمكن لـ **NoteScanner (OCR)** في NoteRich تحويله إلى كود Mermaid قابل للتعديل. 1. افتح **AI Assistant** واختر **NoteScanner (OCR)**. 2. أضف صورة الرسم البياني المكتوب أو المطبوع. 3. في التعليمات، حدد: *"حول هذا الصورة إلى كود رسوم بيانية Mermaid."* 4. سيقوم الذكاء الاصطناعي بتحليل هيكل الصورة وإنشاء الكود المقابل. 5. قم بمراجعة الكود المُنتج في المحرر وتعديل أي أخطاء طفيفة في التحويل. > **ملاحظة:** للحصول على أفضل النتائج، تأكد من أن الصورة واضحة والنص مفهوم. قد تحتاج إلى بعض التعديلات اليدوية بعد التحويل إذا كانت الرسومات مكتوبة بخط يدوي معقد. --- ## 🎨 ميزات متقدمة ### تخصيص مظهر العقد يمكنك تخصيص مظهر العقد المحددة باستخدام فئات CSS أو الأنماط المضمنة. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### الرسوم الفرعية تجميع العقد ذات الصلة لتحسين التنظيم. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### رسوم التسلسل Mermaid ليس فقط للرسوم البيانية. يمكنك أيضًا إنشاء رسوم تسلسلية لتصور التفاعلات بين الأنظمة. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 نصائح للمستخدمين في NoteRich 1. **إخلاء الأحرف الخاصة:** إذا كان نص العقد يحتوي على أحرف خاصة مثل `[]` أو `()`, فقم بتغطية النص بأقواس. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)]" ``` 2. **نسخ الرسم البياني كصورة:** بعد أن يتم عرض الرسم البياني، انقر عليه لعرض شريط الأدوات العائمة. استخدم زر **Copy Image** لنسخ الرسم البياني إلى تطبيقات أخرى مثل Slack أو Notion أو البريد الإلكتروني. 3. **تحميل SVG:** يمكن للمستخدمين المتقدمين تحميل الرسم البياني كملف SVG عالي الجودة للاستخدام في العروض التقديمية أو المنشورات. --- ## ❓ كيفية إصلاح المشكلات * **رسم بياني لا يتم عرضه؟** تحقق من رمز الخطأ في نافذة المراجعة. من المشكلات الشائعة عدم وجود أقواس إغلاقية `]` أو خطأ في صيغة السهم. * **أخطاء في الصيغة؟** تأكد من استخدام الصيغة الصحيحة لـ Mermaid. يستخدم NoteRich أحدث إصدار مستقر من Mermaid.js. إذا كنت غير متأكد، رجاءً راجع الوثيقة الرسمية [https://mermaid.js.org/intro/](https://mermaid.js.org/intro/). * **دقة OCR؟** إذا لم يكن نتائج OCR مثالية، استخدم مساعد الذكاء الاصطناعي لتصحيح الكود. يمكنك نسخ النتائج الأولية وطلب من الذكاء الاصطناعي "إصلاح صيغة Mermaid". --- ## 🏁 الخلاصة Mermaid.js في NoteRich يحول طريقة توثيق العمليات والأنظمة. من خلال الاحتفاظ برسومك ككود، تضمن أن تكون دائمًا محدثة وسهلة التعديل ومتكاملة بشكل سلس مع قاعدة معرفاتك. مع إنشاء الرسومات المعقدة باستخدام الذكاء الاصطناعي وتقنية OCR، أصبح إنشاء الرسومات المعقدة أسهل من أي وقت مضى. ابدأ بتصور أفكارك اليوم! ---