{"id":"diagram-design","name":"Diagram Design","url":"https://wunderlust.xyz/r/diagram-design","category":"skills","category_label":"Agent skills","tags":["free","open-source"],"short":"A skill that generates editorial diagrams in a single HTML file with SVG","what":"An agent skill that draws diagrams as a self-contained HTML + SVG file, using a brand's colors and fonts.","uses":"Use it to produce diagrams for blogs, decks or documentation with an editorial finish instead of the default style.","benefits":["45 diagram types (architecture, flow, sequence, ER, Gantt, Sankey, UML) with light and dark variants","Pulls colors and fonts from a site to match the brand","Imports and redraws draw.io, Mermaid and Excalidraw files; exports SVG and PNG","Supports a motion mode and the reduced-motion preference"],"caveats":["MIT license, free","The default network request is to Google Fonts; system fonts avoid it"],"links":{"official":"https://github.com/cathrynlavery/diagram-design"},"image":"https://wunderlust.xyz/media/diagram-design-poster.jpg","video":"https://wunderlust.xyz/media/diagram-design.webm","share_image":"https://wunderlust.xyz/og/r/diagram-design.jpg","similar":["visual-explainer","frontend-slides","anatomy","design-motion-principles","ui-ux-pro-max","design-md-chrome"],"added_on":"2026-11-05","pt":{"name":"Diagram Design","short":"Skill que gera diagramas editoriais em um único arquivo HTML com SVG","what":"Skill de agente que desenha diagramas como um arquivo HTML + SVG autocontido, usando as cores e fontes de uma marca.","uses":"Usar para produzir diagramas de blog, deck ou documentação com acabamento editorial em vez do estilo padrão.","benefits":["45 tipos de diagrama (arquitetura, fluxo, sequência, ER, Gantt, Sankey, UML) com variantes clara e escura","Puxa cores e fontes de um site para casar com a marca","Importa e redesenha arquivos draw.io, Mermaid e Excalidraw; exporta SVG e PNG","Suporta modo de movimento e preferência por movimento reduzido"],"caveats":["Licença MIT, gratuito","A requisição de rede padrão é do Google Fonts; fontes do sistema evitam isso"]},"schema_version":1}