Excalidraw no Obsidian: Diagramas Desenhados à Mão nas Notas

Como mencionado anteriormente, os arquivos Canvas estão no formato .canvas e existem separadamente dos arquivos .md — eles precisam ser gerenciados de forma independente e não podem ser combinados com anotações no mesmo arquivo. Este capítulo apresenta uma ferramenta que resolve esse ponto de dor: o plugin Excalidraw.

O que é Excalidraw e como é diferente do Canvas?

O que é Excalidraw?

Excalidraw é uma ferramenta de desenho online gratuita e de código aberto com uma versão web independente (excalidraw.com) que você pode usar diretamente no navegador sem precisar se cadastrar. Seu estilo de desenho à mão é perfeito para fluxogramas, mapas mentais, diagramas de arquitetura e conteúdos similares.

No Obsidian, usamos a versão do plugin de terceiros — mantida por desenvolvedores da comunidade, não oficialmente pelo Obsidian, então precisa ser instalada manualmente. As funcionalidades principais são as mesmas da versão web, mas com integração mais profunda com o Obsidian.

Diferenças do Canvas

Ambos parecem “desenhar em uma tela”, mas o formato do arquivo é completamente diferente, o que é a diferença central:

• Canvas: Gera um arquivo .canvas. Este é um arquivo JSON independente que existe separadamente das suas notas .md e precisa ser gerenciado de forma independente.
• Excalidraw: Os dados do desenho podem ser comprimidos e incorporados ao final de um arquivo .md — um único arquivo, texto e desenho coexistem, sem necessidade de gerenciamento separado.

As duas capturas de tela abaixo são do mesmo arquivo:

É por isso que recomendo o Excalidraw: quando você abre um arquivo, vê o texto; com um toque, vê o desenho. Ambos os tipos de conteúdo em um só lugar.

Instalando o Plugin Excalidraw

Excalidraw é um plugin de terceiros e precisa ser instalado manualmente.

Caminho: Configurações → Plugins de terceiros → Plugins da comunidade → Pesquisar por “Excalidraw” → Instalar → Ativar

Após a instalação, ative o plugin e você verá um ícone do Excalidraw aparecer na barra lateral esquerda.

Criando e Usando Excalidraw

Como Criar um Novo Arquivo

Existem duas maneiras:

1. Paleta de Comandos: Cmd+P (Mac) ou Ctrl+P (Windows), pesquise por “Excalidraw: New Drawing”, pressione Enter.
2. Barra Lateral Esquerda: Clique no ícone do Excalidraw para criar um novo diretamente.

Por padrão, um novo arquivo é criado como .excalidraw (não .md). Não se preocupe — como torná-lo parte de um arquivo .md é o foco da seção “Dois em Um” mais adiante.

Operações Comuns e Atalhos

Na barra de ferramentas do Excalidraw, cada ferramenta tem um número exibido abaixo — esse é o atalho. Pressione o número para alternar ferramentas diretamente, sem clicar na barra:

Um recurso extra em comparação com o Canvas: Excalidraw tem uma ferramenta Desenho livre dedicada (atalho 7) que permite desenhar livremente com o mouse ou trackpad — algo que o Canvas não consegue fazer.

Fluxo de Trabalho com Teclado: Desenhando sem Sair do Teclado

Excalidraw também suporta um fluxo de trabalho puro com teclado, ótimo para criar nós rapidamente, conectá-los e escrever conteúdo:

Navegação Básica (no modo Seleção):

Adicionando Conteúdo à Tela

Formas e Texto: Selecione uma forma na barra de ferramentas e clique na tela para desenhá-la. Com a ferramenta de texto, clique e comece a digitar — suporte a chinês.

Conexões com Setas: Quando um retângulo está selecionado, passar o mouse sobre sua borda revela pontos de conexão verdes. Arraste uma seta de um desses pontos para outra forma, e ela se encaixará.

Notas Existentes: Arraste notas diretamente da árvore de arquivos do Obsidian para a tela do Excalidraw — elas serão incorporadas como cartões de pré-visualização de notas.

Imagens: Arraste arquivos de imagem para a tela para exibi-los diretamente.

Ponto Chave! Desenhando Excalidraw com IA

Semelhante à seção “Desenhando Canvas com IA” anterior, Excalidraw também pode ser gerado diretamente pelo Claude Code.

Contexto

Apresentamos anteriormente o Claude Code e o sistema de Skills. O Canvas usa a Skill json-canvas, e o Excalidraw também tem uma Skill dedicada: excalidraw-diagram. Claro, existem muitos MCPs e Skills em torno do Excalidraw — você pode escolher o que precisar.

Foi criada por axtonliu e é de código aberto no GitHub:

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

Após o download, coloque-a no diretório ~/.claude/skills/, como as outras Skills.

Esta Skill gera arquivos .excalidraw independentes, adequados para cenários onde você só precisa do desenho e não quer misturá-lo com o texto da nota.

Se você quiser incorporar o desenho diretamente dentro de um arquivo .md (o formato dois em um descrito posteriormente), escrevi uma Skill estendida: obsidian-excalidraw, especificamente para esse propósito — o resultado é comprimido e incorporado ao final do arquivo .md, sem criar arquivos extras. As duas Skills servem a propósitos diferentes; escolha conforme necessário.

Como Usar

No Claude Code, digite /excalidraw-diagram, selecione esta Skill, pressione Tab, então descreva o que deseja desenhar. O Claude Code gerará o arquivo Excalidraw correspondente.

Demonstração ao Vivo

Usei o conteúdo deste capítulo como demonstração — disse ao Claude Code: “Desenhe um fluxograma da estrutura de capítulos deste conteúdo do Excalidraw, mostrando as relações entre as seções.”

O Claude Code leu o conteúdo e gerou automaticamente um diagrama de estrutura, incorporado diretamente ao final do arquivo .md. Mude para o modo Excalidraw para vê-lo. Não é necessário arrastar nós ou conectar linhas manualmente — muito mais rápido do que desenhar à mão.

Ponto Chave! Incorporando Excalidraw em Arquivos .md (Dois em Um)

Vamos ser claros: Por padrão, o plugin Excalidraw cria arquivos .excalidraw, que são separados dos arquivos .md e precisam ser gerenciados de forma independente, assim como o Canvas.

O recurso “dois em um” não é o comportamento padrão; requer configuração adicional. Uma vez configurado, novos arquivos serão no formato .md, com os dados do desenho comprimidos e armazenados ao final do arquivo, de modo que ambos coexistem no mesmo arquivo.

O Canvas não consegue fazer isso, mas o Excalidraw consegue — após a configuração, o mesmo arquivo .md pode servir tanto como uma nota comum quanto como uma tela de desenho, tudo em um único arquivo. Esta é a parte mais valiosa deste artigo.

Abaixo, dividi em 5 etapas.

5.1 Duas Propriedades Chave

Leitores atentos podem já ter visto essas duas propriedades frontmatter nas minhas capturas de tela de notas anteriores:

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed: Diz ao plugin Excalidraw que este arquivo .md contém dados do Excalidraw que precisam ser analisados. Sem essa propriedade, o plugin não processará o arquivo.

excalidraw-open-md: true: Abre o arquivo no modo Markdown por padrão (em vez de entrar diretamente no modo de desenho). Definido como true, você verá o texto primeiro ao abrir o arquivo e alternará manualmente quando precisar desenhar. Sem isso, toda vez que você abrir o arquivo, ele vai direto para a tela de desenho, e você teria que voltar para ler o texto — irritante.

Com essas duas propriedades no frontmatter, o arquivo ganha capacidade de “modo duplo”.

5.2 Criando um Arquivo de Modelo

A chave para a configuração dois em um é salvar essa configuração em um arquivo de modelo, para que novas notas a incluam automaticamente, sem adição manual a cada vez.

Passos:

1. Na sua pasta de modelos (por exemplo, 02 Templates/), crie um novo arquivo .md e nomeie-o “Modelo Excalidraw”.
2. Copie e cole o seguinte conteúdo nele e salve.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

Este é um modelo Excalidraw com uma tela vazia. As duas propriedades frontmatter (excalidraw-plugin: parsed e excalidraw-open-md: true) dizem ao plugin que este arquivo está no formato dois em um e deve abrir no modo Markdown por padrão. O compressed-json no final são os dados da tela vazia.

5.3 Configurações do Plugin Excalidraw

Ter um arquivo de modelo sozinho não é suficiente — você também precisa dizer ao plugin Excalidraw “onde encontrar o modelo” e desabilitar uma configuração que interfere no gerenciamento de arquivos.

Caminho: Configurações → Excalidraw

Duas coisas para modificar:

① Definir a localização do modelo: Nas configurações do Excalidraw, encontre a opção “Arquivo de modelo” e insira o caminho para o seu modelo, por exemplo, 02 Templates/Modelo Excalidraw. A partir de então, toda vez que você criar um novo arquivo com Excalidraw, ele usará automaticamente este modelo, incluindo a propriedade excalidraw-open-md: true.

② Desabilitar “Adicionar data ao nome do novo arquivo”: Por padrão, o Excalidraw anexa a data de criação aos nomes dos novos arquivos, por exemplo, Desenho 2026-03-12. Isso torna os nomes dos arquivos verbosos e incompatíveis com a lógica de nomenclatura de modelos do Obsidian. Encontre esta opção e desligue-a.

5.4 Vinculando uma Tecla de Atalho

Alternar entre o modo Markdown e o modo de desenho através do menu de contexto é muito lento — vincule uma tecla de atalho para alternância instantânea.

Caminho: Configurações → Atalhos de teclado → Pesquisar por “Excalidraw”

Encontre esta entrada: “Excalidraw: Alternar entre modo Excalidraw e Markdown”

Vincule-a a Cmd+E (Mac) ou Ctrl+E (Windows). Primeiro verifique se essa combinação de teclas já está em uso — o padrão do Obsidian Cmd+E é para itálico. Se você usa itálico com frequência, escolha uma tecla diferente, como Cmd+Shift+E.

Após vincular, em um arquivo dois em um, pressione Cmd+E para alternar entre “visualizar texto” e “visualizar desenho” — muito conveniente.

5.5 Dados Comprimidos no Final do Arquivo

Após a configuração, toda vez que você salvar o conteúdo do desenho em um arquivo dois em um, um bloco de dados será gerado automaticamente no final do arquivo:

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

Este bloco de código compressed-json é o resultado da compressão de todos os dados do desenho — coordenadas, cores, conteúdo de texto, relações de conexão — tudo comprimido nesta única linha de string.

Três coisas a observar:

• Não exclua este conteúdo manualmente. Se você o excluir, os dados do desenho desaparecem e, ao alternar para o modo Excalidraw, será exibida uma tela vazia.
• %% é a sintaxe de comentário do Obsidian. Na visualização de leitura, este conteúdo está oculto e não será exibido, portanto não afeta a legibilidade da nota.
• A linha compressed-json deve ser uma única linha completa. Se for quebrada por uma quebra de linha, o arquivo apresentará erro e não abrirá.

Resumo

O que você aprendeu hoje:

1. Excalidraw = ferramenta de desenho gratuita e de código aberto: Tem uma versão web independente; o Obsidian usa a versão do plugin de terceiros, com estilo de desenho à mão e tela infinita.
2. Diferença central do Canvas: O Canvas gera arquivos .canvas separados que precisam de gerenciamento independente; os dados do desenho do Excalidraw podem ser comprimidos e incorporados em arquivos .md — um arquivo, dois usos.
3. Instalação: Configurações → Plugins de terceiros → Plugins da comunidade → Pesquisar e instalar Excalidraw.
4. Atalhos das ferramentas: Teclas numéricas 1-8 e 0 para alternar ferramentas, Esc para sair da edição, Tab para pular entre elementos, teclas de seta para mover — ritmo central: teclas numéricas para ferramentas + Esc/Tab para navegação.
5. Desenho com IA: A Skill /obsidian-excalidraw permite que o Claude Code gere desenhos incorporados diretamente, muito mais rápido do que arrastar nós manualmente.
6. Configuração dois em um: Adicione excalidraw-plugin: parsed + excalidraw-open-md: true ao frontmatter, configure via arquivo de modelo, defina o caminho do modelo nas configurações do Excalidraw, vincule Cmd+E para alternância rápida de modo.
7. Dados no final do arquivo: O bloco de código ## Drawing + compressed-json são os dados do desenho comprimidos, envoltos em %%, invisíveis na visualização de leitura — não exclua manualmente.

Agradecimentos: A configuração “Dois em Um” deste capítulo referencia o método do criador do Bilibili Fiveth_ (vídeo: BV1hyhPzoEcd, creditado aqui.