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

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

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

コンポーネントを置く

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

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 がグリッド上に置かれています。

何が何に依存するか

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

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 つ目を指しています。

コンポーネントを移す

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

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 はいちばん右へ移っています。

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

コンポーネントを置く

何が何に依存するか

コンポーネントを移す

Mernyx で描いてみる