axtonliu/obsidian-canvas-creator

O que obsidian-canvas-creator faz?

Cria arquivos Obsidian Canvas a partir de conteúdo de texto, suportando os layouts MindMap e livre. Use esta habilidade quando os usuários quiserem visualizar conteúdo como um canvas interativo, criar mapas mentais ou organizar informações espacialmente no formato Obsidian.

Como usar

Esta habilidade é acionada quando um usuário solicita a criação de um canvas do Obsidian. Exemplos de prompts:

• "Crie um canvas do Obsidian que mostre um mapa mental sobre [tópico]"
• "Gere um canvas livre para [tópico]"
• "Preciso de um canvas visual para os conceitos de [tópico]"

Layouts Suportados

MindMap

• Cria uma estrutura hierárquica com um nó raiz e nós filhos
• Cada nó pode ter vários filhos
• Ideal para estruturas de árvore
• As bordas conectam nós pai-filho

Livre (Freeform)

• Cria nós posicionados livremente no canvas
• Permite conexões arbitrárias entre nós
• Ideal para brainstorming, diagramas de fluxo e conteúdo não hierárquico

Estrutura de Saída

O agente irá:

1. Analisar a solicitação do usuário
2. Extrair o conteúdo principal e a estrutura
3. Gerar o JSON do canvas baseado no layout escolhido
4. Fornecer instruções ao usuário sobre como salvar o arquivo

Formato do Arquivo

Os arquivos de canvas do Obsidian são armazenados como .canvas (arquivos JSON). O formato segue a especificação oficial do canvas do Obsidian.

Exemplo de saída do MindMap:

{
  "nodes": [
    {"id": "root", "type": "text", "text": "Tópico Principal", "x": 400, "y": 100, "width": 200, "height": 60},
    {"id": "child1", "type": "text", "text": "Subtópico 1", "x": 200, "y": 300, "width": 180, "height": 60},
    {"id": "child2", "type": "text", "text": "Subtópico 2", "x": 600, "y": 300, "width": 180, "height": 60}
  ],
  "edges": [
    {"id": "e1", "fromNode": "root", "toNode": "child1", "fromSide": "bottom", "toSide": "top"},
    {"id": "e2", "fromNode": "root", "toNode": "child2", "fromSide": "bottom", "toSide": "top"}
  ]
}

Exemplo de saída Livre:

{
  "nodes": [
    {"id": "n1", "type": "text", "text": "Ideia Central", "x": 400, "y": 100, "width": 200, "height": 80},
    {"id": "n2", "type": "text", "text": "Conceito Relacionado", "x": 150, "y": 300, "width": 200, "height": 80},
    {"id": "n3", "type": "text", "text": "Outra Ideia", "x": 650, "y": 300, "width": 200, "height": 80}
  ],
  "edges": [
    {"id": "e1", "fromNode": "n1", "toNode": "n2"},
    {"id": "e2", "fromNode": "n1", "toNode": "n3"}
  ]
}

Como Salvar

1. Copie o JSON gerado
2. Crie um novo arquivo com extensão .canvas (ex: meu-canvas.canvas)
3. Cole o JSON no arquivo
4. Salve o arquivo dentro da sua pasta de vaults do Obsidian
5. O canvas irá aparecer como um arquivo no Obsidian e poderá ser aberto com o visualizador de canvas integrado

Limitações

• Atualmente suporta apenas nós de texto (não suporta nós de mídia ou grupos)
• O posicionamento dos nós é otimizado para clareza, mas pode precisar de ajustes manuais
• Adequado para canvases de tamanho pequeno a médio (até ~50 nós); para estruturas muito grandes, um renderizador dedicado de mapas mentais pode ser mais adequado

Quando Usar vs. Quando Não Usar

Use quando:

• O usuário explicitamente pedir um canvas do Obsidian
• Precisa visualizar relações hierárquicas (mapa mental)
• Quer organizar informações espacialmente de forma flexível
• Preparar material para ambiente Obsidian

Não use quando:

• Usuário precisar de diagramas Mermaid (prefira gerar blocos Mermaid)
• Usuário quiser mapas mentais interativos em tempo real
• O conteúdo for melhor representado como texto plano, lista ou quadro

Instalação da Habilidade

1. Adicione esta habilidade ao seu assistente de codificação (Claude Code, Cursor, Codex, etc.)
2. Certifique-se de que o assistente tenha acesso ao sistema de arquivos para salvar os arquivos .canvas
3. Opcional: Configure um diretório de vaults do Obsidian padrão para facilitar o fluxo de trabalho