Diagramas Bonitos Sem Figma e Editores Pesados

Toda vez que você precisa desenhar a arquitetura de uma aplicação ou uma sequência de chamadas de API, encontra o mesmo problema. Você pode ir ao Figma e passar meia hora ajustando cantos arredondados, fontes e os tons certos de cinza. Ou pode pedir ao Claude ou ChatGPT para gerar código Mermaid, mas vai acabar com um diagrama padrão com cores gritantes e layout estranho.

A autora do repositório diagram-design, Katherine Lavery, se deparou com essa rotina enquanto mantinha seu próprio blog. Em vez de mover pixels manualmente toda vez, ela criou um conjunto de instruções para Claude Code, Pi e Codex. O projeto transforma um LLM em um tipógrafo organizado que gera HTML e SVG autônomos sem bibliotecas de terceiros, JavaScript ou builds pesados.

Por Que Mudar a Abordagem de Geração de Diagramas

A ideia principal por trás do projeto são regras de design rigorosas. Um prompt comum produz blocos caóticos. Um conjunto de diagram-design regras força o modelo a aderir a uma grade com múltiplos de 4 pixels, controlar a densidade dos elementos e usar a cor de destaque apenas para 1–2 nós principais.

Você não precisa aprender novas DSLs ou descobrir sintaxe. Você pede ao agente para mostrar a arquitetura do serviço, e ele gera um arquivo HTML pronto com SVG embutido. Você pode abrir diretamente no navegador, colar em um artigo ou importar para uma apresentação.

Quatro Funcionalidades Principais da Ferramenta

A primeira funcionalidade é a integração automática de marca. Você dá ao agente um comando com um link para seu site. O script baixa a página principal, analisa os estilos, encontra cores de fundo, texto e destaque, e então lê as fontes. Antes de salvar as configurações, a ferramenta verifica automaticamente o contraste em relação ao padrão WCAG AA. Se a cor do texto for difícil de ler no fundo escolhido, o sistema sugerirá uma paleta ajustada.

A segunda funcionalidade é redesenhar diagramas existentes. Se você tem arquivos .drawio, .mmd ou diagramas Mermaid diretamente dentro do Markdown, você os envia ao agente. A ferramenta refaz o diagrama para o formato e público especificados:

• Mudanças de formato baseadas na tarefa: SVG para Figma, PNG para slides ou HTML para páginas web.
• O tamanho se ajusta ao meio: de uma ilustração estreita na documentação ao formato 16:9 para apresentações.
• O nível de detalhe controla o número de nós: um diagrama original com 20 blocos pode ser automaticamente reduzido a 7 elementos principais.
• A complexidade da linguagem se adapta ao leitor: termos técnicos como Auth Service / JWT RS256 são renomeados para algo que gerentes podem entender, como Sign-in.

A terceira funcionalidade é suporte para 27 tipos de visualização. A galeria tem de tudo: diagramas arquiteturais, diagramas ER, diagramas de sequência, linhas do tempo, matrizes 2x2 e funis.

A quarta funcionalidade é acessibilidade integrada. Os arquivos SVG gerados contêm tags role="img", atributos aria-labelledby válidos e prefixos de identificador únicos. Vários SVGs assim podem ser incorporados com segurança em uma única página sem conflitos no DOM.

Exemplos de Tipos de Visualização Disponíveis

Cada um dos 27 tipos de diagramas vem em três variantes de estilo: minimalista claro, minimalista escuro e editorial completo com cartões de descrição.

Arquitetura Componentes + conexões	Fluxograma Lógica de decisão	Sequência Mensagens ao longo do tempo
Máquina de estados Estados + transições	ER / modelo de dados Entidades + campos	Linha do tempo Eventos em um eixo
Swimlane Fluxo entre funções	Quadrante Posicionamento em dois eixos	Aninhado Hierarquia por contenção
Árvore Pai → filhos	Organograma Propriedade + roteamento	Venn Interseção de conjuntos
Pilha de camadas Abstrações empilhadas	Pirâmide / funil Hierarquia ranqueada ou queda	Consultant 2×2 Matriz de cenários · células nomeadas
Radar / Aranha Comparação multi-eixo	Loop Flywheel · estações em torno de um hub	IT atual Panorama legado · modernização
Alto nível Pilha completa em um cluster	Gráfico de barras Comparação categórica	Gráfico de linha Tendências ao longo do tempo
Gantt Tarefas e fases em uma linha do tempo	Gráfico de dispersão Distribuição e correlação	Processo Fluxo de trabalho sequencial multi-ator
Medallion Armazenamento de dados em múltiplas camadas	Fluxo de dados Etapas de pipeline por função	Integração DP Fontes → núcleo → consumidores
Matriz de segurança DP Permissões de acesso por função

Como Funciona a Arquitetura da Skill

O projeto usa um princípio de "divulgação progressiva de contexto". O arquivo SKILL.md serve apenas como uma tabela de conteúdo. Quando você pede para desenhar um fluxograma, a IA carrega o arquivo type-flowchart.md sem ler as descrições dos outros 26 tipos de diagramas.

Isso mantém o contexto de trabalho do agente limpo de informações desnecessárias. As respostas são geradas mais rapidamente, e o modelo não se confunde com regras de marcação de outros tipos de diagramas.

A estrutura do repositório é organizada logicamente:

• A pasta references/ contém descrições de cada tipo de diagrama, guias de estilo e primitivas específicas.
• scripts/ contém parsers Python para extrair estrutura de arquivos .drawio e Mermaid.
• assets/ tem o site da galeria gerada onde você pode ver exemplos em tempo real.

Instalação e Uso Prático

Você precisará de um dos assistentes de IA suportados para começar.

No Claude Code, o plugin se conecta com estes comandos:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

No Pi, a instalação é ainda mais simples:

pi install https://github.com/cathrynlavery/diagram-design

Após a instalação, você pode formular tarefas em linguagem coloquial:

"Сделай архитектурную диаграмму приложения: фронтенд, бэкенд, база данных Postgres и кэш Redis."
"Нарисуй последовательность авторизации с обновлением токена при ошибке 401."
"Перерисуй схему из файла platform.drawio для презентации инвесторам, оставь только 6 главных блоков."

A exportação de versões finalizadas é feita com uma chamada padrão:

/diagram-design:export path/to/diagram.html --png-only --scale=3

O script inicia o Chromium headless via Playwright e produz uma renderização limpa sem elementos de estilo extras.

Para Quem Este Projeto Será Útil

O repositório é um grande ajudante para desenvolvedores, redatores técnicos e fundadores de startups. Se você escreve artigos frequentemente, prepara apresentações ou atualiza documentação em um repositório, o projeto economizará horas de trabalho manual.

Dito isso, a autora imediatamente descreve as limitações. Não use a ferramenta para criar listas comuns, tabelas de comparação antes/depois ou diagramas de bloco único. Para essas tarefas, texto padrão ou uma tabela em Markdown funcionará mais rápido e de forma mais clara.