skills.rest
williamw
williamwCOMMUNITY
Explore all skills by this author →
GitHub

diagram-maker

Generate SVG stack, grid, and workflow diagrams with configurable themes.

Updated Aug 23, 2026
Search Tags:#workflow#data visualization#system architecture#svg#diagram generation
One-click install
npx skills add https://github.com/williamw/agent-skills --skill diagram-maker-williamw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-maker
Source: https://github.com/williamw/agent-skills/tree/main/skills/diagram-maker
Command: npx skills add https://github.com/williamw/agent-skills --skill diagram-maker-williamw

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of professional SVG diagrams, saving time and reducing the need for manual drawing.

Core Features & Use Cases

  • SVG Diagram Generation: Automatically create stack, grid, and workflow diagrams in SVG format.
  • Configurable Themes: Choose between light and dark themes, and customize accent colors.
  • Pattern-Based Generation: Utilize pre-defined patterns for efficient diagram creation.
  • Use Case: Suppose you need to visualize a system architecture. Use the diagram-maker skill with a stack diagram pattern to create a visual representation of the system components and their relationships.

Quick Start

Generate a stack diagram showing the components of your system architecture with the following command:

claude --cwd /path/to/agent-skills/skills/diagram-maker "Create a stack diagram for my system architecture, highlighting the database, API service, and frontend."

Frequently Asked Questions about diagram-maker

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

FAQPage Schema
How do I automatically generate SVG diagrams for system architecture documentation?▼

Automatically generate SVG diagrams for system architecture by using pattern-based generation to create stack, grid, and workflow visualizations of system components and their relationships. This Skill utilizes Python libraries for diagram generation, theming, and customization.

Can I customize SVG diagram themes and accent colors for workflow visualization?▼

Customize SVG diagram themes and accent colors by choosing between pre-configured light and dark themes. The diagram generation process applies these configurable themes to workflow representations and process visualizations for professional output.

Do I need cairosvg and pillow installed to render workflow diagrams?▼

Cairosvg and pillow are required dependencies for image processing and rendering workflow diagrams. These Python libraries handle the conversion and rendering of SVG diagrams for architectural, grid, and workflow representations.

What is the best way to visualize system components and their relationships in a stack diagram?▼

Visualize system components and their relationships in a stack diagram by applying pre-defined patterns for efficient diagram creation. Pattern-based generation automates the layout of databases, API services, and frontend components for system design documentation.

Does diagram generation support capacity planning and process visualization?▼

Diagram generation supports capacity planning and process visualization by creating grid and workflow diagrams. These configurable SVG representations automate process visualization, reducing the need for manual drawing in system design documentation.

What are the limitations of using SVG format for architectural diagram generation?▼

SVG format limitations for architectural diagram generation include dependency on Python libraries like cairosvg and pillow for rendering. The Skill is specialized for stack, grid, and workflow patterns, meaning highly custom freeform diagrams may require manual drawing.

Related Skills

Explore More Design & Creative Skills→
aryankumarraiaryankumarrai

file-converter

Convert files between data, document, and image formats.

Community
Intermediate
ntaksh42ntaksh42
1

uml-diagram

Generate UML diagrams from text using Mermaid and PlantUML syntax.

Community
Intermediate
tanaka-mambingetanaka-mambinge

mermaid-diagrams

Convert plain-text diagram ideas into Mermaid diagrams for software architecture, data modeling, and process flows.

Community
Advanced
BAIZ1DBAIZ1D

draw

Create vector diagrams and convert between ODG, SVG, PDF, and PNG formats.

Community
Intermediate