🚶 Mermaid

Jornada do utilizador

Veja o seu produto pelos olhos dos seus utilizadores

Abrir este exemplo no editor Gerar um com IA

O que é um Jornada do utilizador?

Uma jornada do utilizador mapeia os passos que um utilizador percorre para atingir um objetivo, pontuados por satisfação em cada passo. Revela instantaneamente os pontos de fricção no onboarding, no checkout ou nas experiências de suporte.

As jornadas do utilizador são feitas para a parede de uma sala de workshop e não para um documento de arquitetura: produto, suporte e design leem a mesma imagem e discutem a mesma pontuação baixa. O seu valor é emocional, não técnico — um passo que funciona na perfeição pode na mesma valer dois. O seu limite é comportar um único caminho linear, com um número por passo. As taxas de abandono e os canais vivem noutro lado.

Exemplo em tempo real

Código Mermaid

journey
    title Checkout experience
    section Browse
      Find product: 5: Customer
      Compare options: 3: Customer
    section Purchase
      Add to cart: 4: Customer
      Enter payment: 2: Customer
      Confirm order: 5: Customer

Exemplo em tempo real

Quando usar

Mapear as experiências de onboarding e de checkout

Identificar pontos de fricção com pontuações de satisfação

Alinhar as equipas de produto e suporte com o percurso real do utilizador

Erros frequentes

Um passo sem ator

Escrever Find product: 5 desenha o passo mas não o liga a ninguém, por isso ele desaparece da legenda de atores e a fila de rostos fica incompleta. Todos os passos precisam de pelo menos um ator a seguir à pontuação.

Os nomes dos atores têm de coincidir

Customer e customer são dois atores diferentes, cada um com a sua cor e a sua entrada na legenda. O diagrama continua a renderizar, por isso a duplicação passa despercebida — copie o nome em vez de o reescrever em cada linha.

As personas não são atores de passo

Listar Customer, Support num mesmo passo é legítimo — diz quem intervém ali. O que se parte é fazer passar duas personas pela mesma jornada: a única linha de pontuações passa a dar a média de duas experiências diferentes. Faça uma jornada por persona.

Sintaxe básica

.mmd

journey
    title My journey
    section Phase
      Step name: 5: Actor

journey title Checkout experience
O título nomeia o objetivo que o utilizador tenta alcançar. Uma jornada deve cobrir um objetivo para uma persona; uma segunda persona significa um segundo diagrama.
section Purchase
As secções dividem a jornada em fases — explorar, decidir, pagar, receber — e são desenhadas como uma faixa acima dos passos que contêm, o que também agrupa visualmente a linha de pontuações.
Enter payment: 2: Customer
Um passo é texto, depois uma pontuação de 0 a 5, depois os atores, tudo separado por dois pontos. A pontuação define o rosto e a altura do ponto.
%%{init: {"theme": "forest"}}%%
Uma diretiva init na primeira linha muda o tema, que é a única alavanca de estilo que uma jornada oferece — não há cor por passo nem por secção.

Perguntas sobre este diagrama

O que significam as pontuações?

Cada passo recebe uma pontuação de satisfação de 0 a 5, apresentada como um rosto. As pontuações baixas evidenciam exatamente onde os utilizadores têm dificuldades — o seu backlog de melhorias, visualizado.

Podem aparecer vários atores numa mesma jornada?

Sim — liste vários atores após a pontuação (p. ex. «Checkout: 3: Cliente, Suporte») para mostrar quem intervém em cada passo.

Como exporto uma jornada do utilizador para uma apresentação de workshop?

Exporte PNG em 2× ou 4× para os rostos continuarem legíveis quando projetados, ou SVG para um cartaz impresso. O código continua a ser texto, por isso o diagrama pode ser atualizado entre duas sessões em poucos minutos.

Uma jornada Mermaid mostra taxas de abandono ou canais?

Não. O único elemento quantitativo é a pontuação de 0 a 5; não há colunas para métricas, canais ou pontos de contacto. Guarde-os numa tabela ao lado do diagrama e deixe a jornada transportar a forma emocional do percurso.

Como mostro um utilizador que desiste a meio?

Não é possível ramificar dentro de uma jornada — é um único caminho linear. Modele o abandono como um passo com pontuação baixa, e desenhe as rotas alternativas num fluxograma ao lado quando é a ramificação que está em discussão.

Qual é a diferença para um mapa de jornada do cliente completo?

Uma jornada Mermaid guarda três coisas: passos, atores e satisfação. Um mapa de jornada clássico traz ainda canais, pontos de fricção, oportunidades e citações dos utilizadores. Use o diagrama como espinha dorsal e ponha o resto no documento à volta.

Jornada do utilizador ou outro tipo de diagrama?

Jornada do utilizador ou fluxograma?

O fluxograma mostra o que o sistema permite: todos os ramos, todos os caminhos de erro. A jornada mostra o que uma pessoa fez mesmo e como se sentiu. Discutir se um caso limite está tratado é uma questão de fluxograma; decidir o que corrigir primeiro é uma questão de jornada.

Jornada do utilizador ou linha do tempo?

A jornada é ordenada por passos, a linha do tempo por datas. A jornada repete-se para cada utilizador e traz uma pontuação; a linha do tempo aconteceu uma vez e não traz juízo nenhum. O onboarding é uma jornada; a história do redesenho desse onboarding é uma linha do tempo.

Explorar outros tipos de diagramas

🔀 Fluxograma 💬 Diagrama de sequência 🧩 Diagrama de classes 🗄️ Diagrama entidade-relação 🔄 Diagrama de estados 📅 Gráfico de Gantt 🥧 Gráfico circular 🧠 Mapa mental 🌿 Grafo Git 🕰️ Linha do tempo 🎯 Gráfico de quadrantes

Crie já o seu Jornada do utilizador

Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.

Abrir o Mermaid Studio