Para conectar dois subgrafos Mermaid no Obsidian, atribua um ID explícito a cada grupo e conecte esses IDs. No Mac, teste primeiro um diagrama mínimo e, em seguida, verifique se o problema está na sintaxe, na direção do layout ou em uma diferença no renderizador instalado.

Este guia aborda setas visíveis entre grupos em um único fluxograma. O objetivo é fazer a conexão desejada aparecer, identificar seus pontos de extremidade e escolher uma alternativa prática quando o renderizador não produz a disposição necessária.

Comece com uma conexão mínima entre dois grupos

Crie uma nota temporária e cole o bloco completo cercado por crases abaixo. O método documentado pelo Obsidian para adicionar um diagrama é um bloco de código cuja linguagem é mermaid; não é necessário um arquivo de diagrama separado. Sintaxe de formatação avançada

```mermaid
flowchart LR
    subgraph groupA [Group A]
        direction TB
        A1[Item A1] --> A2[Item A2]
    end
    subgraph groupB [Group B]
        direction TB
        B1[Item B1] --> B2[Item B2]
    end
    groupA --> groupB
```

O Mermaid documenta IDs explícitos de subgrafos e arestas de e para subgrafos. Aqui, groupA e groupB identificam os contêineres; o texto entre colchetes define os títulos. A última linha conecta os contêineres. Sintaxe de fluxogramas

Alterne para Reading view para inspecionar o resultado. No macOS, o atalho documentado para alternar entre as visualizações de leitura e edição é Cmd+E. Você também pode selecionar Reading view pelo controle de visualização na barra de status. Para editar o código-fonte com precisão, escolha Source mode. Visualizações e modo de edição

Use três critérios de aceitação: os dois grupos aparecem, seus itens internos aparecem e uma seta conecta os limites dos dois grupos. Nesta primeira verificação, deixe de lado o espaçamento e o estilo. Estes exemplos seguem a documentação de sintaxe consultada; não foram renderizados em uma instalação local do Obsidian para este artigo.

Se o exemplo mínimo funcionar, mantenha essa nota como referência. Compare seu diagrama original com ele em pequenas etapas: primeiro as declarações dos grupos, depois os IDs e, por fim, a única linha de conexão. Restaure o conteúdo adicional somente depois que a conexão básica estiver visível.

Verifique qual renderizador sua versão do Obsidian usa

Anote a versão instalada do aplicativo antes de comparar os resultados com exemplos online. A documentação de atualização do Obsidian informa que as versões do aplicativo e do instalador ficam em Settings → General. Selecione Check for updates e, se houver uma atualização disponível, Relaunch. Siga também qualquer aviso separado sobre o instalador. Atualizar o Obsidian

Há uma diferença importante entre versões: as notas de lançamento do Obsidian de 22 de outubro de 2026 identificam a versão Desktop 1.15.0 como uma versão de acesso antecipado e dizem que os diagramas usam o Pele, com compatibilidade de sintaxe do Mermaid 12.1.0. As mesmas notas dizem que, nessa versão, o Obsidian deixou de incluir o próprio Mermaid. Considere dependentes da versão as instruções que presumem que toda instalação do Obsidian inclui o Mermaid. Obsidian 1.15.0 Desktop (acesso antecipado)

Essas notas de lançamento também removem a configuração Show Mermaid diagrams in notes na versão 1.15.0. Se sua instalação mostrar essa configuração ou um aviso para ativá-la, anote essa diferença em vez de procurar indefinidamente um controle descrito para outra versão. Obsidian 1.15.0 Desktop (acesso antecipado)

Para solucionar problemas, mantenha um breve registro comparativo: versão do aplicativo, visualização de edição ou leitura, texto exato do diagrama e resultado observado. Descreva o resultado de forma concreta — por exemplo, “os dois grupos aparecem, mas a seta de conexão está ausente”. Isso é mais útil do que registrar apenas que o diagrama está com problemas.

Decida se a seta deve conectar grupos ou itens

Escolha os pontos de extremidade de acordo com o que o diagrama precisa comunicar. Para mostrar uma relação ampla entre grupos, comece pelo exemplo com contêineres. Para representar uma transição específica entre itens, use a seguinte alternativa completa e avalie-a separadamente.

```mermaid
flowchart LR
    subgraph groupA [Group A]
        A1[Item A1] --> A2[Item A2]
    end
    subgraph groupB [Group B]
        B1[Item B1] --> B2[Item B2]
    end
    A2 --> B1
```

Agora, a última linha conecta itens nomeados através do limite do grupo. A documentação de fluxogramas do Mermaid distingue nós, arestas e subgrafos; use de forma consistente os IDs dos pontos de extremidade desejados. Sintaxe de fluxogramas

Se o exemplo com contêineres falhar no renderizador instalado, mas o exemplo com itens funcionar, o segundo é uma alternativa prática quando uma relação entre itens expressa o significado pretendido. Preserve essa distinção no diagrama: não apresente uma transição específica entre itens como evidência de que os próprios contêineres estão conectados.

Ao adaptar qualquer um dos exemplos, faça uma alteração de cada vez. Primeiro renomeie os títulos visíveis, inspecione o resultado e depois adicione mais itens. Deixe a estilização e o aninhamento para mais tarde. Com essa sequência, cada edição tem um objetivo claro e fica mais fácil identificar a primeira alteração associada a uma falha.

Entenda por que a direção de um subgrafo muda

O Mermaid documenta uma limitação de layout: quando um nó de um subgrafo se conecta a algo fora do grupo, a direção própria do subgrafo é ignorada e ele herda a direção do grupo pai. A documentação compara essa situação a uma conexão com o contêiner. Direção em subgrafos

Por isso, uma seta pode estar correta mesmo que a disposição seja diferente da desejada. No primeiro exemplo, inspecione separadamente as pilhas internas e a seta entre os grupos. No segundo, priorize verificar os pontos de extremidade dos itens antes de avaliar o layout. Ao interpretar qualquer resultado, leve em conta a diferença entre renderizadores mencionada acima.

Se você precisa tanto de uma conexão específica entre itens quanto de uma direção interna diferente, trate esses requisitos de aceitação separadamente. A limitação documentada do Mermaid significa que não se deve garantir que adicionar uma declaração de direção local atenderá aos dois. Escolha a conexão que representa corretamente a relação e, se necessário, simplifique a disposição.

Uma alternativa prática é manter uma única direção geral e encurtar o diagrama até que os itens conectados sejam fáceis de acompanhar. Se o significado no nível dos grupos for suficiente, volte ao primeiro exemplo. Essas são escolhas editoriais sobre o que o diagrama comunica, não garantias de posições exatas ou do trajeto das setas.

Isole a falha antes de reconstruir o diagrama

Use esta sequência de diagnóstico para decidir o que tentar em seguida. Ela é um guia de decisão derivado da sintaxe documentada e das diferenças entre renderizadores, não uma lista de defeitos confirmados.

Observação Próxima verificação O que registrar
A nota exibe o texto literal do diagrama Inspecione as cercas de código de abertura e fechamento e depois alterne para Reading view Se o bloco é renderizado
O exemplo mínimo gera um erro Compare caractere por caractere o bloco colado com o exemplo O texto completo do erro
Os grupos são renderizados, mas a conexão não Teste separadamente a alternativa completa com conexão entre itens Qual tipo de ponto de extremidade funciona
A seta aparece, mas a direção interna muda Consulte a limitação documentada para a direção quando há nós externos Se o problema restante é a conexão ou a disposição
O exemplo funciona até restaurar mais conteúdo Desfaça a adição mais recente e repita essa única alteração A menor adição associada à falha
O mesmo texto se comporta de modo diferente em outro lugar Compare as versões do aplicativo, os renderizadores e os modos de visualização Os ambientes e resultados exatos

Para fazer uma comparação independente de sintaxe, a documentação do Obsidian recomenda o Live Editor do Mermaid. Cole o conteúdo do diagrama sem as cercas de código Markdown ao redor. Uma renderização bem-sucedida no navegador é uma evidência útil para comparação, mas não comprova que o comportamento será idêntico na sua versão do Obsidian. Sintaxe de formatação avançada

Se o resultado continuar diferente no Obsidian, repita o teste mínimo no cofre de sandbox para desktop. As orientações oficiais de solução de problemas do Obsidian indicam Open Help > Sandbox Vault como o teste no desktop para reproduzir um problema fora da configuração normal do cofre. Elas também recomendam atualizar os temas e plugins da comunidade e reiniciar antes de continuar o diagnóstico. Sobre a categoria de relatórios de bugs

Se o teste no sandbox funcionar, investigue uma por vez as diferenças no cofre original. Se também falhar, guarde o exemplo mínimo, as versões do aplicativo e do instalador, o modo de visualização e o resultado exato observado. Antes de relatá-lo, pesquise no fórum oficial um relato semelhante já existente, conforme solicitado pelas orientações de comunicação de problemas do Obsidian. Sobre a categoria de relatórios de bugs

Conclua com o menor diagrama que comunique a relação necessária. Mantenha a conexão entre contêineres quando os grupos forem os pontos de extremidade desejados; use uma conexão entre itens quando a transição envolver itens específicos. Depois que essa opção for renderizada de forma satisfatória na versão instalada do Obsidian, restaure os detalhes adicionais gradualmente e pare quando o diagrama continuar legível.

Fontes