{"enrichment":{"faq":[{"a":"Svg Diagram creates polished structural diagrams by outputting HTML blocks containing SVG code. You describe the diagram you need\u2014flowcharts, architecture charts, sequence diagrams, hierarchies\u2014and Svg Diagram generates the SVG markup. The output renders directly in a sandboxed iframe, giving you refined aesthetics and flexible layout control for your visual designs.","q":"How do I create SVG diagrams with Svg Diagram?"},{"a":"Svg Diagram specializes in structural diagrams including flowcharts, architecture charts, sequence diagrams, and hierarchies. The skill programmatically creates these as SVG graphics, which are scalable vector formats ideal for technical documentation, system design, and process visualization. Each diagram renders with polished styling and layout flexibility.","q":"What types of diagrams can Svg Diagram generate?"},{"a":"Yes, Svg Diagram functions as an SVG diagram generator. It converts your diagram descriptions into scalable vector graphics automatically. Rather than manually coding SVG markup, you specify what diagram you need and Svg Diagram generates the complete SVG output, rendering it in an iframe with refined aesthetics and professional layout control.","q":"Can I use Svg Diagram as an SVG diagram generator?"},{"a":"Svg Diagram offers more refined aesthetics and flexible layout control than comparable tools. It renders output directly in a sandboxed iframe, providing polished visual results for structural diagrams. The skill handles complex diagram types\u2014flowcharts, architecture charts, sequences, hierarchies\u2014with programmatic generation, making it efficient for automated diagram creation.","q":"How does Svg Diagram compare to other SVG diagramming tools?"},{"a":"Yes, Svg Diagram can create SVG flowcharts as part of its core functionality. It generates flowcharts programmatically as scalable vector graphics, outputting HTML blocks containing SVG code. The flowcharts render in a sandboxed iframe with polished styling and flexible layout options for clear process visualization.","q":"Can Svg Diagram create SVG flowcharts?"}],"shadow_tags":["vector-graphics","diagram-generation","scalable-format","visual-design","flowchart-creation","graphic-rendering","diagram-builder","markup-based-drawing"],"summary_rewrite":"Svg Diagram creates polished structural diagrams\u2014flowcharts, architecture charts, sequence diagrams, hierarchies, and more\u2014by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools."},"gist":{"api_url":"https://skillfed.io/api/skills/PM-Shawn/Abu-Cowork/svg-diagram.json","as_of":"2026-07-22","description":"Svg Diagram generates structured diagrams like flowcharts, architecture charts. npx skillfed install PM-Shawn/Abu-Cowork/svg-diagram","install":{"manual":["git clone https://github.com/PM-Shawn/Abu-Cowork","cp -r Abu-Cowork ~/.claude/skills/svg-diagram"],"primary":"npx skillfed install PM-Shawn/Abu-Cowork/svg-diagram","version":"828254a4"},"kind":"skill","mirror_url":"https://skillfed.io/PM-Shawn/Abu-Cowork/svg-diagram.md","similar":[{"id":"Delphine-L/claude_global/galaxy-workflow-viz","name":"Galaxy Workflow Viz","publisher":"Delphine-L/claude_global","url":"https://skillfed.io/Delphine-L/claude_global/galaxy-workflow-viz"},{"id":"JimLiu/baoyu-skills/baoyu-diagram","name":"baoyu-diagram","publisher":"JimLiu/baoyu-skills","url":"https://skillfed.io/JimLiu/baoyu-skills/baoyu-diagram"},{"id":"pedronauck/skills/architecture-diagram","name":"Architecture Diagram","publisher":"pedronauck/skills","url":"https://skillfed.io/pedronauck/skills/architecture-diagram"},{"id":"Delphine-L/claude_global/hackmd","name":"Hackmd","publisher":"Delphine-L/claude_global","url":"https://skillfed.io/Delphine-L/claude_global/hackmd"},{"id":"Cocoon-AI/architecture-diagram-generator/architecture-diagram","name":"architecture-diagram","publisher":"Cocoon-AI/architecture-diagram-generator","url":"https://skillfed.io/Cocoon-AI/architecture-diagram-generator/architecture-diagram"}],"title":"Svg Diagram by PM-Shawn: Create and generate SVG diagrams programmatically \u2014 SkillFed","use":{"when":["Svg Diagram specializes in structural diagrams including flowcharts, architecture charts, sequence diagrams, and hierarchies.","Yes, Svg Diagram functions as an SVG diagram generator."]},"what":{"lead":"Svg Diagram generates structured diagrams like flowcharts, architecture charts, and timelines as rendered SVG code.","rest":"Svg Diagram creates polished structural diagrams\u2014flowcharts, architecture charts, sequence diagrams, hierarchies, and more\u2014by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools."}},"id":"PM-Shawn/Abu-Cowork/svg-diagram","install":{"mode":"external","repo":"https://github.com/PM-Shawn/Abu-Cowork"},"links":{"html":"https://skillfed.io/PM-Shawn/Abu-Cowork/svg-diagram","md":"https://skillfed.io/PM-Shawn/Abu-Cowork/svg-diagram.md","repo":"https://github.com/PM-Shawn/Abu-Cowork"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":57,"language":"TypeScript","last_updated":"2026-07-22","license":"NOASSERTION","name":"Svg Diagram","publisher":"PM-Shawn","stars":236},"relations":{"similar":[{"id":"Delphine-L/claude_global/galaxy-workflow-viz"},{"id":"guanyang/open-agent-hub/baoyu-diagram"},{"id":"JimLiu/baoyu-skills/baoyu-diagram"},{"id":"alfredolopez80/multi-agent-ralph-loop/architecture-diagram"},{"id":"pedronauck/skills/architecture-diagram"},{"id":"Delphine-L/claude_global/hackmd"},{"id":"Cocoon-AI/architecture-diagram-generator/architecture-diagram"},{"id":"wanshuiyin/Auto-claude-code-research-in-sleep/pixel-art"},{"id":"OpenLAIR/dr-claw/aris-pixel-art"},{"id":"alfredolopez80/multi-agent-ralph-loop/diagram-design"}]},"slug":{"owner":"PM-Shawn","repo":"Abu-Cowork","skill":"svg-diagram"},"version":"828254a4"}