Nomnoml

Nomnomlは、シンプルなテキストベースの構文からUMLダイアグラムを描画する軽量ツールです。クラス図、ステートマシン、ユースケース、パッケージ階層など、グラフィカルエディタなしで作成できます。

Morayaでは、Nomnomlの定義を言語タグ nomnoml のフェンスドコードブロック内に記述すると、エディタがダイアグラムを自動的にレンダリングします。

完全な構文リファレンスについては、Nomnoml公式サイトを参照してください。

構文の概要

接続

ノードは角括弧で定義されます：[ClassName]。矢印で接続します：

分類子タイプ

ノードの角括弧内に分類子キーワードを追加して、視覚スタイルを変更します：

ディレクティブ

ダイアグラムの先頭で # ディレクティブを使用してレイアウトとスタイルを制御します：

使用例

シンプルなクラス図

継承を示す基本的な3クラスの階層構造です。

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

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

属性とメソッドを持つクラス

Webアプリケーションのユーザーモデルにおける、型付きフィールドと戻り値の型を持つより詳細なクラス図です。

```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]
```

ステートマシン図

ECサイトにおける注文のライフサイクルをモデル化します。

```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]
]
```