أولاً

حورية الحوريات هي شكل رسم بياني بسيط يأخذ مدخلاً قائماً على النصوص ويولد الرسوم البيانية في تنسيق SVG. إنها أداة عظيمة لخلق رسومات تدفق، رسومات تسلسلية، رسومات غانت، وأكثر من ذلك. في هذا الدرس، سوف نستكشف كيفية استخدام حورية البحر مع Vox لإنشاء الرسوم البيانية التفاعلية التي تحديث ديناميكية دون إعادة تحميل الصفحات. موقع الحُمرة هو هنا هنا لديه معلومات أكثر بكثير مما أستطيع أن أقدمه هنا

[رابعاً -

العلامة الفاصلة وعلامة الحَرْم

يمكن إدراج رسومات الحوريات في ملفات العلامة التنازلية باستخدام الجملة التالية:

# My Markdown Title
```mermaid
graph LR
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
```

هذا يسمح لك بإدراج مخطّطات حَرَمَةِ الحَرَمَة مباشرةً في ملفات العلامة التنازلية، والتي سيتم إصدارها كصور SVG عندما يتم تحويل الملف إلى HTML.

graph LR A[Start] --> B[Look for movie] B --> C{Found?} C -->|Yes| D[Watch it] C -->|No| E[Look for another movie] D --> E

يمكنك أيضاً إضافة رسومات حورية إلى ملفات html العادية باستخدام الجملة التالية:

<pre class="mermaid">
    graph TD
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
</pre>

أمثلة على الرسوم البيانية

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

الرسوم البيانية:

pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10

-المنازل: يمكن لـ Sow Schorts أن تحدد الاتجاه، على سبيل المثال. LR (من اليسار إلى اليمين)، RL (من اليمين إلى اليسار)، TB (من الأعلى إلى الأسفل)، BT (من الأسفل إلى الأعلى).

flowchart LR A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]

الرسوم البيانية المتعاقبة:

sequenceDiagram participant A participant B A->>B: Hi B, how are you? B-->>A: Fine, thanks!

الرسوم البيانية:

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2024-08-01, 30d Another task :after a1 , 20d

الرسوم البيانية لعلاقة الكيان:

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 15: Me Do work: 60: Me section Go home Go downstairs: 15: Me Sit down: 5: Me

انظر هذه الصفحة للمزيد من المخطوطات التخطيطية التي يمكنك إنشاءها مع حورية هنا هنا

بدأ العمل مع حِرْمَة و تَفْكس

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
"></script>

التالـي فـي _معاينة. cshtml ملفّ تحتاج إلى اضف سِفْرِك سِفْرِك سِفْرِك

<script>
    document.addEventListener('DOMContentLoaded', function () {
        mermaid.initialize({ startOnLoad: true });
    });
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        mermaid.run();
        
    });

</script>

هذا يفعل شيئين

انها تؤسس الحوريات عند تحميل الصفحة ، فاذا كنت تنتقل مباشرة الى صفحة مع مخطط حورية (على سبيل المثال). /blog/mermademandhtmx ) ستُصَوِّر بشكل صحيح.
إذا كنت تستخدم الـ techx كما في لدينا السنة السابقة وسيعيد تقديم رسم الحورية بعد تحديث الصفحة (حدث htmx: terswap).