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

amw-diagram-svg

Generates self-contained SVG flowcharts and architecture diagrams from natural-language briefs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cairosvg, and includes references (resource) components.

What problem does it solve? Turning a system description or process outline into a clean, hand-authored SVG diagram normally requires manual drawing tools or fiddly markup. This Skill converts a natural-language brief directly into a valid, self-contained SVG file composed of standard primitives, with a mandatory render-verify loop so the output is visually checked before delivery. ## Core Features & Use Cases - Natural-language to SVG: Describe a flowchart, data flow, or system architecture and receive one self-contained .svg file built from <rect>, <circle>, <path>, <marker>, and other primitives inside a 1000×1000 viewBox. - Consistent visual grammar: Fixed node-shape vocabulary (diamond = decision, cylinder = database, circle = actor), 4px strokes, flat slate palette, and arrowhead markers, with automatic substitution of user-supplied oklch brand tokens. - Optional SMIL animation: Subtle data-flow pulses or blinking nodes with a prefers-reduced-motion accessibility guard when the brief mentions movement. - Use Case: Ask for "a flowchart of the user login process with a decision on valid credentials" and receive a verified SVG with labelled yes/no branches, ready to embed in documentation. ## Quick Start Ask the assistant to draw an SVG flowchart of your checkout process with a decision node for payment success, and it will produce and render-verify the diagram file.

Frequently Asked Questions about amw-diagram-svg

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

FAQPage Schema
How do I generate an SVG flowchart from a text description?▼

Describe the process in natural language, including steps and decision points, and the Skill authors a self-contained SVG using standard primitives. Decisions become diamond shapes with labelled yes/no branches, and the output is render-verified before delivery.

What tool should I use for SVG architecture diagrams?▼

Use this Skill for node-and-arrow system illustrations and flowcharts rendered as a single SVG file. For tiered, layered software-architecture diagrams with labelled zones, route to the amw-diagram-architecture skill instead.

Can SVG diagrams include animation?▼

Yes, subtle SMIL animations such as a data-flow pulse along a connector or a blinking active node are supported when the brief mentions movement. Animations are limited to one or two focal elements and include a prefers-reduced-motion guard.

Does the SVG output support custom brand colors?▼

Yes, user-supplied oklch design tokens replace the default slate palette (light #f1f5f9, mid #334155, accent #38bdf8) throughout the diagram. Stroke width stays fixed at 4 and pure black or white is never emitted.

Why do arrowheads not appear in my SVG diagram?▼

Missing arrowheads usually mean the <marker> definition is absent from <defs> or the marker-end="url(#arrow)" reference has a mismatched id. Define the marker once in <defs> and verify the id matches on every directional line or path.

What are the limitations of generated SVG diagrams?▼

Output is restricted to SVG primitives only: no scripts, no external images or fonts, and no raster embeds. Everything must fit inside the 0-1000 viewBox with at least 120 units of node spacing, so very dense graphs may need reflowing or a grid layout.

Related Skills

Explore More Design & Creative Skills→
saajunaidsaajunaid

svg-create

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

Community
Basic
openaiopenai
5.3k

reports-pdfs-and-slide-automation

Compose chart assets into reports, PDFs, PowerPoint decks, and Google Slides documents.

Official
Advanced
iankikuiankiku
18

design

Review UI/UX designs against anti-slop standards for color, typography, layout, and components.

Community
Intermediate
charlesdaquin0015-cryptocharlesdaquin0015-crypto

SVG Diagram Generation

Generate inline SVG diagrams for flowcharts, structures, and processes.

Community
Advanced