أدوات رسم المخططات Diagrams: مقارنة عملية

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

المواضيع في السلسلة:

• المخططات التقنية Diagrams: ماذا ترسم ومتى؟
• أدوات رسم المخططات Diagrams: مقارنة عملية (الموضوع الحالي)
• Excalidraw على سيرفرك مع الرسم المشترك

وفي هذا المقال سوف نتناول:

• المعايير التي نقارن عليها، ولماذا يأتي الترخيص والاستضافة قبل شكل الرسم.
• أدوات الرسم على لوحة: Excalidraw وdraw.io وtldraw، مع نقاط القوة ونقاط الضعف لكل منها.
• أدوات المخططات ككود: Mermaid وPlantUML وD2، مع الأوامر التي شغلناها في Docker.
• الخدمات التجارية Miro وLucidchart وVisio باختصار، وبأسعارها الرسمية.
• اختبار العربية الفعلي في ست أدوات بنفس المخطط، وكيف تصلح كل مشكلة ظهرت.
• جدول المقارنة الكامل، وكيف تختار.

والأداة التي لها دليل تثبيت كامل على الموقع حتى الآن:

دليلExcalidraw على سيرفرك مع الرسم المشترككيف تبني Excalidraw وخادم الغرف على سيرفرك لترسم مع فريقك في نفس اللوحة دون أن يمر رسمك بخدمة خارجية.

على ماذا نقارن؟

من السهل أن تقارن الأدوات بشكل الرسم، ولكن الشكل آخر ما يسبب مشكلة بعد سنة، والذي يسبب المشكلة هو أين تعيش المخططات ومن يملكها، لذلك سوف نقارن على المعايير التالية:

• الترخيص License: هل الكود مفتوح المصدر Open Source بترخيص معروف، أم متاح للقراءة فقط ويحتاج مفتاحاً للاستخدام في الإنتاج، أم خدمة تجارية مغلقة.
• الاستضافة الذاتية Self-hosting: هل تستطيع تشغيل الأداة على سيرفرك بحيث لا يخرج مخطط الشبكة الداخلية من شبكتك، وما الذي يبقى معتمداً على خدمات الشركة حتى بعد التثبيت.
• الرسم المشترك Real-time Collaboration: هل يرسم شخصان على نفس اللوحة في نفس اللحظة، وهل يعمل ذلك في النسخة المستضافة على سيرفرك.
• إدارة النسخ Version Control: هل الملف نص يظهر تغييره في الـ diff، أم ملف تفتحه الأداة فقط.
• العربية Arabic: الحروف والخط وترتيب الكلمات المختلطة، وقد اختبرناها فعلياً كما سيأتي.
• صيغ التصدير Export Formats: PNG وSVG وPDF، وهل يبقى المخطط قابلاً للتعديل بعد التصدير.

والصورة التالية تضع الأدوات على محورين: كيف ترسم، وأين يعيش المخطط:

أدوات الرسم على لوحة Canvas

Excalidraw: سبورة Whiteboard بخط اليد

Excalidraw سبورة بيضاء Whiteboard مفتوحة المصدر بترخيص MIT، تعمل كلها داخل المتصفح، وشكل رسمها يشبه خط اليد عن قصد، لذلك هي الأداة الأشهر لرسم النقاش في اجتماعات التصميم وللرسومات التوضيحية في المقالات. والرسم المشترك فيها مشفر من طرف إلى طرف End-to-End Encryption، حيث يبقى المفتاح في الرابط بعد علامة # ولا يصل إلى السيرفر، كما يشرح مقال الفريق عن التشفير.

نقاط القوة:

• لا يحتاج حساباً ولا تثبيتاً لتبدأ، والملف .excalidraw نص JSON يحفظ في المستودع.
• رسم مشترك مشفر، والسيرفر الذي يمرر الرسائل لا يستطيع قراءتها، وقد رأينا ذلك في سجلاته عند التجربة.
• التصدير إلى PNG وSVG مع خيار Embed scene الذي يضع الرسم داخل الصورة فتعود وتعدله.
• الواجهة كلها ملفات ثابتة Static Files على nginx، والـ Container استهلك في تجربتنا أقل من 15 ميجابايت من الذاكرة.

نقاط الضعف:

• الـ Docker Image الرسمية excalidraw/excalidraw ليس لها إلا الوسم latest، وآخر رفع لها في 6 مايو 2026، وعندما بحثنا داخل ملفاتها وجدنا أن الرسم المشترك يتصل بخادم الشركة oss-collab.excalidraw.com، لذلك فتشغيلها على سيرفرك يبقي الواجهة عندك، أما الجلسات المشتركة فتمر بخادم الشركة.
• لكي يعمل الرسم المشترك على سيرفرك يجب أن تبني الـ Image بنفسك من الكود، لأن عنوان خادم الغرف يكتب داخل ملفات الواجهة وقت البناء.
• خادم الغرف excalidraw-room لا يحفظ شيئاً، فإذا خرج آخر شخص من الغرفة ضاع الرسم إلا إذا حفظه أحدهم، والحفظ الدائم في النسخة الرسمية يعتمد على Firebase.
• العربية تظهر بخط النظام وليس بخط اليد، لأن خطوط الأداة لا تحتوي الحروف العربية.
• ليست مناسبة لمخطط شبكة مفصل بمئات الأشكال وأيقونات السحابة.

والنسخة التجارية Excalidraw+ تضيف مساحة للفريق وحفظاً دائماً للمشاهد، وسعرها 6 دولارات للمستخدم شهرياً، مع خطة مجانية فيها مشهد واحد.

draw.io: المخطط التقني المفصل

draw.io، والذي كان اسمه diagrams.net، أداة رسم مخططات كاملة، كودها بترخيص Apache-2.0، وفيها مكتبات أشكال كبيرة للشبكات والسحابة وUML وBPMN، لذلك هي الخيار المعتاد لمخطط الشبكة ومخطط النشر المفصل. وتشغيلها على سيرفرك سهل عبر الـ Docker Image الرسمية، وقد شغلناها بالأمر التالي:

docker run -d --name drawio -p 127.0.0.1:8080:8080 jgraph/drawio:32.5.5

وبعد ثوان فتحنا http://localhost:8080/?lang=ar فظهرت الواجهة بقوائم عربية، ورسمنا فيها نفس المخطط الذي استخدمناه في اختبار العربية:

نقاط القوة:

• أكبر مكتبة أشكال بين الأدوات المفتوحة، ودقة كاملة في موقع كل شكل وكل خط.
• الحفظ داخل PNG وSVG، حيث تسمي صفحة صيغ الملفات هذه الملفات قابلة للتعديل Editable، فتضع الصورة في الـ README ويعدلها من يأتي بعدك.
• الواجهة مترجمة إلى العربية، والنص العربي يعرض بشكل صحيح بعد ضبط اتجاهه.
• الملف .drawio نص XML يدخل المستودع.

نقاط الضعف:

• يقول ملف README في المستودع صراحة إن هذه النسخة لا تدعم التعديل المشترك في الوقت نفسه Real-time Collaborative Editing، وإنها نسخة للتجربة والتقييم، وإن هناك نسخة إنتاج مدفوعة، وقد وجدنا داخل الـ Container أن إعداد المزامنة مضبوط على sync = manual.
• خادم التصدير المنفصل jgraph/export-server انتهى دعمه، فتصدير PDF في النسخة المستضافة يمر عبر نافذة الطباعة في المتصفح، أما PNG وSVG فيعملان من المتصفح كالمعتاد.
• ملف XML يتغير بالكامل تقريباً عند تحريك شكل واحد، فالـ diff موجود ولكنه لا يقرأ بسهولة.
• الـ Image حجمها 1.26 جيجابايت لأنها تعمل على Tomcat، واستهلكت في تجربتنا 321 ميجابايت من الذاكرة.

tldraw: لوحة لتطبيقك أنت

tldraw لوحة رسم بيضاء مشابهة لـ Excalidraw في الشكل، ولكن الفرق الأهم في الترخيص، فهي في الأساس مكتبة SDK يضعها المطورون داخل تطبيقاتهم، والكود متاح على GitHub ولكن ترخيص tldraw يسمح بالاستخدام في التطوير فقط، أما التشغيل في الإنتاج Production فيحتاج مفتاح ترخيص License Key: تجربة مجانية لمدة 100 يوم، أو ترخيص تجاري تطلب سعره من فريق المبيعات كما في صفحة الأسعار، أو ترخيص هواة Hobby مجاني للمشاريع غير التجارية بشرط أن تظهر علامة «made with tldraw» على اللوحة.

نقاط القوة: تجربة رسم ممتازة، والنص يأخذ الاتجاه تلقائياً فيظهر العربي صحيحاً، والتطبيق المجاني tldraw.com يكفي لرسم سريع، والـ SDK مناسب إذا كنت تبني منتجاً فيه لوحة رسم.

نقاط الضعف: لا توجد نسخة جاهزة رسمية تثبتها على سيرفرك كتطبيق للفريق، والترخيص ليس مفتوح المصدر، فإذا كان هدفك أداة داخلية لفريقك فـ Excalidraw أو draw.io أنسب.

أدوات المخططات ككود Diagram as Code

استخدمنا في الأدوات الثلاث نفس المخطط: مستخدم يرسل طلباً إلى خادم، والخادم يكتب في قاعدة بيانات ويرسل رسالة إلى طابور، وكل تسمية عربية ومعها المصطلح الإنجليزي، وشغلنا كل أداة من الـ Docker Image الرسمية لها، فلا تحتاج تثبيت Java أو Node.js أو Go على جهازك.

Mermaid: الأقرب إلى Markdown

Mermaid مكتبة JavaScript بترخيص MIT تحول نصاً بسيطاً إلى مخطط، وميزتها الكبرى أن GitHub يعرضها مباشرة داخل ملفات Markdown، وكذلك GitLab وكثير من أدوات التوثيق، فلا تحتاج أن تحول الملف إلى صورة أصلاً. وهذا ملف مخطط التدفق الذي استخدمناه:

flowchart LR
    user["المستخدم User"] -->|طلب HTTPS| api["الخادم API Server"]
    api -->|SQL| db[("قاعدة البيانات Database")]
    api -.->|رسالة| queue["الطابور Queue"]

ولتحويله إلى صورة خارج GitHub نستخدم mermaid-cli:

docker run --rm -v "$PWD":/data minlag/mermaid-cli:12.0.1 \
  -i flow.mmd -o flow-mermaid.png -s 2 -b white

والمخرج سوف يكون كما يلي:

Generating single mermaid chart

نقاط القوة: أوسع انتشار بين أدوات المخططات ككود، وأنواع كثيرة: التدفق والتسلسل وERD والحالة State وGantt وC4، والصيغة سهلة التعلم، ويوجد نسخة تجارية مستضافة Mermaid Chart فيها محرر مرئي، وخطتها المجانية Basic ثم Plus بـ 10 دولارات وPremium بـ 20 دولاراً للمستخدم شهرياً.

نقاط الضعف: التحكم في موقع العناصر محدود، والمخطط الكبير يصبح متشابكاً، والـ Docker Image لأداة التحويل كبيرة جداً، 3.53 جيجابايت، لأنها تحمل متصفح Chromium كاملاً، وكل تحويل استغرق في تجربتنا حوالي 15 ثانية بسبب تشغيل المتصفح. ولاحظ أن الـ Image ذات الوسم 12.0.1 تحمل في داخلها mermaid-cli ومكتبة mermaid بالإصدار 12.0.0.

PlantUML: الأقدم والأشمل في UML

PlantUML أداة Java قديمة ومعروفة، تغطي أنواع UML كلها تقريباً، وهي متاحة بعدة تراخيص تختار منها: GPL وLGPL وApache وEPL وMIT، كما في ملف README في المستودع. وهذا نفس المخطط بصيغتها:

@startuml
left to right direction
actor "المستخدم User" as user
rectangle "الخادم API Server" as api
database "قاعدة البيانات Database" as db
queue "الطابور Queue" as q
user --> api : طلب HTTPS
api --> db : SQL
api ..> q : رسالة
@enduml

docker run --rm -v "$PWD":/data -w /data plantuml/plantuml:1.2026.9 -tpng -Sdpi=200 flow.puml
docker run --rm plantuml/plantuml:1.2026.9 -version

والمخرج للأمر الثاني:

PlantUML version 1.2026.9 / 18d0aae [2026-10-17 08:25:10 UTC]
(GPL source distribution)

نقاط القوة: أكبر عدد من أنواع المخططات، ومكتبة C4-PlantUML المعروفة لمخططات المعمارية، والعربية ظهرت صحيحة في اختبارنا دون أي إعداد.

نقاط الضعف: الشكل الافتراضي قديم المظهر، والصيغة تختلف من نوع مخطط إلى آخر فتحتاج وقتاً لتتعلمها، والتشغيل يحتاج Java أو الـ Docker Image التي حجمها 508 ميجابايت، وGitHub لا يعرضها مباشرة كما يعرض Mermaid.

D2: لغة حديثة بشكل أنظف

D2 لغة مخططات حديثة مكتوبة بلغة Go وبترخيص MPL-2.0، شكلها الافتراضي أنظف من الأداتين السابقتين، وفيها ثلاثة محركات ترتيب كما في صفحة الـ Layouts، وقد وجدنا الثلاثة مضمنة في الإصدار v0.9.0 عند تشغيل d2 layout:

dagre (bundled) - The directed graph layout library Dagre
elk (bundled) - Eclipse Layout Kernel (ELK) with the Layered algorithm.
tala (bundled) - TALA is D2's native layout and edge-routing engine.

وهذا نفس المخطط بصيغة D2:

direction: right
user: "المستخدم User" {shape: person}
api: "الخادم API Server"
db: "قاعدة البيانات Database" {shape: cylinder}
queue: "الطابور Queue" {shape: queue}
user -> api: "طلب HTTPS"
api -> db: SQL
api -> queue: "رسالة" {style.stroke-dash: 3}

docker run --rm -v "$PWD":/data -w /data terrastruct/d2:v0.9.0 flow.d2 flow-d2.png

success: successfully compiled flow.d2 to flow-d2.png in 117.897565ms

وقد يبدو من المخرج أن كل شيء تم بنجاح، ولكن عندما فتحنا الصورة وجدنا كل الحروف العربية مربعات فارغة، وسوف نرى السبب والحل في القسم التالي.

نقاط القوة: الأسرع في التحويل بفارق كبير، أقل من ثانية لكل مخطط، وصيغة واضحة، وتصدير إلى SVG وPNG وPDF وPPTX وGIF كما في صفحة التصدير.

نقاط الضعف: الخط الافتراضي لا يحتوي العربية، وانتشارها أقل من Mermaid، ولا يعرضها GitHub مباشرة.

الخدمات التجارية SaaS باختصار

هذه الخدمات لا تعمل على سيرفرك، فالمخططات تحفظ في سحابة الشركة، ولكنها معروفة ويطلبها كثير من الفرق، لذلك من المفيد أن تعرف أسعارها وما الذي تقدمه:

ولاحظ أن الخطط المجانية في Miro وLucidchart محدودة بعدد اللوحات أو المستندات، فهي للتجربة وليست لتوثيق فريق، وأن الدفع الشهري بدون التزام سنوي أغلى في Miro وLucidchart، فأسعار الجدول كلها للدفع السنوي.

اختبار العربية: نفس المخطط في ست أدوات

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

وفيما يلي ما وجدناه، وكيف أصلحنا كل مشكلة:

• Mermaid: الحروف سليمة لأن التحويل يتم في متصفح Chromium داخل الـ Image، ولكن كل تسمية تعامل كنص LTR، فيقرأ العربي «User» قبل «المستخدم». والحل في مخطط التدفق أن تضع التسمية داخل وسم HTML يحدد الاتجاه:

flowchart LR
    user["<span dir='rtl'>المستخدم User</span>"] -->|<span dir='rtl'>طلب HTTPS</span>| api["<span dir='rtl'>الخادم API Server</span>"]
    api -->|SQL| db[("<span dir='rtl'>قاعدة البيانات Database</span>")]

• وانتبه إلى أن هذه الطريقة لم تعمل في مخطط التسلسل Sequence، فقد ظهر الوسم <span dir='rtl'> كنص حرفي داخل الرسالة، لذلك في مخطط التسلسل اكتب الرسالة بالعربية وحدها، أو بالإنجليزية وحدها.
• PlantUML: الحروف والترتيب صحيحان دون أي تعديل، وهي الوحيدة بين أدوات الكود التي نجحت من أول مرة.
• D2: الخط الافتراضي Source Sans Pro لا يحتوي الحروف العربية، فظهرت مربعات. والحل أن تعطيه ملفات خط عربي بصيغة TTF، وقد استخدمنا IBM Plex Sans Arabic وهو بترخيص OFL:

docker run --rm -v "$PWD":/data -w /data terrastruct/d2:v0.9.0 \
  --font-regular fonts/IBMPlexSansArabic-Regular.ttf \
  --font-bold fonts/IBMPlexSansArabic-Bold.ttf \
  --font-semibold fonts/IBMPlexSansArabic-SemiBold.ttf \
  --font-italic fonts/IBMPlexSansArabic-Regular.ttf \
  flow2.d2 flow-d2-lines.png

• وبعد ذلك ظهرت الحروف سليمة، ولكن المسافة بين الكلمة العربية والإنجليزية ضاعت فأصبحت «الخادمAPI Server»، فوضعنا المصطلح الإنجليزي في سطر ثان بالرمز \n مثل "الخادم\nAPI Server"، فأصبح المخطط مقروءاً، وبقيت المشكلة في تسميات الأسهم.
• draw.io: الحروف سليمة لأن الرسم يتم في متصفحك، والترتيب الافتراضي LTR، ويصلحه تغيير اتجاه النص في قائمة التنسيق، أو إضافة textDirection=rtl إلى نمط Style الشكل، والواجهة نفسها تصبح عربية مع ?lang=ar، ولكنها لا تنعكس إلى اليمين.
• Excalidraw: كتبنا «سيرفر الإنتاج Production Server» فاكتشفت الأداة أن النص يبدأ بالعربية وجعلته RTL، وظهر ذلك أيضاً في ملف SVG المصدر الذي وجدنا فيه direction="rtl"، والملاحظة الوحيدة أن العربية بخط النظام.
• tldraw: النص يأخذ dir="auto" فيظهر الترتيب صحيحاً، والعربية بخط النظام كذلك.

جدول المقارنة الكامل Comparison

كيف تختار؟

• للنقاش والرسم السريع في الاجتماعات: Excalidraw، وعلى سيرفرك إذا كانت المخططات تحمل تفاصيل داخلية عن أنظمتك.
• لمخطط الشبكة والنشر المفصل: draw.io على سيرفرك، واحفظ الملفات كـ .drawio.svg داخل المستودع، وتذكر أن شخصاً واحداً يعدل الملف في كل مرة.
• للتسلسل والتدفق وERD بجانب الكود: Mermaid داخل ملفات Markdown، لأن GitHub وGitLab يعرضانه دون أي خطوة إضافية.
• لـ UML الكامل أو لفريق يعمل بالعربية في أدوات الكود: PlantUML، لأنه نجح في العربية من أول مرة.
• لمخططات كود بشكل أنظف: D2، بشرط أن تضيف خطاً عربياً إلى الـ Image التي تولد بها المخططات.
• إذا كانت الشركة كلها على Microsoft 365: Visio موجود غالباً في الخطة التي تدفع لها، فاسأل قسم تقنية المعلومات قبل أن تشتري أداة جديدة.

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

الخلاصة

وصلنا لنهاية الموضوع، وأهم ما فيه:

• قارن على الترخيص والاستضافة والرسم المشترك وGit والعربية قبل شكل الرسم، لأن هذه هي التي تسبب المشكلة بعد سنة.
• Excalidraw الأفضل للنقاش وفيه رسم مشترك مشفر، ولكن الـ Image الرسمية تتصل بخادم الشركة، والاستضافة الكاملة تحتاج بناءها بنفسك.
• draw.io الأفضل لمخطط الشبكة المفصل، ونسخته المستضافة بلا تعديل مشترك في الوقت نفسه.
• tldraw ليس مفتوح المصدر بالمعنى المعتاد، والإنتاج يحتاج مفتاح ترخيص.
• Mermaid الأوسع انتشاراً والأسهل مع GitHub، وPlantUML الأشمل والوحيد الذي نجح في العربية دون تعديل، وD2 الأنظف شكلاً والأسرع ولكنه يحتاج خطاً عربياً.
• Miro وLucidchart وVisio خدمات سحابية تبدأ من 5 إلى 9 دولارات للمستخدم شهرياً، ومخططاتك فيها على سيرفرات الشركة.

وفي المقال القادم بإذن الله سوف نبني Excalidraw على سيرفرنا مع خادم الرسم المشترك، ونرسم من متصفحين في نفس الغرفة، ثم نشغل draw.io وmermaid-cli بجانبه:

دليلExcalidraw على سيرفرك مع الرسم المشترككيف تبني Excalidraw وخادم الغرف على سيرفرك لترسم مع فريقك في نفس اللوحة دون أن يمر رسمك بخدمة خارجية.دليلالمخططات التقنية Diagrams: ماذا ترسم ومتى؟كيف تختار نوع المخطط من سؤال القارئ، ومتى ترسم باليد أو بالكود، وكيف تبقيه صحيحاً ومقروءاً بالعربية.

سجل التحديثات

• أكتوبر 2026: كتابة المقال، ومراجعة الأسعار والتراخيص من الصفحات الرسمية في 23 أكتوبر 2026، واختبار العربية على Docker Engine 29.8.0 مع jgraph/drawio:32.5.5 وminlag/mermaid-cli:12.0.1 وplantuml/plantuml:1.2026.9 وterrastruct/d2:v0.9.0 وExcalidraw من فرع release (17d8904) وtldraw.com.