Criei mais de 30 diagramas com uma única skill do Claude Code — sem Figma

Autoria: Prompt Engineer · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: I Made 30+ Diagrams With One Claude Code Skill — No Figma · Canal: Prompt Engineer · 10:23 · Assistir no YouTube

Tópicos: Agentes de IA, Claude Code, Geração de conteúdo com IA, Open source e ecossistemas de software

Resumo

O vídeo apresenta Diagram Design, uma skill open source criada por Katherine Lavery para gerar diagramas editoriais consistentes em diferentes agents. A demonstração explica suas regras visuais, os formatos de saída e a criação de diagramas a partir de prompts, além de mostrar 12 exemplos sobre um pipeline de produção de vídeos com IA. A skill oferece 39 tipos de diagrama e ferramentas de importação, mas suas regras rígidas, o limite de nós e os ajustes geométricos manuais podem ser restritivos. O apresentador conclui que ela é útil para quem produz documentação, posts de blog ou vídeos.

Pontos-chave

Diagram Design é uma skill — um conjunto de instruções e templates — que pode ser instalada em diferentes agents.
A saída é um único arquivo HTML com SVG embutido, sem etapa de build, JavaScript ou imagens externas.
As regras visuais priorizam simplicidade: até nove nós, uma cor de destaque e uma grade de quatro pixels.
A skill define regras para conectores e inclui scripts Python para verificar problemas geométricos.
O sistema de identidade visual pode usar as cores e fontes de um site para combinar os diagramas à marca.
O vídeo demonstra 12 tipos de diagrama aplicados a um pipeline de produção de vídeos com IA.
A skill também oferece importação de Mermaid, draw.io e Excalidraw, com um relatório do que foi alterado.
Entre as limitações estão o estilo visual restrito, o trabalho de dividir sistemas grandes e a necessidade ocasional de corrigir a geometria à mão.

Capítulos

Início	Capítulo	Resumo
00:00	O que é Diagram Design	O apresentador introduz a skill, sua origem e os tipos de diagrama que ela pode produzir.
02:03	Formato de saída e regras visuais	O vídeo explica o arquivo HTML com SVG, as regras de composição e o sistema de identidade visual.
04:07	Demonstrações ao vivo	Claude Code cria um quadro Kanban e um diagrama em pirâmide a partir de prompts.
05:41	Doze diagramas para um pipeline de vídeos	O apresentador percorre exemplos de arquitetura, fluxos, banco de dados e outros diagramas.
09:19	Vantagens, limitações e veredito	O vídeo resume os recursos e as restrições da skill e apresenta a avaliação final do autor.

Citações

Diagramas editoriais que seu designer não vai odiar. — 00:30

O arquivo de saída é um único HTML com um SVG embutido. — 02:03

A decisão de maior qualidade costuma ser eliminar. — 02:03

Ela transforma ‘faça um diagrama’ de uma tarefa de 30 minutos no Figma em um único prompt. — 10:23

Conceitos e entidades

Diagram Design (ferramenta): Skill open source que gera diagramas com regras visuais e templates editoriais.
Katherine Lavery (pessoa): Autora de Diagram Design.
Claude Code (ferramenta): Ferramenta em que o apresentador instala e demonstra a skill.
Figma (ferramenta): Ferramenta de design usada como contraste à criação de diagramas por prompt.
Mermaid (ferramenta): Formato de diagramas que a skill consegue importar e redesenhar.
Excalidraw (ferramenta): Ferramenta cujo formato de diagramas é citado entre as opções de importação.
SVG (conceito): Formato vetorial embutido no arquivo HTML gerado pela skill.
MIT License (conceito): Licença sob a qual o projeto é disponibilizado, conforme informado no vídeo.

Tradução completa (pt-BR)

00:00 Todos os diagramas que você está vendo na tela agora foram feitos por uma única skill do Claude Code — 12 deles. Arquitetura, sequência, Sankey, espinha de peixe, um esquema de banco de dados. Sem Figma, sem arrastar caixas para lá e para cá, e nenhum deles parece aquela típica porcaria genérica de IA, com caixas arredondadas e brilho roxo. Hoje, vou mostrar o que é essa skill, como ela funciona por baixo dos panos, onde deixa a desejar e vou criar diagramas ao vivo diante de vocês. O projeto se chama Diagram Design, de Katherine Lavery, e é open source no GitHub. O slogan é simples:

00:30 diagramas editoriais que seu designer não vai odiar. Não é um app nem um site em que você faz login. É uma skill: uma pasta com instruções e templates que você instala no Claude Code, Dex, GitHub Copilot, Factory Droid ou Pi. Quando você pede um diagrama ao seu agent, a skill assume o controle e diz ao modelo exatamente como desenhá-lo. Por que isso existe? A autora escreve um blog e, toda vez que pedia um diagrama a uma IA, recebia a mesma coisa genérica: caixas arredondadas, cores aleatórias, um layout que não tinha nada a ver com o restante

01:02 do site dela. Então, as opções eram passar 30 minutos brigando com o Figma ou simplesmente desistir do diagrama. Essa skill é a resposta dela para esse problema. Para instalá-la no Claude Code, são necessários dois comandos. Primeiro, adicione o marketplace com {slash} plugin marketplace add Katherine Lavery {slash} diagram design; depois, {slash} plugin install. É só isso. Se quiser mexer no estilo por conta própria, você também pode clonar o repo e colocar a pasta da skill no diretório {dot} Claude {slash} skills do seu projeto. Foi exatamente o que fiz para este vídeo. Pronta para usar, ela oferece

01:33 39 tipos de diagramas. Os clássicos estão lá: arquitetura, fluxograma, sequência, máquina de estados, diagramas ER, cronogramas e raias. Mas vai muito além disso. Fluxos Sankey, análise de causa raiz em espinha de peixe, mapas Wardley, quadros Kanban, jornadas do usuário, mapas de deploy, classes UML e esquemas físicos de banco de dados. Aqui está a galeria interativa, onde você pode conferir cada um deles nos modos claro, escuro e em um layout editorial completo. E aqui está a parte de que eu gosto muito. A

02:03 saída é um único arquivo HTML com um SVG embutido. Sem etapa de build. Sem JavaScript. Sem imagens externas. Basta clicar duas vezes e ele abre em qualquer navegador. Você pode inseri-lo em uma postagem de blog, exportá-lo como PNG para apresentações ou como SVG para o Figma. Então, como ela faz o modelo desenhar bem? Com regras — muitas regras bastante categóricas. A primeira é a minha favorita. O que costuma gerar a maior qualidade é eliminar elementos. Cada nó precisa justificar seu lugar. A densidade desejada é quatro em 10. Há um máximo de nove

02:35 nós por diagrama. E, se você passar desse limite, a skill instrui o modelo a dividir o conteúdo em dois diagramas, em vez de comprimir tudo. As cores seguem a mesma lógica. Há exatamente uma cor de destaque, aplicada a apenas um ou dois elementos: aquilo para o qual o leitor deve olhar primeiro. Todo o restante fica em tinta e cinza. Sem sombras. Sem cantos muito arredondados. Cada coordenada, tamanho de fonte e espaçamento segue uma grade de quatro pixels. E a tipografia é fixa: uma fonte serifada para títulos, uma sem serifa para nomes e uma monoespaçada apenas para rótulos técnicos, como portas e nomes de

03:06 arquivos. Depois, há seis regras para conectores, que a skill considera inegociáveis. As setas precisam ter ângulos retos com cantos arredondados. Nada de linhas diagonais. Um rótulo nunca pode ficar sobre a própria seta. Duas setas nunca podem se sobrepor, e uma seta não pode passar escondida atrás de uma caixa à qual não se conecta. O repo até inclui scripts em Python que verificam se o seu arquivo tem esses erros. E eu os executei em todos os diagramas deste vídeo. Há também um sistema de identidade visual. Todas as cores ficam em um único arquivo de guia de estilo, com funções nomeadas, como papel, tinta, atenuado e

03:37 destaque. Aponte a skill para o seu site e ela extrai as cores e as fontes, verifica o contraste e reescreve esse arquivo. Assim, todos os diagramas futuros combinam com a sua identidade visual. Na primeira utilização em um projeto novo, ela até para e pergunta se você quer configurar a identidade visual ou usar o padrão. Mantive a aparência padrão neste vídeo. Chega de teoria; vamos criar diagramas ao vivo. Abri uma pasta nova, coloquei a skill em dot cloud {slash} skills e dei ao Claude Code um prompt em inglês simples, no modo headless,

04:07 sem precisar conduzi-lo passo a passo. Esta é a saída real da sessão, não uma simulação. Primeiro prompt: crie um quadro Kanban com o backlog dos meus vídeos do YouTube, com colunas para ideias, roteiro, gravação, edição e publicados. Defina um limite de trabalho em andamento para edição e um cartão bloqueado. O Claude Code carregou a skill, leu as regras do Kanban e o template, apresentou um plano, escreveu o arquivo e, em seguida, executou a própria verificação da skill, que foi aprovada. A execução inteira levou cerca de 1 minuto e 45,9 turnos, por

04:40 cerca de US$ 1,45 em tokens. E aqui está o resultado. Cinco colunas, e os únicos dois destaques foram aplicados exatamente aos elementos certos. A edição ultrapassou o limite: três de dois; e há o cartão bloqueado de renderização da voz. Não toquei em um único pixel. Segundo prompt: uma pirâmide do que faz as pessoas assistirem a um vídeo de tecnologia. Áudio nítido na base, depois uma demonstração real, um veredito honesto, um gancho forte e, no topo, título e miniatura. De novo, um prompt, um arquivo, cerca de 80 segundos e oito

05:11 turnos. O plano do modelo foi curto: pirâmide apontando para cima, cinco camadas, laranja apenas no ápice. E foi exatamente isso que ele desenhou. Título e miniatura no topo, em laranja, com uma pequena observação: decide clicar. Ele até adicionou um eixo à esquerda: fundamentos embaixo, maior capacidade de influência em cima. O verificador de geometria não encontrou nenhum problema. Agora, o grande teste. Eu queria ver se isso se sustentava com muitos tipos ao mesmo tempo. Então, escolhi um tema: meu próprio pipeline de vídeos sobre IA; e criei 12 diagramas sobre ele,

05:41 cada um de um ângulo diferente. Para ser transparente, gerei esses 12 com um único script em Python que segue as regras e os templates da skill, em vez de usar 12 conversas separadas. Vamos analisá-los. Número um: arquitetura. O roteiro entra no orquestrador, que é o único nó laranja, porque é ali que tudo é decidido. Dele saem ramificações para a clonagem de voz, o renderizador e as imagens de apoio. Depois, o MP4 final é enviado ao YouTube. Repare nas setas. Cada curva é um ângulo reto arredondado e bem definido, e cada rótulo tem seu próprio espacinho. Dois:

06:13 um fluxograma para responder à pergunta: publicar ou corrigir primeiro? Legendas sincronizadas, volume em menos 14. O caminho mais direto até a publicação está em laranja, e os ajustes retornam por uma linha tracejada. Losangos para decisões, formas de cápsula para início e fim. O formato comunica o significado, não uma cor aleatória. Três: um diagrama de sequência de uma linha da narração. O orquestrador verifica o cache, não encontra o item, chama a API de texto para fala, e há um bloco estranho para os dois resultados. Um

06:43 sucesso ou um limite de requisições com espera progressiva. As chamadas são linhas sólidas, as respostas são tracejadas e o armazenamento assíncrono usa uma ponta de seta aberta. Essas são todas regras da skill. Quatro: o ciclo de vida de um trabalho de renderização como máquina de estados. Na fila, renderizando, codificando, publicado. Um tempo limite o leva ao estado de falha, que é laranja, e ele tenta novamente até três vezes antes de desistir e me alertar. Cinco: uma raia mostrando quem faz o quê. Eu, a nuvem, a máquina e o YouTube. A passagem em laranja é o momento em que o trabalho volta para uma pessoa revisar, o que

07:14 honestamente é a etapa mais lenta de todo o meu pipeline. Seis: um gráfico de Gantt, com oito dias do repo ao envio, agrupados em pré-produção, produção e pós-produção. Exatamente uma barra está em laranja: o lote de 12 diagramas, porque esse é o caminho crítico. E há um marcador tracejado para o dia de hoje. Sete: o ciclo do volante de crescimento. Escolher um tema, escrever o roteiro, produzir, publicar, medir, aprender e voltar ao início. Cada etapa alimenta um único núcleo escuro no meio: a memória do canal. Os raios tracejados são os retornos. Medir está em laranja porque a curva de retenção

07:46 é o que orienta o próximo vídeo. Oito: um Sankey mostrando para onde vão 60 horas de produção. Aqui, a espessura das faixas representa os dados, e o total de cada coluna é exatamente 60. Um fluxo está em laranja: correções de voz que forçam novas renderizações. Esse é o ponto editorial. A maior parte do meu tempo de renderização desperdiçado está ligada à faixa de voz. Nove: um quadrante mostrando quais ferramentas justificam seu lugar, comparando impacto e esforço. A própria skill Diagram Design fica no quadrante “fazer primeiro”, e os diagramas feitos à mão no Figma ficam embaixo, em “pular”

08:17 cada eixo, sem setas embutidas nos rótulos. Novamente, uma regra. 10, um esquema de banco de dados real, com vídeos, cenas, recursos e renderizações, tipos SQL e chips de restrição. As linhas de chave estrangeira se conectam às linhas exatas das colunas, não apenas às caixas, e a única linha laranja é a perigosa. Ao excluir, propagar a exclusão: exclua um vídeo e as cenas dele também serão excluídas. 11, um diagrama de espinha de peixe para análise da causa raiz, com o efeito à direita: o áudio da voz fica fora de sincronia com as legendas em 380 milissegundos aos

08:48 oito minutos. Cinco categorias investigadas e uma causa confirmada em laranja: uma incompatibilidade na taxa de amostragem da faixa de voz. E 12, importação. Escrevi um fluxograma confuso em Mermaid, com uma classe de estilo e uma nota desconectada. A skill inclui um script extrator que analisa Mermaid como texto simples, nunca o executa e imprime um resumo. Depois, o diagrama é redesenhado do zero. Nesse sistema de design, a nota sem uso foi removida, a estilização de Mermaid foi ignorada, o cilindro virou uma caixa de armazenamento e o ciclo de decisão foi mantido. Você recebe um relatório de fidelidade

09:19 do que foi cortado. Então, os pontos positivos. Um: o resultado realmente parece projetado e consistente em todos os tipos. Dois: é um único arquivo HTML, sem build e sem dependências. Três: 39 tipos, além de importação de Mermaid, draw.io e Excalidraw. Quatro: adaptação à identidade visual do seu site. Cinco: SVG acessível por padrão. E seis: é gratuito, licenciado sob MIT e funciona com muitos agents, não apenas na nuvem. Agora, os pontos negativos, sem rodeios. As regras são rígidas, então, se

09:51 você quiser um diagrama colorido, denso e cheio de elementos, isso vai dificultar as coisas. O limite de nove nós significa que sistemas grandes precisam ser divididos. Acertar a geometria ainda é difícil. Enquanto criava meus 12 diagramas, o verificador de geometria detectou algumas vezes rótulos sobrepostos às caixas, e foi preciso ajustá-los manualmente. Esses scripts de verificação ficam no repo, então uma instalação simples do plugin não vai incluir todos eles. E o modelo precisa ler bastante, o que significa mais tokens por diagrama. Meu veredito: se você escreve documentação, posts de blog ou faz vídeos como eu, esta é uma das skills mais

10:23 úteis que instalei este ano. Ela transforma um “faça um diagrama para mim” que levaria 30 minutos no Figma em um único prompt, e o resultado parece ter sido feito por um designer. O link para o repo está na descrição. Conte nos comentários que tipo de diagrama você quer ver a seguir, e até o próximo vídeo.

Transcrição original

[00:00] Every diagram you see on screen right now was made by one Claude code skill, 12 of them. Architecture, sequence, Sankey, fishbone, a database schema. No Figma, no dragging boxes around, and none of them look like the usual AI slop with rounded boxes and purple glow. Today, I’ll show you what this skill is, how it actually works under the hood, where it falls short, and I’ll build diagrams live in front of you. The project is called Diagram Design by Katherine Lavery, and it’s open-source on GitHub. The tagline is simple:

[00:30] editorial diagrams your designer won’t hate. It’s not an app, and it’s not a website you log into. It’s a skill, a folder of instructions and templates that you install into Claude code, Dex, GitHub Copilot, Factory Droid, or Pi. When you ask your agent for a diagram, the skill takes over and tells the model exactly how to draw it. Why does this exist? The author writes a blog, and every time she asked an AI for a diagram, she got back the same generic thing: rounded boxes, random colors, a layout that looked nothing like the rest

[01:02] of her site. So, the choice was fight with Figma for 30 minutes or skip the diagram completely. This skill is her answer to that problem. Installing it in Claude code takes two commands. First, add the marketplace with {slash} plugin marketplace add Katherine Lavery {slash} diagram design, then {slash} plugin install. That’s it. If you want to hack on the style yourself, you can also clone the repo and drop the skill folder into your project’s {dot} Claude {slash} skills directory. That’s exactly what I did for this video. Out of the box, you

[01:33] get 39 diagram types. The classics are there: architecture, flowchart, sequence, state machine, ER diagrams, timelines, and swim lanes. But, it goes much further. Sankey flows, fishbone root cause, Wardley maps, Kanban boards, user journeys, deployment maps, UML classes, and physical database schemas. Here is the live gallery where you can flip through every single one in light, dark, and a full editorial layout. And here’s the part I really like. The

[02:03] output is one single HTML file with an inline SVG inside it. No build step. No JavaScript. No external images. You double-click it and it opens in any browser. You can drop it into a blog post, export it to PNG for slides, or to SVG for Figma. So, how does it make the model draw well? With rules, a lot of very opinionated rules. The first one is my favorite. The highest quality move is usually deletion. Every node has to earn its place. The target density is four out of 10. There is a maximum of nine

[02:35] nodes per diagram. And if you go over that, the skill tells the model to split it into two diagrams instead of cramming. Color works the same way. There is exactly one accent color and it goes on one or two things only. The thing the reader should look at first. Everything else stays in ink and gray. No shadows. No big rounded corners. Every coordinate, every font size, every gap sits on a four-pixel grid. And typography is fixed. A serif for titles, a sans for names, and mono only for technical labels like ports and file

[03:06] names. Then there are six connector rules and the skill calls them non-negotiable. Arrows must be right angles with rounded corners. No diagonal lines. A label can never sit on top of its own arrow. Two arrows can never overlap and an arrow cannot sneak behind a box it doesn’t connect to. The repo even ships Python scripts that check your file for these mistakes. And I ran them on every diagram in this video. There’s also a brand system. All colors live in one style guide file as named roles like paper, ink, muted, and

[03:37] accent. Point the skill at your website and it pulls your colors and fonts, checks the contrast, and rewrites that file. So, every future diagram matches your brand. On first use in a new project, it actually stops and asks you whether you want to set up your brand or go with the default. I kept the default look for this video. Enough theory, let’s make diagrams live. I opened a fresh folder, put the skill inside dot cloud {slash} skills, and gave Claude Code a plain English prompt in headless

[04:07] mode with no hand-holding. This is the real session output, not a mock-up. First prompt, make a Kanban board of my YouTube video backlog with columns for ideas, scripting, recording, editing, and published. A work in progress limit on editing and one blocked card. Claude Code loaded the skill, read the Kanban rules and the template, stated a plan, wrote the file, and then ran the skill’s own self-check, which passed. The whole run took about 1 minute, 45.9 turns, and

[04:40] around $1.45 in tokens. And here is the result. Five columns and its spend is only two accents on exactly the right things. Editing is over its limit, three of two, and the blocked voice re-render card. I didn’t touch a single pixel. Second prompt, a pyramid of what makes a tech video get watched. Clear audio at the base, then a real demo, an honest verdict, a strong hook, and title and thumbnail at the top. Again, one prompt, one file, about 80 seconds and eight

[05:11] turns. The model’s plan was short. Pyramid pointing up, five layers, orange on the apex only. And that’s exactly what it drew. Title and thumbnail at the top in orange with a little note, decides to click. It even added an axis on the left, foundation at the bottom, higher leverage at the top. The geometry checker found zero problems. Now, the big test. I wanted to see if it holds up across many types at once. So, I picked a one theme, my own AI video pipeline, and built 12 diagrams of it,

[05:41] each from a different angle. To be transparent, I generated these 12 with one Python script that follows the skills rules and templates rather than 12 separate chats. Let’s walk through them. Number one, architecture. The script goes into the orchestrator, which is the one orange node, because that’s where everything is decided. It fans out to the clone voice, the renderer, and the B-roll. Then the final MP4 goes up to YouTube. Look at the arrows. Every bend is a clean rounded right angle, and every label has its own little gap. Two,

[06:13] a flowchart for the question, ship it or fix it first? Captions in sync, loudness at minus 14. The happy path to publish is in orange, and the fixes loop back with a dashed line. Diamonds for decisions, pills for start and end. The shape carries the meaning, not random color. Three, a sequence diagram of one narration line. The orchestrator checks the cache, misses, calls the text-to-speech API, and there’s an odd block for the two outcomes. A clean

[06:43] success or a rate limit with a back-off. Calls are solid, returns are dashed, and the async store uses an open arrowhead. Those are all rules from the skill. Four, the life of a render job as a state machine. Queued, rendering, encoding, published. A timeout sends it to failed, which is the orange state, and it retries up to three times before it gives up and alerts me. Five, a swim lane of who does what. Me, Cloud, the machine, and YouTube. The orange hand-off is where the work goes back to a human for review, which

[07:14] honestly is the slowest step in my whole pipeline. Six, a Gantt chart, eight days from repo to upload, grouped into pre-production, production, and post. Exactly one bar is orange, the 12 diagram batch, because that’s the critical path. And there’s a dashed today marker. Seven, the loop of flywheel. Pick a topic, script, produce, publish, measure, learn, and back to the top. Every station writes into one dark hub in the middle, the channel memory. the dashed spokes are the right backs. Measure is orange because the retention

[07:46] curve is what drives the next video. Eight, a Sankey of where 60 production hours go. Here, the band thickness is the data and every column adds up to exactly 60. One flow is orange, voice fixes forcing re-renders, and that’s the editorial point. Most of my wasted render time traces back to the voice track. Nine, a quadrant of which tools earn their place, impact against effort. The diagram design skill itself sits in the do first corner, and handmade Figma diagrams sit down and skip one word on

[08:17] each axis, no arrows baked into the labels. Again, a rule. 10, a real database schema, videos, scenes, assets, and renders with SQL types and constraint chips. The foreign key lines attach to the exact column rows, not just the boxes, and the one orange line is the dangerous one. On delete cascade, delete a video and its scenes go with it. 11, a fishbone for root cause, the effect on the right, voice drifts off the captions plus 380 milliseconds by

[08:48] minute eight. Five categories investigated and one confirmed cause in orange, a sample rate mismatch in the voice track. And 12, import. I wrote a messy mermaid flow chart with a style class and an unconnected note. The skill ships an extractor script that parses mermaid as plain text, never runs it, and prints a digest. Then the diagram gets redrawn from scratch. In this design system, it dropped the dead note, ignored the mermaid styling, turned the cylinder into a store box, and kept the decision loop. You get a fidelity report

[09:19] of what was cut. So, pros. One, the output genuinely looks designed and consistent across every type. Two, it’s a single HTML file, no build, and no dependencies. Three, 39 types plus mermaid, draw.io and Excalidraw import. for brand matching from your website, five accessible SVG by default, and six it’s free MIT licensed and works across many agents, not just cloud. Now, the honest cons. The rules are strict, so if

[09:51] you want a colorful dense busy diagram, this will fight you. The budget of nine nodes means big systems must be split. Getting the geometry right is still hard. While building my 12, the geometry checker caught labels overlapping boxes a few times and they had to be nudged by hand. Those checker scripts live in the repo, so a plain plugin install won’t give you all of them. And it’s a lot of reading for the model, which means more tokens per diagram. My verdict, if you write docs, blog posts, or make videos like I do, this is one of the most

[10:23] useful skills I’ve installed this year. It turns make me a diagram from a 30-minute Figma job into one prompt and the result looks like it came from a designer. The link to the repo is in the description. Let me know in the comments which diagram type you want to see next and I’ll see you in the next one.