Para criar fluxogramas Mermaid legíveis e consistentes no Obsidian para Mac, defina estilos reutilizáveis para os nós dentro de cada diagrama. Mantenha o tema do aplicativo, confira qual renderizador sua versão instalada usa e adicione CSS específico para diagramas somente quando precisar de padrões compartilhados.

Este tutorial cria um pequeno fluxograma com preenchimentos consistentes para os nós, rótulos legíveis e uma etapa alternativa claramente identificada. Todos os rótulos são fictícios. O objetivo é apresentar um padrão de estilo reutilizável para notas comuns, com instruções separadas para os casos em que o Mermaid e o novo renderizador Pele do Obsidian se comportam de forma diferente.

Confira o renderizador instalado antes de escolher as configurações

Encontre a versão instalada em Configurações → Sobre → Aplicativo → Versão atual, o local indicado na ajuda sobre versões de acesso antecipado do Obsidian. Anote essa versão antes de solucionar problemas de estilo.

Há uma diferença importante: as notas de versão de 22 de outubro de 2026 do Obsidian 1.15.0 Desktop, marcado como acesso antecipado, apresentam o Pele para renderizar diagramas Mermaid. As notas dizem que ele é compatível com a sintaxe do Mermaid 12.1.0, usa as cores e fontes do tema e gera classes SVG diferentes. Essas notas descrevem essa versão específica; não determinam qual renderizador está instalado no seu Mac. Consulte Obsidian 1.15.0 Desktop.

Use esta tabela de decisão antes de copiar configurações de outro tutorial:

Seu ambiente de renderização Comece com Limite a considerar
Obsidian usando o próprio Mermaid Classes de fluxograma no código-fonte; opcionalmente, frontmatter do diagrama Os recursos de configuração dependem da versão instalada do Mermaid.
Obsidian usando Pele Estilos no código-fonte; opcionalmente, variáveis CSS do Pele Temas do Mermaid e cores themeVariables não se aplicam.
Um plugin que substitui a renderização de diagramas O renderizador e as configurações documentados pelo plugin O comportamento do renderizador integrado não basta para determinar a compatibilidade.

O Pele documenta explicitamente seu próprio layout e aparência, mesmo quando aceita a sintaxe do Mermaid. A documentação de compatibilidade também informa que o suporte à configuração varia conforme o tipo de diagrama. Considere a compatibilidade de sintaxe e a saída visual idêntica como questões distintas.

Crie um estilo reutilizável de fluxograma dentro da nota

Crie uma nota nova e cole o bloco completo abaixo, incluindo os delimitadores de abertura e fechamento. A documentação de sintaxe de formatação avançada do Obsidian especifica um bloco de código delimitado, identificado como mermaid, para diagramas.

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

A sintaxe documentada classDef do Mermaid define uma aparência reutilizável; class a atribui a nós nomeados. Aqui, três nós compartilham standard, e um usa alternate. Mantenha os identificadores dos nós separados dos rótulos visíveis para facilitar o acompanhamento de alterações no texto. Esses mecanismos estão descritos em Fluxogramas — Sintaxe básica.

A paleta é uma escolha de design ilustrativa. Ela combina preenchimentos claros com texto escuro e bordas mais marcadas. O rótulo Opção D também identifica a etapa alternativa, portanto seu significado não depende apenas de um preenchimento azul.

Visualize a nota e confira os rótulos no tamanho de leitura que você costuma usar. O resultado esperado é de três nós cinza iguais e um nó azul. Deixe as setas com os valores padrão do renderizador no início; assim fica mais fácil avaliar uma alteração por vez.

Para reutilizar o padrão, copie o bloco inteiro para outra nota, altere os rótulos e as conexões e atualize as listas de nós nas duas últimas linhas. Mantenha uma cópia de referência da paleta. Esta é uma convenção manual: editar a referência não atualiza automaticamente os diagramas já copiados para outros lugares.

O Pele também aceita estilos definidos no próprio diagrama, e sua documentação explica que as cores definidas no código-fonte permanecem fixas quando o tema muda. Essa abordagem é útil quando você quer manter uma paleta consistente sem deixar de usar seu tema do Obsidian. Consulte Temas do Pele.

Use o frontmatter do diagrama somente quando o Mermaid renderizar o diagrama

Se o ambiente instalado usar o próprio Mermaid e oferecer suporte ao frontmatter de diagramas, você poderá definir em conjunto a paleta geral e a tipografia do diagrama. O Mermaid documenta a configuração por frontmatter a partir da versão 10.5.0. A inicialização no nível do site pertence ao aplicativo que integra o Mermaid; quem escreve uma nota pode usar uma configuração local ao diagrama. Consulte Configuração do Mermaid.

Esta alternativa completa define uma aparência compartilhada para os três nós. Primeiro, teste-a em um bloco separado:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

O YAML deve ficar dentro do bloco mermaid, antes de flowchart TD. Ele configura o diagrama e não faz parte das propriedades da nota no início do arquivo Markdown.

O Mermaid especifica base como o tema personalizável e exige cores hexadecimais para seu mecanismo de temas. A documentação de configuração de temas lista as variáveis de texto, preenchimento, borda, linha e fonte usadas acima. Essas configurações definem a aparência do diagrama sem selecionar outro tema para o aplicativo Obsidian.

No Pele, alterar as cores themeVariables deste exemplo não produzirá o mesmo resultado: essas cores não têm suporte explícito. Use classes definidas no código-fonte para fixar as cores dos nós ou a abordagem com variáveis CSS abaixo para compartilhar padrões do renderizador. Não interprete as configurações de tema do Mermaid ignoradas como motivo para continuar ajustando os valores hexadecimais. Consulte Compatibilidade com o Pele.

Adicione padrões compartilhados do Pele com um pequeno trecho de CSS

Em uma instalação baseada no Pele, as variáveis CSS oferecem outra opção com suporte. Isso é útil quando vários diagramas devem compartilhar padrões e você prefere alterar uma única folha de estilos em vez de editar cada bloco.

O trecho completo abaixo se aplica a fluxogramas do Pele. Ele define texto, preenchimentos, bordas e cores dos conectores, sem alterar a nota ao redor nem o tema do aplicativo. O seletor e as variáveis estão documentados em Temas do Pele.

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Instale o trecho seguindo o fluxo de trabalho para computador documentado pelo Obsidian:

  1. Abra Configurações.
  2. Em Aparência → Trechos de CSS, selecione Abrir pasta de trechos.
  3. Crie nessa pasta um arquivo de texto simples chamado diagram-defaults.css e cole nele o CSS.
  4. Volte a Aparência → Trechos de CSS e selecione Recarregar trechos.
  5. Ative diagram-defaults.

Esses controles e a aplicação automática das alterações salvas nos trechos estão documentados em Trechos de CSS — Ajuda do Obsidian. No Mac, confira se o editor salvou o nome do arquivo com a extensão .css.

Teste os padrões compartilhados usando o diagrama de três nós da seção anterior, removendo o frontmatter do diagrama. Cores definidas no código-fonte podem substituir os padrões do renderizador; por isso, as classes explícitas para os nós do primeiro exemplo não servem para avaliar se as variáveis compartilhadas de preenchimento surtiram efeito.

Este trecho usa deliberadamente uma paleta clara fixa. Se a configuração de leitura que você prefere exigir outra paleta, altere em conjunto o texto, as superfícies, as bordas e as linhas e, em seguida, examine o resultado. A variável --pele-bg é usada por elementos de fundo; ela não garante um painel opaco atrás do diagrama inteiro.

Mantenha este trecho específico para o Pele. A documentação de fluxogramas do próprio Mermaid recomenda classDef para estilizar nós e alerta que o CSS externo pode perder para os estilos internos do Mermaid. Não presuma que uma folha de estilos direcionada a um renderizador funcionará com o outro. Consulte as orientações do Mermaid sobre classes CSS.

Diagnostique diagramas ilegíveis seguindo uma ordem repetível

Siga esta sequência quando um diagrama for renderizado, mas sua aparência estiver inconsistente. Ela separa sintaxe, escopo dos estilos e espaço disponível sem alterar o tema do aplicativo.

  1. Simplifique o teste. Copie o diagrama da nota para uma nota temporária e mantenha três rótulos curtos. Se o exemplo pequeno também falhar, investigue a sintaxe ou o suporte do renderizador antes de refinar as cores.
  2. Escolha um único mecanismo de estilo. Teste apenas as classes no código-fonte, apenas o frontmatter do Mermaid ou apenas as variáveis do Pele. Combiná-los de imediato dificulta identificar o que está sobrescrevendo o quê.
  3. Confira as combinações de cores. Examine o texto em relação ao preenchimento do nó e, depois, as bordas e setas em relação à nota ao redor. Corrija a combinação ilegível antes de adicionar outra cor de destaque.
  4. Confira a largura de leitura. Visualize o diagrama na largura de painel que costuma usar. Encurte os rótulos ou experimente uma disposição vertical se o gráfico ficar largo demais.
  5. Reintroduza a complexidade aos poucos. Adicione os nós restantes, os estilos alternativos e os rótulos das arestas em pequenos grupos. Mantenha a última versão legível disponível para comparação.

Para conferir a direção, o Mermaid documenta TD como de cima para baixo e LR como da esquerda para a direita. Experimente alterar somente essa declaração antes de reescrever o diagrama. Consulte Direção do fluxograma.

Avalie o resultado final no renderizador do Obsidian instalado. Um editor externo pode ajudar a examinar a sintaxe, mas o Pele documenta posições de nós, espaçamentos e trajetos das arestas diferentes dos do Mermaid. O mesmo código-fonte não precisa gerar a mesma geometria.

Mantenha um pequeno diagrama de referência junto da paleta reutilizável. Quando os rótulos, os nós e os conectores estiverem claros na largura de painel que você costuma usar, aplique a mesma convenção às notas de trabalho. A consistência vem de um estilo repetível e de conhecer os limites do renderizador; seu tema do Obsidian pode continuar como está.

Fontes