skills.rest
darraghh1
darraghh1COMMUNITY
Explore all skills by this author →
GitHub

hand-crafted-svg

Generate publication-quality SVG diagrams with hand-crafted XML markup.

Updated Aug 23, 2026
Search Tags:#architecture#flowchart#visualization#svg#diagram#vector graphics
One-click install
npx skills add https://github.com/darraghh1/my-claude-setup --skill hand-crafted-svg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hand-crafted-svg
Source: https://github.com/darraghh1/my-claude-setup/tree/main/.claude/skills/hand-crafted-svg
Command: npx skills add https://github.com/darraghh1/my-claude-setup --skill hand-crafted-svg

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows you to generate highly customized, publication-quality SVG diagrams with precise control over layout, styling, and visual elements that automated tools cannot achieve.

Core Features & Use Cases

  • Pixel-perfect Layout: Manually position every element for optimal clarity and aesthetic appeal.
  • Advanced Styling: Implement gradient fills, drop shadows, custom arrow markers, and semantic coloring.
  • Complex Flows: Visualize intricate workflows, architecture diagrams, and data flows with custom routing and annotations.
  • Use Case: Design a detailed system architecture diagram with specific branding, custom arrow types indicating data flow direction and status, and callouts explaining critical components.

Quick Start

Use the hand-crafted-svg skill to create an SVG diagram visualizing the CI/CD pipeline described in the provided text.

Frequently Asked Questions about hand-crafted-svg

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

FAQPage Schema
How do I create custom SVG diagrams with precise layout control?▼

Hand-crafting SVG XML markup allows precise control over layout, gradients, shadows, and custom arrow routing, enabling pixel-perfect positioning for complex visualizations and publication-quality outputs.

Why do automated diagram tools fail for complex architecture visualizations?▼

Automated layout tools like Mermaid have limitations with complex visualizations, lacking the precise manual control needed for custom routing, semantic coloring, and detailed annotations required in intricate architecture diagrams.

Can I add gradients and drop shadows to vector graphics using XML?▼

Yes, you can implement advanced styling like gradient fills, drop shadows, and custom arrow markers in vector graphics by directly writing and validating the underlying SVG XML markup structure.

Do I need Python to generate publication-quality SVG flowcharts?▼

Yes, Python3 is required to run the validation scripts that ensure the hand-crafted SVG XML markup adheres to strict structural rules for correctness in complex flowcharts and diagrams.

What is the best way to visualize intricate workflows with custom arrow routing?▼

The best way to visualize intricate workflows with custom arrow routing is to hand-craft the SVG diagram, allowing manual positioning and custom arrow markers to indicate specific data flow direction and status.

When should I not use automated tools for system architecture diagrams?▼

You should avoid automated tools for system architecture diagrams when you need specific branding, pixel-perfect layout, custom arrow types, and callouts explaining critical components that auto-layout cannot achieve.

Related Skills

Explore More Design & Creative Skills→
vidanovvidanov
131

aws-architecture-diagram

Generate AWS architecture diagrams as draw.io XML with mxGraphModel format.

Community
Advanced
puhuaqiangpuhuaqiang

svg-to-png

Convert SVG vector graphics to PNG images with automatic size detection.

Community
Basic
DonZzzillaDonZzzilla

architecture-diagram

Generate customizable SVG architecture diagrams in HTML from system descriptions.

Community
Advanced
SpaceZephyrSpaceZephyr
14

lark-whiteboard

Generate structured diagrams and upload them to Feishu whiteboards.

Community
Advanced