skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-svg-diagram

Creates and edits standalone SVG diagrams by dispatching between freeform and layered architecture producers.

Updated Jul 8, 2026
Search Tags:#flowchart#svg#intermediate representation#diagram#dispatcher#xml validation#architecture diagram
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-svg-diagram-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-svg-diagram
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-svg-diagram
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-svg-diagram-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cairosvg, lxml.

What problem does it solve? Authoring or modifying structural SVG diagrams (node-and-edge flows, layered architecture) requires consistent primitives, validation, and a safe edit pipeline; this Skill provides a single dispatcher that routes creation requests to the right producer and runs a guarded parse-patch-re-render-validate flow for edits. ## Core Features & Use Cases - Create path dispatch: Routes a natural-language brief to a freeform node-and-edge producer (--kind freeform) or a layered architecture producer (--kind arch), emitting one well-formed standalone SVG. - Modify path pipeline: Parses an existing .svg into an intermediate representation, applies label or structural edits, re-renders, and re-validates with a retry budget of 3, leaving the original file untouched on failure. - Validation and render-verify: Enforces well-formed XML, SVG namespace, no scripts or remote resources, plus a PNG preview inspection before finalizing. - Use Case: Given existing-architecture.svg, ask to rename the cache layer from 'Memcached' to 'Redis' and add an 'Object storage' layer; the Skill patches the IR and emits an updated validated SVG. ## Quick Start Ask the agent to create an SVG diagram of the request flow between a browser, an API gateway, and three microservices with arrows labeled by transport protocol.

Frequently Asked Questions about amw-svg-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an SVG diagram from a text description?▼

Provide a natural-language brief describing the nodes and edges, and the Skill dispatches to a freeform or layered architecture producer based on the --kind flag. It emits one standalone, well-formed SVG with a 1000x1000 viewBox and validates it before finishing.

How do I edit an existing SVG diagram without breaking it?▼

Pass the path to the existing .svg file along with the requested change. The Skill parses it into an intermediate representation, applies the edit, re-renders, and re-validates; on validation failure the original file is left untouched, with a retry budget of 3.

What is the difference between freeform and layered architecture SVG diagrams?▼

Freeform diagrams are general node-and-edge graphs handled by the diagram-svg producer, while layered architecture diagrams use tiered zone groups handled by the diagram-architecture producer. The --kind flag (freeform or arch) selects which backend receives the brief.

Can this tool create SVG icons, logos, or illustrations?▼

No. Icons, logos, patterns, and animations are explicitly out of scope and routed to a separate gated SVG creator skill. This dispatcher only produces structural diagrams such as flowcharts and architecture layers.

Why does SVG diagram validation fail after an edit?▼

Validation fails on unclosed tags, stray ampersands, missing xmlns declarations, or forbidden elements like script tags. The validator report is returned verbatim rather than guess-repaired, and after three failed retries the user is asked to refine the edit.

Related Skills

Explore More Design & Creative Skills→
saajunaidsaajunaid

svg-create

Generate brand-aligned SVG diagrams using predefined brand tokens and color palettes.

Community
Basic
odylithodylith
34

odylith-atlas-render

Render 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.

Official
Intermediate
kevinnftkevinnft
13

visual-assets-generation

Generate ASCII art, diagrams, banners, and social cards with TXT previews.

Community
Advanced
imxvimxv
799

pretty-mermaid

Convert Mermaid diagrams from .mmd sources into SVG or ASCII visuals.

Community
Advanced