diagrampor Garry Tan

Diagram Skill.

Uma skill do Claude Code e Codex para diagramas e gráficos: transforma uma descrição ou código Mermaid em um arquivo Excalidraw editável mais SVG e PNG renderizados.

Diagrams & Data Visualization
Diagram

Baixar OpenDesign Ver guia de uso

garrytan/gstack · diagram/SKILL.mdSKILL.md

--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 16.276 caracteres no total

01 O que faz

O que a Skill de diagrama faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Converte uma descrição em inglês ou código-fonte Mermaid em um trio de diagramas: o código-fonte Mermaid (.mmd), um arquivo Excalidraw editável (.excalidraw) que abre em excalidraw.com, e saídas renderizadas em SVG e PNG. A renderização é totalmente offline via um servidor loopback local — usa o navegador Aside quando em execução, ou o próprio navegador headless do gstack.

Fluxogramas (graph LR/TD) e diagramas de sequência produzem cenas Excalidraw totalmente editáveis, com caixas, setas e texto reais. Outros tipos de diagrama Mermaid (state, class, gantt) são renderizados em SVG/PNG e exportados como um único elemento de imagem no arquivo Excalidraw — movível e anotável, mas não editável elemento por elemento. O código-fonte Mermaid permanece como a única fonte da verdade para iterações.

O que ele produz

Um arquivo de código-fonte Mermaid (.mmd) que serve como formato de intercâmbio amigável a LLMs e única fonte da verdade.

Veja o exemplo de prompt ↗

Como funciona

01
Criar o Código-Fonte Mermaid
Escreva Mermaid correspondendo ao pedido do usuário. Prefira graph LR para pipelines/fluxos e graph TD para hierarquias.
02
Preparar o Pacote de Renderização Uma Vez por Sessão
Prepare diagram-render.html no diretório de preparação de renderização do gstack sob ${TMPDIR:-/tmp}/gstack-render, endereçado por conteúdo via SHA do pacote.
03
Renderizar o Trio com Um Comando
Escreva o arquivo .mmd e, em seguida, execute gstack-render com o pacote preparado.
04
Mostrar e Entregar
Leia o PNG inline para que o usuário veja o diagrama. Liste os caminhos do trio e observe que o arquivo .excalidraw abre em excalidraw.com para edição.

02 Encontre o ideal para você

Quando Usar a Skill diagram

Use a skill diagram no Claude Code ou Codex quando o trabalho for diagramas e gráficos desse tipo. Adequação e limites abaixo são tirados do próprio arquivo da skill.

Boa Combinação

O usuário solicita criar um diagrama, desenhar a arquitetura, criar um fluxograma, diagramar isso ou visualizar um fluxo.
Produzir diagramas vetoriais nítidos para documentação, além de saídas raster para chat, issues ou READMEs.
Gerar um arquivo Excalidraw editável que o usuário pode abrir em excalidraw.com, mover caixas e continuar trabalhando.

Conheça os Limites

Diagramas com mais de 15 nós em uma única cena — divida em vários diagramas para melhor legibilidade.
Tipos Mermaid de estado, classe, gantt e outros que não sejam fluxograma/sequência geram um arquivo Excalidraw que é movível, mas não editável elemento a elemento.

O Que Fornecer

Descrição em inglês ou código-fonte MermaidO usuário fornece uma descrição do diagrama a ser criado, ou fornece código-fonte Mermaid existente para renderizar.

03 Dentro da skill

Regras que a skill de diagrama passa para Claude Code e Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nunca Entregue Sem Renderizar
Um arquivo .mmd por si só não é um diagrama. Se a renderização for impossível (bundle ausente ou nenhum navegador disponível), informe o bloqueio e pare.
Fluxogramas e Diagramas de Sequência São Totalmente Editáveis
Fluxogramas (graph LR/TD) e diagramas de sequência são convertidos em cenas Excalidraw totalmente editáveis, com caixas, setas e textos reais. Outros tipos Mermaid são exportados como um único elemento de imagem.
Codifique o Código-fonte em Base64 para Transporte no Navegador
Envie o código-fonte Mermaid para a página de renderização em base64 para evitar interpretar crases, ${ } e barras invertidas no código-fonte. Nunca insira o conteúdo do arquivo diretamente em um template literal JS.
O Diretório de Saída Segue o Contexto do Git
Grave em ./diagrams/ quando o cwd for um repositório git (artefatos que o usuário pode commitar); caso contrário, grave em /tmp/gstack-diagrams/. Derive o slug a partir do assunto em kebab-case, com no máximo 40 caracteres.
A Largura do PNG é Fixa em 1950px
O PNG rasterizado tem sempre 1950 pixels de largura, equivalente a 300dpi para uma peça de 6,5 polegadas.
A Renderização é Totalmente Offline
O bundle diagram-render é autocontido e servido a partir de loopback. Sem CDN, sem rede.
Renderize Novamente um Excalidraw Editado Sem Tocar no Mermaid
Quando o usuário editar um arquivo .excalidraw e quiser renderizar novamente, carregue o arquivo de cena e exporte SVG/PNG diretamente — não regenere a partir do código-fonte Mermaid.
Prefira Incorporar o .mmd para Destinos em PDF
Para diagramas destinados a um PDF, lembre o usuário de que o make-pdf renderiza blocos Mermaid nativamente — incorporar o .mmd no markdown é melhor do que incorporar o PNG.

04 Coloque em prática

Instalar diagram no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar diagram ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/garrytan/gstack --skill diagram

Formulário genérico de CLI skills para diagram/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Diagramas e Gráficos

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Leia a saída PNG embutida para verificar se o diagrama foi renderizado corretamente e corresponde à solicitação do usuário.
Verifique a saída do gstack-render por linhas ERROR: indicando erros de parse do Mermaid — corrija o .mmd e tente novamente se houver.
Inspecione a saída PAGE_ERRORS por 'Error processing Mermaid diagram' para confirmar quando o conversor Excalidraw recorreu a um único elemento de imagem.
Verifique se as três linhas OK <path> aparecem na saída do gstack-render, confirmando que os arquivos SVG, PNG e Excalidraw foram gravados.
Para re-renderizações de Excalidraw editadas, ignore o WorkerInTheMainChunkError benigno em PAGE_ERRORS — o SVG/PNG estão corretos.

No OpenDesign importe diagram a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Arquivo da skill: diagram/SKILL.md Checksum de conteúdo registrado na verificação; commit 71f6048
License: MIT De LICENSE.
Estrelas do repositório: 132.921 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório garrytan/gstack, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para diagram.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando invocar este skillUse para solicitações de diagrama, arquitetura, fluxograma ou visualização; SVG/PNG usam o estilo Mermaid, Excalidraw tem estética desenhada à mão.
Etapa 1 — Criar o diagramaEscreva o código-fonte Mermaid; fluxogramas e diagramas de sequência se tornam Excalidraw totalmente editável; outros tipos são exportados como imagem única.
Etapa 2 — Preparar o pacote de renderização (uma vez por sessão)Copie diagram-render.html para o diretório de preparação de renderização do gstack, endereçado por conteúdo via SHA, sem nunca sobrescrever sessões concorrentes.
Etapa 3 — Renderizar o trioEscreva o .mmd, execute gstack-render com a fonte codificada em base64, gerando SVG/PNG/Excalidraw; verifique erros de parse e PAGE_ERRORS.
Etapa 4 — Mostrar e entregarLeia o PNG embutido, liste os caminhos do trio, observe a editabilidade do Excalidraw; para alterações, edite o .mmd e renderize novamente.
RegrasNunca entregue sem renderizar; para destinos em PDF, lembre o usuário de que o make-pdf renderiza nativamente os blocos Mermaid.
Status de conclusãoDONE quando o trio for entregue; BLOCKED se o pacote estiver ausente ou nenhum navegador estiver disponível.

A Descrição da Própria Skill

"Transforma uma descrição em inglês (ou código-fonte mermaid) em um triplo de diagrama: o código-fonte, um arquivo .excalidraw editável que você pode abrir no excalidraw.com, e SVG + PNG renderizados. (gstack)"

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 16.276 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre o skill diagram

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que acontece se o pacote de renderização estiver ausente ou nenhum navegador estiver disponível?

O skill para e informa que você deve construir o pacote executando bun run build:diagram-render no repositório gstack, ou abrir o Aside (macOS 15+) se o navegador do gstack não estiver compilado. O skill nunca instala o Aside para você nem substitui por um CDN ou outro renderizador.

Diagram

Execute diagram em uma tarefa real de diagramas e gráficos.

Baixe OpenDesign, importe diagram a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/garrytan/gstack --skill diagram

O que a Skill de diagrama faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill diagram

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a skill de diagrama passa para Claude Code e Codex

Nunca Entregue Sem Renderizar

Fluxogramas e Diagramas de Sequência São Totalmente Editáveis

Codifique o Código-fonte em Base64 para Transporte no Navegador

O Diretório de Saída Segue o Contexto do Git

A Largura do PNG é Fixa em 1950px

A Renderização é Totalmente Offline

Renderize Novamente um Excalidraw Editado Sem Tocar no Mermaid

Prefira Incorporar o .mmd para Destinos em PDF