Generate SVG technical diagrams and export them to PNG.
npx skills add https://github.com/yuquanliu1-dot/Test --skill draw-diagram
Please help me install this Agent Skill. Skill: draw-diagram Source: https://github.com/yuquanliu1-dot/Test/tree/main/.claude/skills/draw-diagram Command: npx skills add https://github.com/yuquanliu1-dot/Test --skill draw-diagram
It helps you quickly visualize complex systems, flows, and architectures as production-quality SVG diagrams that can be exported to PNG for documentation and presentations.
Generate a diagram from your description using the draw-diagram skill, then open the mandatory interactive preview in your browser to verify layout before exporting the final SVG/PNG.
High-intent search queries and answers about installing and using this skill.
To generate an SVG architecture diagram, provide your system description to the tool, which produces production-quality SVG output. It validates syntax and uses style references to ensure consistent, deterministic rendering of your system structure and data flows.
Yes, you can export a sequence diagram to PNG using rsvg-convert. The tool generates the initial SVG output and then utilizes rsvg-convert, when available, to produce the final PNG file for your documentation or presentations.
Supported diagram types for visualizing data flows and system architecture include flowcharts, sequence diagrams, UML, ER diagrams, timelines, mind maps, agent/memory architectures, and network topology, driven entirely by your text-based system descriptions.
Yes, the generated SVG supports an interactive HTML preview before exporting. You can open this preview in your browser to drag nodes, edit labels, switch styles, and verify the layout before exporting the final SVG or PNG file.
You need python3 and rsvg-convert installed to create flowcharts and export them to PNG. Python3 executes the generation scripts, while rsvg-convert handles the PNG export, although the core SVG generation can still function independently.
To edit labels and nodes in a generated UML diagram, open the mandatory interactive HTML preview in your browser. This mode allows you to directly drag nodes, edit labels, switch styles, and verify layout before exporting the final SVG.
fengyilyGenerate SVG technical diagrams from textual system descriptions.
jg-chalk-ioRender Mermaid diagrams into SVG and PNG images via CLI.
PedroGiudiceGenerate HTML architecture diagrams with data flows and deployment layers.
UmmItKinCreate and present web-based slides with Markdown and Vue components.
