Excalidraw

Quadro branco virtual para esboçar diagramas com aparência de desenho à mão GitHub: https://github.com/excalidraw/excalidraw

---

Visão Geral

Excalidraw é um aplicativo de quadro branco virtual gratuito e de código aberto que permite aos usuários criar diagramas, fluxogramas, wireframes e esboços com uma estética distinta de desenho à mão. Construído como um componente React e publicado como um pacote npm, ele pode ser usado de forma independente em excalidraw.com ou incorporado diretamente em outros aplicativos.

O projeto foi inicialmente criado por Christopher Chedeau (vjeux) e desde então cresceu para uma comunidade próspera de código aberto adotada por empresas como Google Cloud, Meta, CodeSandbox, Replit, Notion e Obsidian.

---

Funcionalidades Principais

Ferramentas de Desenho

• Formas básicas: retângulo, círculo, diamante, seta, linha
• Desenho à mão livre e borracha
• Ferramenta de texto com fontes personalizadas (Excalifont)
• Conexão de setas e setas rotuladas
• Bibliotecas de formas para componentes reutilizáveis

Tela e Interface do Usuário

• Tela infinita com suporte a zoom e pan
• Modo escuro
• Histórico de desfazer/refazer
• Atalhos de teclado para fluxo de trabalho eficiente
• Largura de traço, rugosidade, cor e preenchimento personalizáveis

Colaboração e Compartilhamento

• Colaboração multijogador em tempo real via links compartilháveis
• Criptografia de ponta a ponta para sessões seguras
• Links compartilháveis somente leitura para visualização
• Suporte a PWA — funciona totalmente offline
• Local-first: salvamento automático no armazenamento do navegador

Exportação e Integração

• Exportar para PNG, SVG e área de transferência
• Exportar/importar no formato JSON .excalidraw (aberto, legível por humanos)
• Incorporável como um componente React via pacote npm @excalidraw/excalidraw
• Integrado em ferramentas como Obsidian, extensões VS Code, Notion e mais

Localização

• Suporte completo a i18n (internacionalização) com vários idiomas

---

Pilha Técnica

Camada	Tecnologia
Frontend	React, TypeScript
Tela	API HTML5 Canvas
Desenho	Rough.js (renderização à mão livre)
Fontes	Excalifont (personalizada), Virgil (legado)
Pacote	Publicado no npm como @excalidraw/excalidraw
Licença	MIT

---

Casos de Uso

• Diagramas de arquitetura de sistemas — esboços informais, mas expressivos para equipes técnicas
• Wireframing e mockups de UI — protótipos rápidos de baixa fidelidade antes do Figma
• Brainstorming e ideação — pensamento visual em reuniões ou assíncrono
• Ensino e apresentações — o estilo de desenho à mão mantém o conteúdo acessível
• Documentação — incorpore diagramas ao vivo em wikis, páginas do Notion ou arquivos README

---

Excalidraw+ (Premium)

Além da versão gratuita de código aberto, a equipe oferece o Excalidraw+, um produto pago na nuvem que adiciona:

• Armazenamento em nuvem e espaços de trabalho organizados
• Sessões de colaboração persistentes
• Chat de voz dentro da tela
• Modo de apresentação (exportação baseada em slides para PPTX/PDF)
• Gerenciamento de permissões e compartilhamento com convidados
• Teste gratuito de 14 dias disponível

---

Comunidade e Adoção

• Estrelas: mais de 90.000 estrelas no GitHub (uma das ferramentas de quadro branco mais estreladas)
• Contribuidores: mais de 800 contribuidores de código aberto
• Usado por: Google Cloud, Meta, CodeSandbox, Obsidian, Replit, Slite, Notion, HackerRank
• Integrações: extensão VS Code, plugin Obsidian, plugin Confluence e mais

---

Primeiros Passos

Usar Online

Acesse https://excalidraw.com — não é necessário cadastro.

Auto-hospedagem / Incorporar

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

Executar Localmente

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start

---

Resumo

Excalidraw se destaca entre as ferramentas de diagramação por seu abraço deliberado à estética de desenho à mão — bordas irregulares e linhas fluidas que mantêm o conteúdo informal e focado em ideias em vez de polimento. Sua combinação de integração sem atrito (sem necessidade de login), colaboração poderosa, formato aberto e capacidade de incorporação como uma biblioteca React o torna uma escolha preferencial para desenvolvedores, designers e equipes em todo o mundo.