# Mermaid Requirement Diagram Cheat Sheet

Requirements, their kinds, and what satisfies them.

## A requirement

Everything sits inside curly braces. id, text, risk and verifymethod are the four fields.

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

![A requirement box labelled checkout_req, listing ID 1, the text Orders must be payable online, risk High and verification Test.](/diagrams/requirement/requirement.svg)

## The kinds of requirement

The keyword before the id says what sort it is: functional, performance, interface, physical or a design constraint.

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

![Three requirement boxes side by side: a functional requirement, a performance requirement and an interface requirement, each with its own id, text, risk and verification method.](/diagrams/requirement/kinds.svg)

## Elements

An element is the thing outside the system that a requirement talks about. type says what it is, docRef points at it.

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

![A requirement box next to an element box marked as a service, carrying a document reference to reqs/checkout.](/diagrams/requirement/elements.svg)

## Relations

The word between the arrows is the relation: contains, satisfies, verifies, traces, derives, refines and 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
```

![A requirement box and a functional requirement box joined by a contains relation, with an element box linked to both by satisfies and verifies.](/diagrams/requirement/relations.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.