Un mapa de Wardley es un marco potente utilizado para la estrategia empresarial con el fin de visualizar cadenas de valor y mapear la evolución de los componentes. Introducido como una característica nativa en Mermaid v11.14.0+, el wardley-betamotor permite a los equipos de estrategia, arquitectos y gerentes de productos mapear entornos de mercado utilizando texto puro. Al posicionar componentes técnicos en un espacio de coordenadas 2D, los equipos pueden analizar visualmente las dependencias de la cadena de valor, identificar la inercia del mercado y tomar decisiones estructuradas sobre construir o comprar.
Comprender el sistema de cuadrícula de coordenadas
A diferencia de los diagramas de flujo libres estándar, cada componente en un mapa de Wardley se traza en un espacio rígido de dos dimensiones basado en dos coordenadas decimales que van desde 0.0 hasta 1.0:
- Visibilidad (Eje Y / Primera coordenada): Mide cuán visible o valioso es un componente para un usuario final. Un valor de
1.0representa un punto de contacto directo con el usuario (máxima visibilidad), mientras que0.0representa una infraestructura fundamental oculta. - Evolución (Eje X / Segunda coordenada): Mide el nivel de madurez de un activo de mercado. Se desplaza de izquierda a derecha a través de cuatro fases evolutivas distintas: Génesis (0.0), Hecho a medida (0.25), Producto/Alquiler (0.5), y Commodity/Utilidad (0.75 a 1.0).
Estructura básica de sintaxis
Cada diagrama comienza con el wardley-betaencabezado de declaración. Luego estableces anclajes de usuario con el anclapalabra clave, representa los bloques de infraestructura operativa con el componentepalabra clave, y dibuja relaciones entre ellos usando flechas direccionales.
wardley-beta
título Mapa de Estrategia Simple
ancla Cliente [0.9, 0.5]
componente Sitio Web [0.7, 0.4]
Cliente -> Sitio Web
Referencia de Sintaxis
La tabla a continuación desglosa los bloques fundamentales semánticos y parámetros necesarios para estructurar un Mapa de Wardley dentro del intérprete central de Mermaid.
| Componente de Sintaxis | Tipo Requerido | Descripción y Reglas de Uso |
|---|---|---|
| Declaración | Identificador de Palabra Clave | Inicializa el lienzo de mapeo de la cuadrícula estratégica. Debe usar exactamente el wardley-betacadena de bloque. |
| Título | Cadena Plana/Cadena entre comillas | Un encabezado opcional impreso centrado en la parte superior del área de trabajo de la cuadrícula del diagrama. |
| Límites de Tamaño | Píxeles entre corchetes | Un parámetro opcional personalizado utilizado para sobrescribir la cuadrícula de diseño predeterminada de ancho y alto del lienzo: tamaño [1200, 700]. |
| Nodo Ancla | Palabra clave + Etiquetas | Establece al usuario o comprador principal en la parte superior de tu matriz de cadena de valor. Requiere límites de coordenadas: ancla Comprador [Y, X]. |
| Nodo de componente | Palabra clave + Etiquetas | Declara una característica técnica independiente o un bloque de activos. Requiere límites de posición exactos: componente API principal [Y, X]. |
| Rutas de enlace | Operador de conexión | Dibuja dependencias directas y estructuradas hacia abajo o horizontalmente a través de nodos mediante la -> regla de sintaxis. |
Marcadores de acción estratégica (Construir, Comprar, Subcontratar, Mercado)
Para documentar explícitamente planes de ejecución estratégica, Mermaid.js permite agregar envoltorios de acción a componentes individuales. Estas acciones colocan formas distintas en el nodo de coordenadas para transmitir decisiones arquitectónicas de inmediato:
| Modificador de acción | Icono de forma renderizada | Mapa de intención estratégica |
|---|---|---|
(construir) |
Marcador triangular | El componente es único, de alto riesgo o elaborado internamente para diferenciación competitiva. |
(comprar) |
Marcador diamante | El componente se obtiene o se licencia de un proveedor de productos de terceros. |
(subcontratar) |
Marcador cuadrado | La gestión del componente se delega completamente a un grupo externo de proveedores. |
(mercado) |
Marcador circular | El componente es una utilidad ampliamente disponible o un bien público. |
Ejemplo de implementación de sintaxis:
wardley-beta
component Interfaz personalizada [0.80, 0.30] (construir)
component Procesador de pagos [0.45, 0.65] (comprar)
Plantilla del mundo real: Cadena de valor de una tienda artesanal de café
Esta plantilla completa rastrea un modelo de negocio de tienda en expansión. Describe una arquitectura completa del mapa: configurando un límite de tamaño personalizado más grande, estableciendo anclajes empresariales, estableciendo marcadores especializados de construir/comprar y trazando enlaces de dependencia a través de las fases de los ejes.
wardley-beta
titulo "Mapa de estrategia empresarial para cafetería"
tamaño [1100, 650]
%% Anclajes empresariales principales
ancla Propietario de franquicia [0.95, 0.55]
ancla Cliente final [0.90, 0.65]
%% Capas de componentes operativos
component Café especializado [0.75, 0.45] (construir)
component Terminal de punto de venta [0.60, 0.60] (comprar)
component Agua caliente automatizada [0.45, 0.75] (mercado)
component Energía de la red eléctrica [0.15, 0.90] (subcontratar)
%% Rutas de enlaces de cadena de dependencia
Cliente final -> Café especializado
Propietario de franquicia -> Terminal de punto de venta
Café especializado -> Agua caliente automatizada
Terminal de punto de venta -> Energía de la red eléctrica
Agua caliente automatizada -> Energía de la red eléctrica
Consejo de sintaxis: Al declarar arreglos de coordenadas, recuerda que el valor del eje vertical Y (Visibilidad) va *primero*, y el valor del eje horizontal X (Evolución) va *segundo* [Visibilidad, Evolución]. Invertir estas posiciones es la causa más común de que los componentes se agrupen incorrectamente a lo largo del borde inferior de tu lienzo de mapa.
Errores comunes de sintaxis y limitaciones del sistema
Al compilar espacios de cadena de valor, ten en cuenta estas tres fronteras de diseño para asegurarte de que tu texto se renderice correctamente:
- Rangos estrictos de coordenadas: Las posiciones deben ubicarse exactamente dentro de corchetes decimales entre
0.0y1.0. Usar píxeles enteros absolutos (como[400, 200]) en lugar de razones de diseño dentro de los argumentos de nodo provocará un error de ejecución del sistema. - Orden de declaración para enlaces: Para un renderizado de diseño limpio, asegúrate de que todos tus
anclaycomponenteestén declarados y asignados sus coordenadas *antes* de escribir cualquier línea de relación de nodos (A -> B). Enlazar a una etiqueta no declarada puede interrumpir la posición del eje del mapa. - Cajas de espacio de etiquetas: Si un nombre de componente contiene espacios, símbolos o comas, asegúrese de escribirlo con precisión. Reutilizar nombres de cadena no coincidentes dentro de las rutas de conexión creará un nodo completamente nuevo y sin posición en la cuadrícula.