# Mermaid ウォードレー図のチートシート

コンポーネントが見えやすさと進化のうえでどこに置かれるか。

## コンポーネントを置く

コンポーネントは名前と 2 つの数字です。どれだけ見えるか、どれだけ進んでいるか。

```mermaid
wardley-beta
    title Tea shop
    anchor Business [0.95, 0.63]
    component Tea [0.63, 0.81]
    component Kettle [0.43, 0.35]
```

![ウォードレー図。タイトルが Tea shop で、右上近くに Business というアンカーがあり、Tea と Kettle がグリッド上に置かれています。](/diagrams/wardley/basic.svg)

## 何が何に依存するか

矢印は、必要な側から必要なものへ。

```mermaid
wardley-beta
    title Tea shop
    anchor Business [0.95, 0.63]
    component Cup of Tea [0.79, 0.61]
    component Tea [0.63, 0.81]
    Business -> Cup of Tea
    Cup of Tea -> Tea
```

![ウォードレー図。Business、Cup of Tea、Tea がグリッド上にあり、1 つ目が 2 つ目を、2 つ目が 3 つ目を指しています。](/diagrams/wardley/links.svg)

## コンポーネントを移す

evolve はマップ全体を書き直さずに、コンポーネントを進化軸に沿って滑らせます。

```mermaid
wardley-beta
    title Tea shop
    component Kettle [0.43, 0.35]
    component Power [0.10, 0.70]
    Kettle -> Power
    evolve Kettle 0.62
    evolve Power 0.89
```

![ウォードレー図。Kettle と Power がグリッド上にあり、Kettle はより右へ、Power はいちばん右へ移っています。](/diagrams/wardley/evolve.svg)

## Mernyx で描いてみる

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