Nomnoml

Nomnoml هي أداة خفيفة لرسم مخططات UML من صيغة نصية بسيطة. تدعم مخططات الفئات وآلات الحالة وحالات الاستخدام والتسلسل الهرمي للحزم والمزيد — كل ذلك بدون أي محرر رسومي.

في Moraya، ضع تعريف Nomnoml داخل كتلة أكواد محاطة بعلامة اللغة nomnoml، وسيقوم المحرر بعرض المخطط تلقائياً.

للاطلاع على المرجع الكامل للصيغة، راجع موقع Nomnoml الرسمي.

نظرة عامة على الصيغة

الاتصالات

تُعرَّف العُقد بأقواس مربعة: [ClassName]. يتم ربطها بأسهم:

أنواع المصنّفات

أضف كلمة مفتاحية للمصنّف داخل أقواس العقدة لتغيير نمطها المرئي:

التوجيهات

تحكّم في التخطيط والتنسيق باستخدام توجيهات # في أعلى المخطط:

أمثلة

مخطط فئات بسيط

تسلسل هرمي أساسي من ثلاث فئات يُظهر الوراثة.

```nomnoml
[Animal|
  name: string;
  age: int
  |
  speak(): void;
  move(): void
]

[Dog] --> [Animal]
[Cat] --> [Animal]
```

فئة مع خصائص ودوال

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

```nomnoml
#direction: right

[<abstract> BaseModel|
  id: UUID;
  createdAt: Date;
  updatedAt: Date
  |
  save(): Promise;
  delete(): void;
  toJSON(): object
]

[User|
  email: string;
  passwordHash: string;
  role: Role
  |
  authenticate(password: string): boolean;
  generateToken(): string;
  resetPassword(): void
]

[User] -:> [BaseModel]
[User] -> [Role]

[<note> Role is an enum:\nadmin, editor, viewer]
```

مخطط الحزم / الوحدات

يُصوّر هيكل الوحدات لتطبيق Node.js خلفي.

```nomnoml
#direction: down
#spacing: 80

[<package> App|
  [<package> Routes|
    [authRouter]
    [apiRouter]
    [webhookRouter]
  ]
  [<package> Services|
    [AuthService]
    [UserService]
    [EmailService]
  ]
  [<package> Data|
    [<database> PostgreSQL]
    [<database> Redis]
  ]
]

[authRouter] --> [AuthService]
[apiRouter] --> [UserService]
[AuthService] --> [PostgreSQL]
[AuthService] --> [Redis]
[UserService] --> [PostgreSQL]
[EmailService] --> [UserService]
```

مخطط آلة الحالة

نمذجة دورة حياة طلب في نظام تجارة إلكترونية.

```nomnoml
#direction: right

[<start> s] -> [<state> Created]
[<state> Created] -> [<state> Paid]
[<state> Created] -> [<state> Cancelled]
[<state> Paid] -> [<state> Shipped]
[<state> Paid] -> [<state> Refunded]
[<state> Shipped] -> [<state> Delivered]
[<state> Shipped] -> [<state> Returned]
[<state> Delivered] -> [<end> e]
[<state> Cancelled] -> [<end> e]
[<state> Refunded] -> [<end> e]
[<state> Returned] -> [<state> Refunded]
```

مخطط قاعدة البيانات

عرض كيان-علاقة لقاعدة بيانات منصة مدونات.

```nomnoml
#direction: right
#spacing: 70

[<table> users|
  id: PK int|
  username: varchar|
  email: varchar|
  created_at: timestamp
]

[<table> posts|
  id: PK int|
  author_id: FK int|
  title: varchar|
  body: text|
  status: enum|
  published_at: timestamp
]

[<table> comments|
  id: PK int|
  post_id: FK int|
  user_id: FK int|
  content: text|
  created_at: timestamp
]

[<table> tags|
  id: PK int|
  name: varchar
]

[<table> post_tags|
  post_id: FK int|
  tag_id: FK int
]

[users] 1 <-> * [posts]
[posts] 1 <-> * [comments]
[users] 1 <-> * [comments]
[posts] <-> [post_tags]
[tags] <-> [post_tags]
```

مخطط حالات الاستخدام

نمذجة التفاعلات في نظام مصرفي إلكتروني.

```nomnoml
#direction: right

[<actor> Customer]
[<actor> Admin]

[<usecase> View Balance]
[<usecase> Transfer Funds]
[<usecase> Pay Bills]
[<usecase> View Statements]
[<usecase> Manage Users]
[<usecase> Generate Reports]
[<usecase> Authenticate]

[Customer] -> [View Balance]
[Customer] -> [Transfer Funds]
[Customer] -> [Pay Bills]
[Customer] -> [View Statements]
[Admin] -> [Manage Users]
[Admin] -> [Generate Reports]

[View Balance] --> [Authenticate]
[Transfer Funds] --> [Authenticate]
[Pay Bills] --> [Authenticate]
[Manage Users] --> [Authenticate]
```

بنية MVC

يوضح نمط Model-View-Controller مع تعليقات تدفق البيانات.

```nomnoml
#direction: right
#spacing: 100

[<frame> MVC Architecture|
  [View|
    HTML Templates;
    UI Components
    |
    render(data): void;
    handleEvent(e): void
  ]

  [Controller|
    RequestHandler;
    Middleware
    |
    processRequest(): void;
    validateInput(): void;
    sendResponse(): void
  ]

  [Model|
    Entity Classes;
    Business Logic
    |
    findById(id): Entity;
    create(data): Entity;
    update(data): Entity
  ]

  [<database> Database]

  [View] user action -> [Controller]
  [Controller] update model -> [Model]
  [Model] notify -> [View]
  [Model] query -> [Database]
]
```