Como abrir um arquivo .mmd

O que você vê

No diagram type detected matching given configuration for text: ```mermaid

Por quê

Você copiou o diagrama de um arquivo Markdown ou de uma conversa e trouxe a cerca junto. As três crases são Markdown, não Mermaid, então o analisador nunca chega ao diagrama.

Solução

Apague a linha de abertura ```mermaid e a de fechamento ```. O arquivo precisa começar com a palavra-chave do diagrama.

```mermaid
flowchart TD
    A[Início] --> B[Fim]
```

flowchart TD
    A[Início] --> B[Fim]

O que você vê

Parse error, a mensagem termina em: got 'PS'

O erro termina em: got 'PS'

Por quê

Um parêntese de abertura dentro do rótulo de um nó. No Mermaid os parênteses são sintaxe de forma — A(texto) é um nó arredondado —, então um parêntese solto entre colchetes é lido como o início de uma forma.

Solução

Coloque o rótulo entre aspas. Tudo dentro de aspas duplas vira texto, colchetes inclusive.

flowchart TD
    A[Chamar cobrar(pedido)] --> B[Fim]

flowchart TD
    A["Chamar cobrar(pedido)"] --> B[Fim]

O que você vê

Parse error na linha em que você nomeou um nó

Por quê

O identificador de um nó tem espaços. Em português é o erro mais fácil de cometer, porque os nomes naturais são locuções: «serviço de autenticação», «base de dados». O identificador é o token antes da seta e o espaço o encerra, deixando uma palavra solta que não encaixa em lugar nenhum.

Solução

Dê ao nó um identificador de uma palavra e ponha o texto legível no rótulo. Acentos, til e cedilha valem dentro do identificador; só o espaço quebra.

flowchart TD
    servidor de auth --> base de dados

flowchart TD
    auth[Servidor de autenticação] --> db[Base de dados]

O que você vê

Parse error, a mensagem termina em: got 'STR'

O erro termina em: got 'STR'

Por quê

Aspas duplas dentro do rótulo de um nó. O analisador as toma como o começo de uma string e depois encontra o colchete do rótulo onde esperava a aspa de fechamento.

Solução

Envolva o rótulo inteiro em aspas duplas e use aspas simples por dentro, ou escreva a aspa como a entidade HTML #quot;.

flowchart TD
    A[Ele disse "olá"] --> B[Fim]

flowchart TD
    A["Ele disse 'olá'"] --> B[Fim]

O que você vê

Parse error, a mensagem termina em: got 'end'

O erro termina em: got 'end'

Por quê

Você usou end como identificador de nó. Em minúsculas, end fecha um subgrafo, então o analisador vê um fim de bloco onde esperava um nó. Acontece bastante: seguindo exemplos em inglês, o último nó acaba se chamando end mesmo com o resto em português.

Solução

Use maiúscula ou dê outro identificador ao nó e leve a palavra para o rótulo. `Fim` não dá problema.

flowchart TD
    A[Início] --> end

flowchart TD
    A[Início] --> Fim[Concluído]

O que você vê

Desenha, mas num diagrama de estados um estado se partiu em dois

Por quê

Um espaço dentro do identificador de um estado. Diferente do fluxograma, o diagrama de estados não reclama: ele cria uma caixa separada para cada palavra. Medido — `[*] --> Aguardando pagamento` produz dois estados, `Aguardando` e `pagamento`, e só o primeiro fica na ponta da seta. Em português quase nenhum estado cabe numa palavra, então o erro acontece o tempo todo, e não há sinal nenhum de que aconteceu.

Solução

Declare o estado com `state "Rótulo" as id` e refira-se a ele só pelo identificador.

stateDiagram-v2
    [*] --> Aguardando pagamento
    Aguardando pagamento --> Fechado

stateDiagram-v2
    state "Aguardando pagamento" as aguardando
    [*] --> aguardando
    aguardando --> Fechado

O que você vê

Desenha, mas um diagrama ER tem entidades que você não escreveu

Por quê

Um rótulo de relacionamento com espaço e sem aspas. É a armadilha que mais castiga o português, porque nossos verbos de relação pedem preposição: «pertence a», «aparece em». O Mermaid não dá erro: corta o rótulo no primeiro espaço e transforma cada palavra restante numa entidade vazia.

Solução

Ponha entre aspas todo rótulo de relacionamento que tiver espaço. Em português, praticamente todos.

erDiagram
    CLIENTE ||--o{ PEDIDO : pertence a

erDiagram
    CLIENTE ||--o{ PEDIDO : "pertence a"

O que você vê

No diagram type detected matching given configuration for text: sequencediagram

Por quê

A palavra-chave do diagrama está escrita errado, ou com as maiúsculas trocadas. As palavras-chave do Mermaid diferenciam maiúsculas: sequenceDiagram funciona, sequencediagram não. O mesmo vale para stateDiagram-v2 e erDiagram.

Solução

Corrija as maiúsculas. Repare que graph continua aceito como apelido antigo de flowchart, então essa sintaxe velha não é o seu problema.

sequencediagram
    Cliente->>API: Olá

sequenceDiagram
    Cliente->>API: Olá

O que você vê

Parse error num rótulo de aresta entre barras

Por quê

Parênteses dentro do rótulo de uma aresta. O rótulo |...| tem a mesma restrição do rótulo de um nó: ali colchetes e parênteses são sintaxe, não texto.

Solução

Coloque o rótulo da aresta entre aspas.

flowchart TD
    A -->|sim (sempre)| B

flowchart TD
    A -->|"sim (sempre)"| B

O que você vê

Parse error apontando para a última linha do diagrama

Por quê

Um bloco aberto e nunca fechado: alt, opt, loop, par e subgraph todos precisam do end deles. O Mermaid informa a falha no ponto em que a entrada acaba, então o número da linha aponta para o fim do arquivo e não para o bloco aberto.

Solução

Conte os blocos que abriu e os end que escreveu. Quando o erro é na última linha, quase sempre é isso.

sequenceDiagram
    Cliente->>API: Requisição
    alt Tudo certo
        API-->>Cliente: OK

sequenceDiagram
    Cliente->>API: Requisição
    alt Tudo certo
        API-->>Cliente: OK
    end

O que você vê

Lexical error on line 1. Unrecognized text.

Por quê

Uma direção inválida depois da palavra-chave do diagrama. Fluxogramas aceitam TB, TD, BT, LR e RL, e nada mais; um erro de digitação aqui falha no analisador léxico, antes de ler qualquer nó.

Solução

Use uma das cinco direções válidas. TD e LR cobrem quase todos os casos.

flowchart XY
    A --> B

flowchart TD
    A --> B

O que você vê

Desenha aqui mas não no GitLab, no Confluence ou numa ferramenta antiga

Por quê

Uma diferença de versão. Este visualizador roda Mermaid 11.12.2; o GitLab.com documenta a versão 10, e wikis auto-hospedados costumam estar anos atrás. Sintaxe introduzida depois da versão da outra ferramenta é analisada aqui e falha lá.

Solução

Pergunte à outra ferramenta qual versão ela usa. Escrever a palavra info sozinha num diagrama faz o Mermaid desenhar o próprio número de versão, o que é mais rápido que ler notas de lançamento.

info