Sintaxe do Mapa Wardley do Mermaid.js e Guia de Estratégia

Um Mapa Wardley é um framework poderoso usado para estratégia de negócios para visualizar cadeias de valor e mapear a evolução de componentes. Introduzido como um recurso nativo na versão Mermaid v11.14.0+, o wardley-betamotor permite que equipes de estratégia, arquitetos e gerentes de produtos mapeiem ambientes de mercado usando apenas texto. Ao posicionar componentes técnicos em um espaço de coordenadas bidimensional, as equipes podem analisar visualmente dependências na cadeia de valor, identificar inércia de mercado e tomar decisões estruturadas entre construir ou adquirir.

Compreendendo o Sistema de Grade de Coordenadas

Diferentemente dos fluxogramas livres padrão, cada componente em um Mapa Wardley é plotado em um espaço bidimensional rígido baseado em duas coordenadas decimais que variam de 0.0 a 1.0:

  • Visibilidade (Eixo Y / Primeira Coordenada): Mede o quão visível ou valioso um componente é para um usuário final. Um valor de 1.0 representa um ponto de contato direto com o usuário (maior visibilidade), enquanto 0.0 representa infraestrutura fundamental oculta.
  • Evolução (Eixo X / Segunda Coordenada): Mede o nível de maturidade de um ativo de mercado. Ele se desloca da esquerda para a direita através de quatro fases evolutivas distintas: Gênese (0.0), Personalizado (0.25), Produto/Aluguel (0,5), e Commodity/Utilidade (de 0,75 a 1,0).

Estrutura Básica da Sintaxe

Todo diagrama começa com o wardley-betacabeçalho de declaração. Em seguida, você estabelece pontos de ancoragem do usuário com o ancorarpalavra-chave, mapeie os blocos de infraestrutura operacional com o componentepalavra-chave, e desenhe relações entre eles usando setas direcionais.

wardley-beta
título Mapa Estratégico Simples
ancorar Cliente [0.9, 0.5]
componente Website [0.7, 0.4]
Cliente -> Website

 

Referência de Sintaxe

A tabela abaixo detalha os blocos principais semânticos e parâmetros necessários para estruturar um Mapa de Wardley dentro do interpretador central do Mermaid.

Componente de Sintaxe Tipo Requisito Descrição e Regras de Uso
Declaração Identificador de Palavra-Chave Inicializa a tela de mapeamento da grade estratégica. Deve usar exatamente o wardley-betastring de bloco.
Título String Simples/Entre Aspas Um título opcional impresso centralizado na parte superior da área de trabalho da grade do diagrama.
Limites de Tamanho Pixels entre Colchetes Um parâmetro opcional usado para substituir a grade padrão de largura e altura da tela: tamanho [1200, 700].
Nó de Ancoragem Palavra-Chave + Rótulos Estabelece o usuário ou comprador principal no topo da sua matriz da cadeia de valor. Requer limites de coordenadas: ancorar Comprador [Y, X].
Nó de Componente Palavra-chave + Rótulos Declara um recurso técnico independente ou bloco de ativo. Exige limites de posição exatos: componente API Central [Y, X].
Caminhos de Ligação Operador de Conexão Desenha dependências diretas e estruturadas para baixo ou horizontalmente através dos nós por meio do -> regra de sintaxe.

Marcadores de Ação Estratégica (Construir, Comprar, Terceirizar, Mercado)

Para documentar explicitamente planos de execução estratégica, o Mermaid.js permite anexar envoltórios de ação a componentes individuais. Essas ações colocam formas distintas no nó de coordenadas para transmitir escolhas arquitetônicas instantaneamente:

Modificador de Ação Ícone de Forma Renderizada Mapeamento de Intenção Estratégica
(construir) Marcador Triangular O componente é único, de alto risco ou desenvolvido internamente para diferenciação competitiva.
(comprar) Marcador Diamante O componente é obtido ou licenciado de um fornecedor de produto de terceiros.
(terceirizar) Marcador Quadrado A gestão do componente é totalmente delegada para um grupo externo de fornecedores.
(mercado) Marcador Circular O componente é uma utilidade amplamente disponível ou bem público.

Exemplo de Implementação de Sintaxe:

wardley-beta
component Interface Personalizada [0.80, 0.30] (construir)
component Processador de Pagamentos [0.45, 0.65] (comprar)


Plano Prático do Mundo Real: Cadeia de Valor de uma Loja de Café Artesanal

Este plano abrangente rastreia um modelo de negócios de loja em expansão. Ele descreve uma arquitetura completa do mapa — configurando um limite de tamanho personalizado maior, estabelecendo âncoras de negócios, definindo marcadores especializados de construir/comprar e traçando links de dependência em todas as fases dos eixos.

wardley-beta
title "Mapa Estratégico de Negócios do Café"
size [1100, 650]

%% Âncoras Principais de Negócios
anchor Proprietário da Franquia [0.95, 0.55]
anchor Cliente Final [0.90, 0.65]

%% Camadas de Componentes Operacionais
component Café Especializado [0.75, 0.45] (construir)
component Terminal de Pontos de Venda [0.60, 0.60] (comprar)
component Água Quente Automatizada [0.45, 0.75] (mercado)
component Energia da Rede Elétrica [0.15, 0.90] (terceirizar)

%% Caminhos de Vinculação em Cadeia de Dependência
Cliente Final -> Café Especializado
Proprietário da Franquia -> Terminal de Pontos de Venda
Café Especializado -> Água Quente Automatizada
Terminal de Pontos de Venda -> Energia da Rede Elétrica
Água Quente Automatizada -> Energia da Rede Elétrica


Dica de Sintaxe: Ao declarar arrays de coordenadas, lembre-se de que o valor do eixo vertical Y (Visibilidade) vem *primeiro*, e o valor do eixo horizontal X (Evolução) vem *segundo* [Visibilidade, Evolução]. Inverter essas posições é a causa mais comum de os componentes se agruparem incorretamente na borda inferior da sua tela do mapa.


Armadilhas Comuns de Sintaxe e Restrições do Sistema

Ao compilar espaços da cadeia de valor, tenha em mente essas três limitações de layout para garantir que seu texto seja renderizado corretamente:

  • Faixas Estritas de Coordenadas: As posições devem estar exatamente dentro dos colchetes decimais entre 0.0 e 1.0. Usar pixels inteiros absolutos (como [400, 200]) em vez de proporções de layout dentro dos argumentos dos nós causará um erro de execução no sistema.
  • Ordem de Declaração para Links: Para um renderização de layout limpa, certifique-se de que todos os seus âncora e componente sejam declarados e atribuídos coordenadas *antes* de escrever quaisquer linhas de relacionamento entre nós (A -> B). Vincular a uma etiqueta não declarada pode comprometer a posição dos eixos do mapa.
  • Enclaves de Espaço de Etiquetas: Se um nome de componente contiver espaços, símbolos ou vírgulas, certifique-se de que está escrito com precisão. Reutilizar nomes de string incorretos dentro de caminhos de conexão criará um nó inteiramente novo e não posicionado na tela da grade.
Scroll to Top