Generate SVG diagrams from textual prompts with PNG previews.
npx skills add https://github.com/spm1001/claude-suite --skill diagram-spm1001
Please help me install this Agent Skill. Skill: diagram Source: https://github.com/spm1001/claude-suite/tree/main/skills/diagram Command: npx skills add https://github.com/spm1001/claude-suite --skill diagram-spm1001
This skill helps Claude turn abstract concepts into clear, shareable diagrams by generating structured SVGs, rendering PNG previews, and applying iterative self-critiques to improve clarity.
Provide a diagram prompt such as: "Create a Venn diagram showing A and B with labeled regions." The skill will return an SVG and a PNG preview after rendering.
High-intent search queries and answers about installing and using this skill.
You can generate an SVG diagram from a text prompt by providing a description of the visual, such as a Venn diagram or flowchart. The skill outputs a structured SVG with a proper viewBox and renders a PNG preview for quick viewing.
CRAP-based iterative rendering is a self-critique process that applies design principles—Proximity, Alignment, Repetition, and Contrast—to refine diagrams. The skill evaluates the generated SVG against these principles and iterates until the visual clarity meets quality standards.
Yes, you can create architecture diagrams and flowcharts for technical documentation. The skill automates diagram creation from textual prompts, supporting Venn diagrams, flowcharts, and architecture diagrams suitable for presentations and technical briefings.
Rendering PNG previews from SVG does not strictly require rsvg-convert. The skill supports PNG rendering via sips on macOS or rsvg-convert, allowing you to generate quick visual previews of your SVG diagrams depending on your environment.
To apply consistent brand styling and typography to an SVG diagram, you can compose this skill with brand or styling skills. This synergy allows the generated SVG visuals to integrate specific colors and typography guidelines seamlessly into the final output.
The best way to fix misaligned elements in a generated flowchart is through the skill's iterative self-critique mechanism. It automatically evaluates alignment and other CRAP principles, refining the SVG structure until the visual layout achieves proper clarity and balance.
erlebachGenerate Excalidraw diagram JSON from natural language descriptions.
odylithRender Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.
evolving-machines-labApply Anthropic brand colors and typography to documents, slides, and visuals.
vuminhieuRender Mermaid.js v11 diagrams to SVG, PNG, or PDF via CLI.
