# Mermaid 要件図のチートシート

要件と、その種類、そしてそれを満たすもの。

## 要件

すべては波括弧の中に置きます。id、text、risk、verifymethod の 4 フィールドです。

```mermaid
requirementDiagram
  requirement checkout_req {
    id: 1
    text: Orders must be payable online.
    risk: high
    verifymethod: test
  }
```

![checkout_req とラベルされた要件箱。ID 1、text は Orders must be payable online、risk は High、verification は Test と並んでいます。](/diagrams/requirement/requirement.svg)

## 要件の種類

id の前のキーワードが種類を示します。functional、performance、interface、physical、あるいは設計上の制約です。

```mermaid
requirementDiagram
  functionalRequirement payment_req {
    id: 1.1
    text: Card payments must be authorised.
    risk: high
    verifymethod: test
  }
  performanceRequirement response_req {
    id: 1.2
    text: Pages must load in under a second.
    risk: medium
    verifymethod: analysis
  }
  interfaceRequirement api_req {
    id: 1.3
    text: The payment API must stay stable.
    risk: low
    verifymethod: inspection
  }
```

![横並びの要件箱 3 つ。機能要件、性能要件、インターフェース要件が、それぞれ自分の id、text、risk、検証方法を持っています。](/diagrams/requirement/kinds.svg)

## エレメント

エレメントは、要件が語っている、システムの外にある対象です。type がその種類を示し、docRef がそこを指します。

```mermaid
requirementDiagram
  requirement checkout_req {
    id: 1
    text: Orders must be payable online.
    risk: high
    verifymethod: test
  }
  element checkout_service {
    type: service
    docRef: reqs/checkout
  }
```

![要件箱の隣にサービスとマークされたエレメント箱があり、reqs/checkout を指す文書参照を持っています。](/diagrams/requirement/elements.svg)

## 関係

矢印のあいだの語が関係です。contains、satisfies、verifies、traces、derives、refines、copies。

```mermaid
requirementDiagram
  requirement checkout_req {
    id: 1
    text: Orders must be payable online.
    risk: high
    verifymethod: test
  }
  functionalRequirement payment_req {
    id: 1.1
    text: Card payments must be authorised.
    risk: high
    verifymethod: test
  }
  element checkout_service {
    type: service
  }
  checkout_req - contains -> payment_req
  checkout_service - satisfies -> payment_req
  checkout_service - verifies -> payment_req
```

![要件箱と機能要件箱が contains 関係で結ばれ、エレメント箱が satisfies と verifies で両方に繋がっています。](/diagrams/requirement/relations.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。