عارض ومحرر مخططات C4

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title System Context diagram for Internet Banking System

Person(customer, "عميل البنك", "عميل يملك حسابات مصرفية شخصية.")
System(banking_system, "نظام الإنترنت البنكي", "يسمح للعملاء بعرض معلومات حساباتهم وتنفيذ المدفوعات.")
System_Ext(mail_system, "نظام البريد الإلكتروني", "نظام البريد الداخلي من نوع Microsoft Exchange.")
System_Ext(mainframe, "النظام البنكي الرئيسي", "يخزن كافة معلومات الحسابات والمعاملات.")

Rel(customer, banking_system, "يستخدم")
Rel(banking_system, mail_system, "يرسل رسائل بريد إلكتروني عبر")
Rel(banking_system, mainframe, "يستخدم")
@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Container diagram for Internet Banking System

Person(customer, "عميل البنك", "عميل يملك حسابات مصرفية شخصية.")

System_Boundary(c1, "نظام الإنترنت البنكي") {
    Container(web_app, "تطبيق الويب", "Java وSpring MVC", "يعرض المحتوى الثابت وتطبيق SPA البنكي.")
    Container(spa, "تطبيق صفحة واحدة", "JavaScript وAngular", "يقدم الوظائف البنكية للعملاء.")
    Container(mobile_app, "تطبيق الجوال", "Xamarin", "يقدم جزءاً من الوظائف البنكية.")
    Container(api, "تطبيق API", "Java وSpring MVC", "يوفر وظائف بنكية عبر JSON/HTTPS.")
    Container(database, "قاعدة البيانات", "Oracle", "يخزن بيانات التسجيل وسجلات الدخول.")
}

System_Ext(mainframe, "النظام البنكي الرئيسي", "يحتوي على البيانات الأساسية.")
System_Ext(email, "نظام البريد الإلكتروني", "Microsoft Exchange.")

Rel(customer, web_app, "يستخدم", "HTTPS")
Rel(customer, spa, "يستخدم", "HTTPS")
Rel(customer, mobile_app, "يستخدم")
Rel(web_app, spa, "يعرض عبر المتصفح")
Rel(spa, api, "ينفذ استدعاءات API", "JSON/HTTPS")
Rel(mobile_app, api, "ينفذ استدعاءات API", "JSON/HTTPS")
Rel(api, database, "يقرأ ويكتب", "JDBC")
Rel(api, mainframe, "يتصل عبر", "XML/HTTPS")
Rel(api, email, "يرسل بريد إلكتروني")
@enduml

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "مدير النظام", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "النظام التجريبي", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "تطبيق ويب", "C#, ASP.NET Core", $descr="لمقارنة جداول تويتر", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "تويتر", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "يستخدم", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "يحصل على التغريدات من", "HTTPS", $link="https://plantuml.com/link")
@enduml