DDDのUMLをMermaidで書いてみる🧜‍♀️ - Mermaid入門

# やりたいこと

DDD （ドメイン駆動設計）の UML を Mermaid で書いてみたい。
思い立ったが吉日！ ということでやってみよう🤗

良い機能があったら随時更新していきます🙋‍♀️

# 書くもの一覧

1. システム関連図
1. ユースケース図
1. オブジェクト図
1. ドメインモデル図

# システム関連図

```mermaid
graph LR
  classDef orange fill:#f96;
  accountMemo[一人につき一つの口座を割り当てる]-.-account
  customer((お客さん))-->account(口座)
  account-->bankSystem(銀行システム)
  bankMemo[入金データはcsvで取得可能]-.-bankSystem(銀行システム)
  user((経理担当者))--入金データを取得する-->bankSystem
  user-->accountingSystem(会計システム):::orange
  accountingMemo[開発するシステム]-.-accountingSystem
```

Code:
```
graph LR
  classDef orange fill:#f96;
  accountMemo[一人につき一つの振り込み用口座を割り当てる]-.-account
  customer((お客さん))-->account(口座)
  account-->bankSystem(銀行システム)
  bankMemo[入金データはcsvで取得可能]-.-bankSystem(銀行システム)
  user((経理担当者))--入金データを取得する-->bankSystem
  user-->accountingSystem(会計システム):::orange
  accountingMemo[開発するシステム]-.-accountingSystem
```
- classDef を使うと複数ノードに同一のテーマを適用できる
- -.-> で点線になる

# ユースケース図

```mermaid
graph LR
  subgraph accountingSystem[会計システム]
    get(入金データを閲覧する)
    post(入金データを個別登録する)
    subgraph target[今回のスコープ]
      posts(入金データを一括登録する)
    end
  end
  user((経理担当者))-->get
  user-->post
  user-->posts
  memo["・銀行システムから取得した入金データのcsvをアップロードする<br>・銀行ごとにフォーマットが異なる"]-.-posts
  style target stroke-dasharray: 2
```

Code:
```
graph LR
  subgraph accountingSystem[会計システム]
    get(入金データを閲覧する)
    post(入金データを個別登録する)
    subgraph target[今回のスコープ]
      posts(入金データを一括登録する)
    end
  end
  user((経理担当者))-->get
  user-->post
  user-->posts
  memo["・銀行システムから取得した入金データのcsvをアップロードする<br>・銀行ごとにフォーマットが異なる"]-.-posts
  style target stroke-dasharray: 2
```
- subgraph でグルーピングできる
- ラベルに点や括弧を使いたいときは "" で囲む
- stroke-dasharray で枠を点線にできる

# オブジェクト図

他の図で表現できないかなぁと思いつつ、良いの見当たらなかったので graph で書いてみる

```mermaid
graph LR
  subgraph customer1[ ]
    customerTaro("（お客さん）<br/>名前:山田太郎<br/>メールアドレス:taro@example.co.jp")
    paymentTaro1("(入金）<br/>入金日:2023/04/10<br/>金額:2000")
    paymentTaro2("(入金）<br/>入金日:2023/04/11<br/>金額:3000")
  end
  customerTaro-->paymentTaro1
  customerTaro-->paymentTaro2
  customerTaro-.-memo["複数回入金"]
  subgraph customer2[ ]
    customerHanako("（お客さん）<br/>名前:佐藤花子<br/>メールアドレス:hanako@example.co.jp")
    paymentHanako1("(入金）<br/>入金日:2023/04/02<br/>金額:3000")
  end
  customerHanako-->paymentHanako1
  bank("(銀行）<br/>名前:ほげ銀行<br/>銀行コード:0001")---accountTaro
  bank("(銀行）<br/>名前:ほげ銀行<br/>銀行コード:0001")---accountHanako
  accountTaro("(口座）<br/>支店コード:123<br/>口座番号:123456789")---customerTaro
  accountHanako("(口座）<br/>支店コード:123<br/>口座番号:123456780")---customerHanako
```

Code:
```
graph LR
  subgraph customer1[ ]
    customerTaro("（お客さん）<br/>名前:山田太郎<br/>メールアドレス:taro@example.co.jp")
    paymentTaro1("(入金）<br/>入金日:2023/04/10<br/>金額:2000")
    paymentTaro2("(入金）<br/>入金日:2023/04/11<br/>金額:3000")
  end
  customerTaro-->paymentTaro1
  customerTaro-->paymentTaro2
  customerTaro-.-memo["複数回入金"]
  subgraph customer2[ ]
    customerHanako("（お客さん）<br/>名前:佐藤花子<br/>メールアドレス:hanako@example.co.jp")
    paymentHanako1("(入金）<br/>入金日:2023/04/02<br/>金額:3000")
  end
  customerHanako-->paymentHanako1
  bank("(銀行）<br/>名前:ほげ銀行<br/>銀行コード:0001")---accountTaro
  bank("(銀行）<br/>名前:ほげ銀行<br/>銀行コード:0001")---accountHanako
  accountTaro("(口座）<br/>支店コード:123<br/>口座番号:123456789")---customerTaro
  accountHanako("(口座）<br/>支店コード:123<br/>口座番号:123456780")---customerHanako
```

- 本当は subgraph に向かって線を引きたい

# 🚧 ドメインモデル図 （未完成）

```mermaid
erDiagram
  BANK {
    string name "名前"
    string bankCode "銀行コード"
  }
  ACCOUNT {
    string branchCode "支店コード"
    string accountNumber "口座番号"
  }
  CUSTOMER {
    string name "名前"
    string email "メールアドレス"
  }
  PAYMENT {
    date date "入金日"
    number amount "金額"
  }
  BANK ||--|{ ACCOUNT : ""
  ACCOUNT ||--o| CUSTOMER : ""
  CUSTOMER ||--o{ PAYMENT : pay
```

Code:
```
erDiagram
  BANK {
    string name "名前"
    string bankCode "銀行コード"
  }
  ACCOUNT {
    string branchCode "支店コード"
    string accountNumber "口座番号"
  }
  CUSTOMER {
    string name "名前"
    string email "メールアドレス"
  }
  PAYMENT {
    date date "入金日"
    number amount "金額"
  }
  BANK ||--|{ ACCOUNT : ""
  ACCOUNT ||--o| CUSTOMER : ""
  CUSTOMER ||--o{ PAYMENT : pay
```
- エンティティ名に日本語を使えない
- 集約を表現したい
- 制約ルールを書きたい
- graph だと多重度をどう表現しようか

# 感想

簡単！でもできないことも多い印象💦
もし良い書き方があったらコメントよろしくです😃

# 参考

https://mermaid.js.org/intro/

https://zenn.dev/junkawa/articles/zenn-mermaidjs-theme-config