Convert natural language descriptions into SVG diagrams and export PNG files.
npx skills add https://github.com/haposoft/cafekit --skill generate-graph
Please help me install this Agent Skill. Skill: generate-graph Source: https://github.com/haposoft/cafekit/tree/main/packages/spec/src/claude/skills/generate-graph Command: npx skills add https://github.com/haposoft/cafekit --skill generate-graph
This Skill automates the creation of high-quality technical diagrams from natural language descriptions, saving time and reducing the need for manual drawing.
Run the generate-graph skill with the following command:
/hapo:generate-graph "Draw a microservices architecture diagram in style 2 (dark terminal)"
High-intent search queries and answers about installing and using this skill.
To generate technical diagrams from natural language, you provide a plain text description of your system architecture or flow, and the tool transforms it into polished SVG diagrams and high-resolution PNG files.
Yes, you can create UML and architecture diagrams from plain text. The tool supports 14 diagram types, including full UML support and AI/agent domain patterns like RAG and Multi-Agent architectures.
Yes, exporting SVG diagrams as high-resolution PNG files requires python3, rsvg-convert, and librsvg2-bin dependencies to process the natural language input and render the final image outputs.
The best way to customize visual styles for generated flowcharts is to select from 7 built-in style options or define your own custom styling rules within the natural language prompt to match your publication requirements.
Yes, the tool supports built-in patterns for RAG and agentic search workflows. It possesses domain-specific knowledge of common AI/agent patterns, allowing you to accurately visualize complex multi-agent architectures.
If your natural language instructions are not generating the correct technical diagram, ensure your description clearly defines the structural relationships and explicitly references supported diagram types like UML or flowchart to guide the interpretation logic.
yige666sConvert natural language descriptions into SVG technical diagrams.
gyalamanch001aRender Mermaid diagrams into SVG and PNG images.
WhatIfWeDigDeeperGenerate class, sequence, flowchart, ERD, and C4 diagrams from Mermaid text syntax.
ElwinLiuConvert natural language requirements into Umple diagrams and SVG visuals.