مناقشة البحرية

[Discourse]

||||\n-|-|-|\n:discourse2: | ملخص | Discourse Mermaid يتيح لك إنشاء رسوم بيانية قوية جدًا باستخدام صيغة Mermaid.\n| : eyeglasses: | معاينة | معاينة على منشئ سمات Discourse |\n: hammer_and_wrench: | رابط المستودع | \u003chttps://github.com/discourse/discourse-mermaid-theme-component\u003e\n: open_book: | جديد على سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse\n\n\nتثبيت مكون السمة هذا\n\n\n[quote]\n\n:discourse2: نظرًا لأن هذا مكون سمة #رسمي تتم صيانته بواسطة فريق Discourse، يمكن تقديم طلبات #الدعم، #الأخطاء، #تجربة_المستخدم، و #الميزات في الفئات المعنية هنا على Meta، ووضع علامة عليها بعلامة مكون السمة المناسبة. انقر على الرابط أدناه لبدء أحدها. \n\n\u003ckbd\u003e \u0026nbsp;الدعم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;خطأ \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;تجربة المستخدم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;ميزة\u003c/kbd\u003e\n\n[/quote]\n\n### الاستخدام\n\n\n```mermaid height=200\ngraph TD;\n A --\u003e B;\n```\n\n\n

\n\nتعرف على المزيد حول صيغة Mermaid على الموقع الرسمي: Mermaid | Diagramming and charting tool لن يتم عرض الرسوم البيانية في رسائل البريد الإلكتروني\n\n### الإعدادات\n\n| الاسم | الوصف\n|-|-|\n| أيقونات svg | \n\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e \u003cb\u003eالترجمة \u003c/td\u003e\u003ctd\u003e\u003cb\u003e الافتراضي\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e rendering_error \u003c/td\u003e\u003ctd\u003e\n\n\\u003cb\u003eخطأ\\u003c/b\u003e\\u003cp\u003eيرجى التأكد من أن كود mermaid الخاص بك يعمل على \\u003ca href=‘https://mermaid.live/’\u003emermaid.live\u003c/a\u003e ومسافة بادئة بـ 4 مسافات، على سبيل المثال: \\u003cpre\u003e\\u003ccode\u003e flowchart TB\n A –\u003e B\\u003c/code\u003e\\u003c/pre\u003e\\u003c/p\u003e\n\n\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003einsert_mermaid_sample \u003c/td\u003e\u003ctd\u003eمخطط Mermaid\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n\u003e:discourse2: مستضاف من قبلنا؟ مكونات السمة متاحة للاستخدام في خطط Pro و Business و Enterprise الخاصة بنا.

[cmdntd]

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

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

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

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

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

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

Support Font Awesome icons in Discourse Mermaid

This is great, thanks! It doesn’t seen that font-awesome icons are supported An example from the docs: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Code: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Is there a supported way to embed font-awesome icons?

[katzuv (Dan Katzuv)]

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

[Arkshine]

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

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

graph TD;
  A --> B;

[putty (Derek Putnam)]

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

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

[volas (Alexander V)]

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

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

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

كيف يبدو عند التوسيع (لا يفعل النقر شيئًا، ولكن إذا كان المخطط 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

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

[volas (Alexander V)]

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

[volas (Alexander V)]

@volas

تضع Mermaid أيضًا أخطاء في نهاية علامة �3cbody�3e في الخطاب

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

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

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

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

[Tris20 (Tristan)]

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