mermaid
11.4.0
إنشاء رسوم بيانية من نص يشبه تخفيض السعر.
محرر مباشر!
التوثيق | البداية | CDN | ؟ انضم إلينا
简体中文
جرب معاينات Live Editor للإصدارات المستقبلية: تطوير | التالي
؟ تم ترشيح حورية البحر وفازت بجوائز JS Open Source (2019) في فئة "الاستخدام الأكثر إثارة للتكنولوجيا" !!!
شكرًا لجميع المشاركين، الأشخاص الذين يقدمون طلبات السحب، والأشخاص الذين يجيبون على الأسئلة!
عن
أمثلة
يطلق
المشاريع ذات الصلة
المساهمين
الرسوم البيانية الأمنية والآمنة
الإبلاغ عن نقاط الضعف
تقدير
Mermaid هي أداة رسم تخطيطي ورسم بياني تعتمد على JavaScript وتستخدم تعريفات نصية مستوحاة من Markdown وعارضًا لإنشاء وتعديل الرسوم البيانية المعقدة. الغرض الرئيسي من Mermaid هو مساعدة التوثيق على مواكبة التطور.
Doc-Rot هي مشكلة Catch-22 التي تساعد حورية البحر في حلها.
يكلف التخطيط والتوثيق وقتًا ثمينًا للمطورين ويصبح قديمًا بسرعة. لكن عدم وجود مخططات أو مستندات يدمر الإنتاجية ويضر بالتعلم التنظيمي.
تعالج Mermaid هذه المشكلة من خلال تمكين المستخدمين من إنشاء مخططات قابلة للتعديل بسهولة. ويمكن أيضًا جعله جزءًا من نصوص الإنتاج (وأجزاء أخرى من التعليمات البرمجية).
يسمح برنامج Mermaid حتى لغير المبرمجين بإنشاء مخططات تفصيلية بسهولة من خلال برنامج Mermaid Live Editor.
للحصول على دروس فيديو، قم بزيارة صفحة البرامج التعليمية لدينا. استخدم حورية البحر مع تطبيقاتك المفضلة، وراجع قائمة عمليات التكامل واستخدامات حورية البحر.
يمكنك أيضًا استخدام Mermaid داخل GitHub بالإضافة إلى العديد من تطبيقاتك المفضلة الأخرى — راجع قائمة عمليات التكامل واستخدامات Mermaid.
للحصول على مقدمة أكثر تفصيلاً عن حورية البحر وبعض استخداماتها الأساسية، انظر إلى دليل المبتدئين والاستخدام والبرامج التعليمية.
يتم تشغيل اختبار الانحدار المرئي للعلاقات العامة الخاص بنا بواسطة Argos من خلال خطتها المفتوحة المصدر السخية. فهو يجعل عملية مراجعة العلاقات العامة مع التغييرات المرئية أمرًا سهلاً.
في عملية الإصدار لدينا، نعتمد بشكل كبير على اختبارات الانحدار المرئي باستخدام أدوات التطبيقات. تعد Applitoos خدمة رائعة تتميز بسهولة الاستخدام والتكامل مع اختباراتنا.
فيما يلي بعض الأمثلة على المخططات والمخططات والرسوم البيانية التي يمكن إنشاؤها باستخدام حورية البحر. انقر هنا للانتقال إلى بناء جملة النص.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] مخطط انسيابي LR
أ[صعب] -->|نص| ب (جولة)
ب --> ج{القرار}
ج -->|واحد| د [النتيجة 1]
ج -->|اثنان| ه[النتيجة 2] تحميلsequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
مخطط تسلسل
أليس->>جون: مرحبًا جون، كيف حالك؟
حلقة التحقق من الصحة
جون->>جون: محاربة الوسواس المرضي
نهاية
لاحظ حق يوحنا: أفكار عقلانية!
جون-->>أليس: عظيم!
جون->>بوب: ماذا عنك؟
بوب-->>جون: جولي جيدة! تحميلgantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d
جانت
قسم القسم
اكتمل :تم، des1، 2014-01-06،2014-01-08
نشط :نشط، des2، 2014-01-07، 3D
الموازي 1: des3، بعد des1، 1d
الموازي 2: des4، بعد des1، 1d
الموازي 3: des5، بعد des3، 1d
الموازي 4: des6، بعد des4، 1d تحميلclassDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
} classDiagram
Class01 <|-- AveryLongClass : رائع
<<الواجهة>> Class01
Class09 --> C2: أين أنا؟
Class09 --* C3
Class09 --|> Class07
Class07: يساوي ()
Class07: كائن [] elementData
فئة01: الحجم ()
Class01: إنت الشمبانزي
Class01: إنت الغوريلا
فئة كلاس10 {
<<الخدمة>>
معرف كثافة العمليات
مقاس()
} تحميلstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
مخطط الحالة-v2
[*] --> لا يزال
لا يزال --> [*]
ما زال --> يتحرك
متحرك --> لا يزال
التحرك -> تحطم
العطل --> [*] تحميلpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
فطيرة
"الكلاب" : 386
"القطط": 85.9
"الفئران": 15 تحميلgantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
جانت
مشكلات Git - الأيام منذ آخر تحديث
تنسيق التاريخ X
تنسيق المحور %s
قسم العدد 19062
71 : 0, 71
قسم العدد 19401
36 : 0, 36
الجزء رقم 193
34 : 0, 34
قسم العدد 7441
9 : 0, 9
القسم العدد 1300
5 : 0, 5 تحميلjourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
رحلة
العنوان يوم عملي
قسم الذهاب إلى العمل
صنع الشاي: 5: أنا
اصعد إلى الطابق العلوي: 3: أنا
قم بالعمل: 1: أنا، كات
قسم العودة إلى المنزل
اذهب إلى الطابق السفلي: 5: أنا
اجلس: 3: أنا تحميلC4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4Context
عنوان مخطط سياق النظام لنظام الخدمات المصرفية عبر الإنترنت
الشخص (العميل أ، "عميل البنك أ"، "عميل البنك، الذي لديه حسابات مصرفية شخصية.")
الشخص (العميل ب، "عميل الخدمات المصرفية ب")
Person_Ext(customerC، "عميل الخدمات المصرفية C")
System(SystemAA، "نظام الخدمات المصرفية عبر الإنترنت"، "يسمح للعملاء بعرض معلومات حول حساباتهم المصرفية وإجراء الدفعات.")
Person(customerD, "Banking Customer D"، "عميل البنك، <br/> لديه حسابات مصرفية شخصية.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System"، "يخزن كافة المعلومات المصرفية الأساسية حول العملاء والحسابات والمعاملات وما إلى ذلك.")
System_Boundary(b2, "BankBoundary2") {
النظام (النظام أ، "النظام المصرفي أ")
System(SystemB، "Banking System B"، "نظام البنك، مع الحسابات المصرفية الشخصية.")
}
System_Ext(SystemC، "نظام البريد الإلكتروني"، "نظام البريد الإلكتروني الداخلي لـ Microsoft Exchange.")
SystemDb(SystemD، "قاعدة بيانات النظام المصرفي D"، "نظام البنك، مع الحسابات المصرفية الشخصية.")
الحدود (b3، "BankBoundary3"، "الحدود") {
SystemQueue(SystemF، "Banking System F Queue"، "نظام البنك، مع الحسابات المصرفية الشخصية.")
SystemQueue_Ext(SystemG، "Banking System G Queue"، "نظام البنك، مع الحسابات المصرفية الشخصية.")
}
}
BiRel(customerA، SystemAA، "الاستخدامات")
BiRel(SystemAA، SystemE، "الاستخدامات")
Rel(SystemAA، SystemC، "يرسل رسائل البريد الإلكتروني"، "SMTP")
Rel(SystemC, customerA, "يرسل رسائل بريد إلكتروني إلى") تحميللمن لديه الإذن بذلك:
قم بتحديث رقم الإصدار في package.json .
نشر npm
يقوم الأمر أعلاه بإنشاء ملفات في مجلد dist ونشرها على https://www.npmjs.com.
واجهة سطر الأوامر
محرر مباشر
خادم HTTP
يعد Mermaid مجتمعًا متناميًا ويقبل دائمًا مساهمين جدد. هناك الكثير من الطرق المختلفة للمساعدة ونحن نبحث دائمًا عن أيادي إضافية! انظر إلى هذه المشكلة إذا كنت تريد معرفة من أين تبدأ المساعدة.
يمكن العثور على معلومات تفصيلية حول كيفية المساهمة في دليل المساهمة
بالنسبة للمواقع العامة، قد يكون من المحفوف بالمخاطر استرداد النص من المستخدمين على الإنترنت، وتخزين هذا المحتوى لعرضه في المتصفح في مرحلة لاحقة. والسبب هو أن محتوى المستخدم يمكن أن يحتوي على نصوص برمجية ضارة مضمنة سيتم تشغيلها عند تقديم البيانات. بالنسبة لحورية البحر، يعد هذا خطرًا، خاصة وأن مخططات حورية البحر تحتوي على العديد من الأحرف المستخدمة في لغة HTML مما يجعل الصرف الصحي القياسي غير قابل للاستخدام لأنه يكسر المخططات أيضًا. ما زلنا نبذل جهدًا لتطهير التعليمات البرمجية الواردة ومواصلة تحسين العملية ولكن من الصعب ضمان عدم وجود ثغرات في الحلقة.
كمستوى إضافي من الأمان للمواقع التي تضم مستخدمين خارجيين، يسعدنا تقديم مستوى أمان جديد يتم فيه عرض الرسم التخطيطي في إطار iframe معزول يمنع تنفيذ جافا سكريبت في التعليمات البرمجية. هذه خطوة رائعة للأمام لتحسين الأمان.
لسوء الحظ، لا يمكنك الحصول على كعكة وتناولها في نفس الوقت، وهو ما يعني في هذه الحالة أنه سيتم حظر بعض الوظائف التفاعلية بالإضافة إلى التعليمات البرمجية الضارة المحتملة.
للإبلاغ عن ثغرة أمنية، يرجى إرسال بريد إلكتروني إلى [email protected] مع وصف المشكلة، والخطوات التي اتخذتها لإنشاء المشكلة، والإصدارات المتأثرة، وإذا كانت معروفة، وسائل تخفيف المشكلة.
ملاحظة سريعة من كنوت سفيدكفيست:
شكرًا جزيلاً لمشروعي d3 وdagre-d3 لتوفير التخطيط الرسومي ومكتبات الرسم!
شكرًا أيضًا لمشروع js-sequence-diagram لاستخدام القواعد في مخططات التسلسل. شكرًا لجيسيكا بيتر على الإلهام ونقطة البداية لعرض جانت.
شكرًا لتايلر لونج الذي كان متعاونًا منذ أبريل 2017.
شكرًا لقائمة المساهمين المتزايدة باستمرار والتي أوصلت المشروع إلى هذا الحد!
تم إنشاء Mermaid بواسطة Knut Sveidqvist لتسهيل التوثيق.
