ديسكورش ميرميد

:discourse2: ملخص يتيح لك Discourse Mermaid إنشاء رسوم بيانية قوية جدًا باستخدام صيغة Mermaid.
:eyeglasses: معاينة معاينة على منشئ مواضيع Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-mermaid-theme-component
:open_book: جديد على مواضيع Discourse؟ دليل المبتدئين لاستخدام مواضيع Discourse

تثبيت مكون هذا الموضوع

الاستخدام

```mermaid height=200
graph TD;
  A --> B;
```

تعرف على المزيد حول صيغة Mermaid على الموقع الرسمي: Mermaid | Diagramming and charting tool

:warning: لن يتم عرض الرسوم البيانية في رسائل البريد الإلكتروني

الإعدادات

الاسم الوصف
أيقونات SVG
الترجمة الافتراضي
rendering_error

<b>خطأ</b><p>يرجى التأكد من أن كود mermaid الخاص بك يعمل على <a href=‘https://mermaid.live/’>mermaid.live ومُحاذًى بمسافة 4 مسافات، مثل: <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample مخطط Mermaid

:discourse2: مُستضاف بواسطةنا؟ مكونات المواضيع متاحة للاستخدام في خططنا Pro وBusiness وEnterprise.

31 إعجابًا

لا يتم عرض الرمز في المخطط عند استخدام Font Awesome:

فشلت عندما اختبرت باستخدام:

flowchart LR
    A[fas:fa-plane-departure Airline] -->|11/04/2024| B

ولكنه يعمل إذا اختبرت هنا:

تم نشر طلب ميزة هنا:

3 إعجابات

تم تقسيم 3 مشاركات إلى موضوع جديد: Upgrade Mermaid to 10.6.1

هل من الممكن إنشاء SVG بدلاً من PNG؟

مرحباً، أهلاً بك :wave:

هذا لا يُنشئ صورة. إنه يُصيّر عنصر SVG HTML. إذا أشرت إلى المثال في المنشور الأول، فهو يُقصد به لقطة شاشة للنتيجة. أتفهم أنه قد يكون مربكًا. يمكنك رؤية مثال مباشر أدناه:

graph TD;
  A --> B;
3 إعجابات

تم دمج منشورين في موضوع موجود: مشكلة التحجيم للمخططات

مرحباً،
لا أفترض أن هناك طريقة لمحاكاة النمط “الخشن” الذي يمكن العثور عليه في معاينة Mermaid (أعلى اليمين):
CleanShot 2025-03-04 at 14.11.16

أفترض أن الاحتمال ضئيل نظرًا لأن الكود لا يتغير فعليًا، ولكنه يستحق المحاولة!

إعجابَين (2)

يعمل التحجيم بشكل غريب في فايرفوكس، ولا يمكنني تكبير المخطط بارتفاع كبير.

كيف يبدو في المنشور:

لقطة شاشة للمنشور

كيف يبدو عند التوسيع (لا يفعل النقر شيئًا، ولكن إذا كان المخطط LR فيمكنني النقر للتكبير):

لقطة شاشة موسعة

مخطط Mermaid من المثال:

المخطط
flowchart TD
    A["Lorem ipsum dolor"] --> B["Sit amet consectetur"]
    A --> C["Adipiscing elit sed"]
    B --> E["Do eiusmod tempor"]
    C --> D["Incididunt ut labore"]
    D --> F["Et dolore magna"]
    E --> G["Aliqua ut enim"]
    F --> G
    G --> H["Ad minim veniam"]
    H --> I["Quis nostrud exercitation"]
    C --> J["Ullamco laboris nisi"]
    I --> K["Ut aliquip ex"]
    J --> L["Ea commodo consequat"]
    L --> M["Duis aute irure"]
    M --> N["Dolor in reprehenderit"]
    N --> O["In voluptate velit"]
    K --> P["Esse cillum dolore"]
    P --> Q["Eu fugiat nulla"]
    Q --> R["Pariatur excepteur sint"]
    L --> S["Occaecat cupidatat non"]
    F --> T["Proident sunt in"]
    S --> U["Culpa qui officia"]
    U --> V["Deserunt mollit anim"]
    R --> W["Id est laborum"]
    W --> X["Sed ut perspiciatis"]
    O --> Y["Unde omnis iste"]
    X --> Z["Natus error sit"]
    Z --> AA["Voluptatem accusantium doloremque"]
    AA --> AB["Laudantium totam rem"]
    AB --> AC["Aperiam eaque ipsa"]
    AC --> AD["Quae ab illo"]
    T --> Y
    V --> Q
    D --> M
    E --> R

في كروم يعمل بشكل أفضل.

تضع Mermaid أيضًا الأخطاء في نهاية علامة <body/> الخاصة بـ discourse

إعجاب واحد (1)

تم كتابة المنشور في الأصل باللغة الروسية

هاه. كانت باللغة الإنجليزية باستثناء اسم الصورة. شكرًا، الخطاب.

ما كتبته بالفعل:

تضع Mermaid أيضًا أخطاء في نهاية علامة <body> في الخطاب

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

هل يتم دعم click حاليًا ضمن مخططات mermaid؟

flowchart TD
   start --إلى--> relative
   relative --إلى--> absolute
   absolute --إلى--> external

   click relative "/categories" "tooltip1"
   click absolute "https://meta.discourse.org/docs" "tooltip2"
   click external "https://github.com/" "tooltip3"

يمكنني رؤية الرابط يتم إنشاؤه في مصدر الصفحة، لكنه لا يعمل.

أي إصدار من Mermaid يدعمه هذا المكون؟

إعجابَين (2)

ما هو الإيقاع المعتاد لتحديثات Discourse Mermaid فيما يتعلق بمكتبة mermaid.js الأساسية؟ أسأل ذلك لأنه منذ الإصدار 11.14 تم تضمين نوع جديد من الرسوم البيانية يُعرف بـ Wardley Mapping (في مرحلة التجربة)، وهو ذو أهمية كبيرة لمجتمعاتي.

وفي وقت كتابة هذا النص، فإن أحدث إصدار هو 11.15.0، ويُقال إن ميزة Wardley أصبحت مستقرة بشكل مقبول.

إذا كان سيتم قبول طلب سحب (PR)، فسأكون سعيدًا بإعداده!

إعجابَين (2)

يسرّنا حقًا استقبال طلب الدمج!

إعجاب واحد (1)