NOTE: Apart from
(and even then it's questionable, I'm Scottish). These are machine translated in languages I don't read. If they're terrible please contact me.
You can see how this translation was done in this article.
Friday, 13 September 2024
//Less than a minute
حورية الحوريات هي شكل رسم بياني بسيط يأخذ مدخلاً قائماً على النصوص ويولد الرسوم البيانية في تنسيق 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.
يمكنك أيضاً إضافة رسومات حورية إلى ملفات 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>
حورية البحر أداة قوية تسمح لك ببناء مجموعة واسعة من الرسوم البيانية باستخدام صياغة نصية بسيطة قائمة على النصوص. هنا بعض الأمثلة لأنواع الرسوم البيانية التي يمكنك إنشاءها مع الحورية:
-المنازل: يمكن لـ Sow Schorts أن تحدد الاتجاه، على سبيل المثال. LR (من اليسار إلى اليمين)، RL (من اليمين إلى اليسار)، TB (من الأعلى إلى الأسفل)، BT (من الأسفل إلى الأعلى).
الرسوم البيانية لعلاقة الكيان:
انظر هذه الصفحة للمزيد من المخطوطات التخطيطية التي يمكنك إنشاءها مع حورية هنا هنا
أولا تحتاج إلى إدراج مكتبة الحوريات في ملف 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>
هذا يفعل شيئين