Baoyu Diagrampor Jim Liu (Baoyu)

Baoyu Diagram Skill.

Mantenha relações, rótulos e caminhos de conectores explícitos em um arquivo vetorial inspecionável.

Diagramas
SVG
Design de informação

Revisão da fonte · Baoyu DiagramSKILL.md

Tarefa Diagramas Produz • Um diagrama SVG escalável com texto e geometria explícitos • Uma exportação PNG produzida a partir do SVG • Um layout cujos grupos, fluxos e legenda correspondem ao sistema fornecido Antes de começar Um ambiente de texto/código para SVG; Bun ou Bun via npx para o script de conversão PNG fornecido.

Resumo editorial · fonte revisada 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Desenhe diagramas técnicos estruturados como SVG

Um fluxo de criação de diagramas SVG em tema escuro, com layouts semânticos, camadas de conectores e conversão para PNG.

Fluxo baseado na fonteNão é um benchmark de execução

Como funciona

Baoyu Diagram escreve diagramas SVG independentes para arquitetura, fluxogramas, sequências, linhas do tempo e outras explicações estruturais, em vez de pedir a um modelo de imagem que "pinte" os rótulos. A fonte oferece um sistema visual escuro com cores semânticas, tipografia monoespaçada e orientações de layout específicas para cada diagrama.

Um detalhe de implementação distintivo é a ordem das camadas: os conectores são desenhados atrás de máscaras opacas e de caixas de componentes translúcidas, para que as linhas não apareçam através dos rótulos. Espaçamento, posição da legenda e margem do viewBox são tratados como parte do contrato do diagrama. Um script incluído pode então gerar um PNG de maior resolução para ferramentas que não aceitam SVG.

Entregas esperadas

Um diagrama SVG escalável com texto e geometria explícitos
Uma exportação PNG produzida a partir do SVG
Um layout cujos grupos, fluxos e legenda correspondem ao sistema fornecido

Ver o briefing de exemplo

Do briefing à revisão

01
Escolha o modelo de relações
Decida se a informação é uma sequência, um fluxo de decisão, uma hierarquia, uma arquitetura ou outra estrutura compatível.
02
Planeje nós e conexões
Liste as entidades, os limites de agrupamento e a direção do fluxo antes de definir posições e rotear as setas.
03
Renderize e verifique o grafo
Escreva o SVG, inspecione sobreposições e folga dos rótulos, depois exporte um PNG e confirme que ambos os formatos continuam legíveis.

02 Quando usar

Quando usar

Um ambiente de texto/código para SVG; Bun ou Bun via npx para o script de conversão PNG fornecido.

Boa opção para

Documentação de arquiteturaÚtil para mostrar limites de serviços, armazenamentos de dados e relações direcionais com rótulos vetoriais editáveis.
Explicações de processosAdequada a fluxos e sequências em que a direção das setas e a ordem das mensagens importam mais que o estilo da ilustração.

Limites a verificar

Tema escuro opinativoA fonte revisada foi concebida em torno de uma paleta escura. Outro tratamento de marca exige uma adaptação explícita.
As fontes podem ser externasEmbora a saída seja um único arquivo SVG, o exemplo permite importar o Google Fonts. Verifique a aparência offline com a fonte substituta prevista ou com uma estratégia de fonte incorporada.

Traga estas informações

Entidades e relaçõesInforme os nós, as direções das conexões e os rótulos reais; não conte com o agente para inferir comportamentos do sistema que não estejam documentados.
Finalidade do diagramaIdentifique a pergunta que o diagrama deve responder e o nível técnico do público.
Ambiente de saídaEspecifique onde o SVG ou o PNG será usado, incluindo tamanho e requisitos offline.

03 Decisões importantes

Decisões que importam

Camadas de conectores legíveis
A fonte impede explicitamente que as setas apareçam através de caixas semitransparentes.
Semântica por tipo de diagrama
Mensagens de sequência, decisões de fluxograma e relações estruturais usam convenções diferentes, em vez de cartões conectados genéricos.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Mantenha as referências por tipo de diagrama e o script de conversão. Verifique a renderização e a disponibilidade das fontes no destino pretendido.

Arquivo de origem upstream

https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md

Um ambiente de texto/código para SVG; Bun ou Bun via npx para o script de conversão PNG fornecido.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use baoyu-diagram para criar um SVG mostrando nosso pipeline de upload: navegador, API, fila, worker e armazenamento de objetos. Use apenas as relações que eu especificar, agrupe os componentes do lado do servidor, rotule o comportamento de nova tentativa separadamente e mantenha a legenda fora do grafo. Verifique as direções das setas e a folga do texto, depois entregue versões em SVG e PNG sem acrescentar serviços inventados.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Cada seta e cada grupo correspondem à descrição do sistema fornecida.
Rótulos, conectores e legendas não se sobrepõem nem são cortados.
O SVG escala corretamente e o PNG exportado mantém a legibilidade.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Jim Liu (Baoyu)
Repositório: JimLiu/baoyu-skills
Arquivo da skill: skills/baoyu-diagram/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 1567581c26ec

Resumo editorial da fonte

Um fluxo de criação de diagramas SVG em tema escuro, com layouts semânticos, camadas de conectores e conversão para PNG.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um indicador de popularidade datado, não o uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Isso usa uma API de geração de imagens?

O fluxo documentado escreve SVG diretamente e o converte em PNG, diferentemente das skills de ilustração com geração raster.

Posso editar os rótulos depois?

Os rótulos continuam como texto SVG no arquivo de origem, então podem ser alterados em um editor adequado ou por meio de código.

O SVG funciona totalmente offline por padrão?

Verifique o tratamento das fontes. A fonte permite uma importação externa do Google Fonts, mesmo que os demais elementos do diagrama estejam contidos em um único arquivo.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design