mermaid`
flowchart TD
A["📦 موقع حصر الأجهزة"] --> B["🔐 تسجيل الدخول"]
A --> C["🛠 إدارة الأجهزة"]
A --> D["📣 البلاغات"]
A --> E["👤 إدارة المستخدمين"]
B --> B1["التحقق من الاسم"]
B --> B2["التحقق من كلمة المرور"]
C --> C1["إضافة جهاز"]
C --> C2["تعديل جهاز"]
C --> C3["عرض الأجهزة"]
C --> C4["إضافة صيانة"]
C --> C5["إضافة صيانة دورية"]
D --> D1["رفع بلاغ"]
D --> D2["عرض البلاغات"]
E --> E1["إضافة مستخدم"]
E --> E2["تعديل بيانات"]
E --> E3["تغيير كلمة المرور"]
classDef login fill:#FFDD99,stroke:#FF9900,stroke-width:2px,color:#000
classDef devices fill:#B2F0B2,stroke:#33AA33,stroke-width:2px,color:#000
classDef reports fill:#BBDEFB,stroke:#3399FF,stroke-width:2px,color:#000
classDef users fill:#F8BBD0,stroke:#CC6699,stroke-width:2px,color:#000
classDef main fill:#D1C4E9,stroke:#673AB7,stroke-width:3px,color:#000
class A main
class B,B1,B2 login
class C,C1,C2,C3,C4,C5 devices
class D,D1,D2 reports
class E,E1,E2,E3 users
`
mermaid`sequenceDiagram
"Actor A" ->> "Actor B": ${message}
"Actor B" -->> "Actor A": response
`
mermaid`gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
`
mermaid`classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
`
mermaid`stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
