Mapa de Wardley

Evolución de los componentes de un servicio.

Definición

Un mapa de Wardley coloca los componentes de un servicio en dos ejes: en vertical, lo visibles que son para el usuario; en horizontal, lo evolucionados que están, desde la génesis hasta el producto y más allá. Las líneas unen cada componente con aquellos de los que depende. Se usa para decidir qué construir, qué comprar y qué vigilar.

Editar con tus datos SVG Spec JSON

Datos: label · x · y · parent
Buena para: Decidir qué piezas de un servicio construir y cuáles comprar según su grado de evolución y sus dependencias.
Evítala cuando: Cuando no puedes situar cada componente en la escala de evolución: el mapa obliga a declararlo.
Se lee bien: Entre 3 y 30 elementos; dibuja hasta 30
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`label` · opcional	string	El nombre del componente, junto a su punto. Es además la CLAVE que citan las dependencias, normalizada a minúsculas con guiones («ML Pipeline» ⇒ «ml-pipeline»). Sin esta columna `fromExportRows` devuelve nodos y enlaces vacíos.
`x` · opcional	number	La EVOLUCIÓN en 0–1, eje horizontal, con los cortes de las cuatro etapas. Un solo alias; si NINGUNA columna casa, la pieza FABRICA 0,5 para todos —justo en la frontera de Custom Built y Producto—. Si la columna existe pero la celda está vacía, el componente se va a 0, es decir a «Génesis», que es una afirmación fuerte hecha en silencio.
`y` · opcional	number	La VISIBILIDAD para el usuario en 0–1, eje vertical. Misma fabricación de 0,5 si la columna no está.
`parent` · opcional	string	De qué depende: una lista separada por comas de nombres de OTROS componentes, ya normalizados. Una dependencia que no exista se descarta sin dibujar la línea y sin decirlo (a diferencia de `treelayout`, aquí al menos no revienta).

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 408 × 508 px

Escritorio · 848 × 668 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Te importa lo maduro que está cada componente y no sólo su lugar en la cadena?

Si basta con ordenar las actividades que generan valor, la cadena de valor es más directa.

Sí: quédate con mapa de wardley

No: usa Cadena de valor

¿Son piezas de un servicio y no productos de una cartera?

Si sitúas productos por crecimiento y cuota, la matriz BCG es la habitual.

Sí: quédate con mapa de wardley

No: usa Matriz BCG

¿Quieres colocar las piezas en dos ejes y no sólo ver quién depende de quién?

Si lo único que importa son las dependencias, una matriz de dependencias las ordena mejor.

Sí: quédate con mapa de wardley

No: usa Matriz de estructura de diseño

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('wardleymap');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué miden los ejes?

El horizontal es la evolución, de 0 a 1, dividida en cuatro etapas; el vertical, la visibilidad para el usuario, también de 0 a 1.

¿Cómo declaro las dependencias?

En una columna con los nombres de los otros componentes separados por comas, en minúsculas y con guiones («ML Pipeline» se escribe «ml-pipeline»). Si un nombre no existe, la línea no se dibuja y no avisa.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas

Otras formas de responder «dónde se sitúa cada uno»

Guía para elegir: dónde se sitúa cada uno →