skills.rest
Dozyboy
DozyboyCOMMUNITY
Explore all skills by this author →
GitHub

hs:tech-graph

Generate static SVG technical diagrams and export PNG via rsvg-convert.

Updated Jul 19, 2026
Search Tags:#architecture#documentation#png#visualization#svg#generate#diagram
One-click install
npx skills add https://github.com/Dozyboy/VSF --skill hs-tech-graph-dozyboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hs:tech-graph
Source: https://github.com/Dozyboy/VSF/tree/main/Day2_VSF/Demo1/harness/plugins/hs/disabled-skills/tech-graph
Command: npx skills add https://github.com/Dozyboy/VSF --skill hs-tech-graph-dozyboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires rsvg-convert, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating consistent, publish-grade technical diagrams (architecture, data flow, sequence, agent/memory) for documentation and slides is slow and error-prone when hand-writing SVG, and validation/export tooling is often missing. ## Core Features & Use Cases - 13 diagram types: architecture, data flow, flowchart, sequence, agent, memory, comparison, timeline, mind map, class/ER, use case, state machine, and network topology, each with defined layout rules. - 8 visual styles: from Flat Icon and Dark Terminal to Blueprint, Glassmorphism, and Dark Luxury, with a style-to-diagram-type suitability matrix. - Scripted generation and validation: a Python template generator driven by JSON specs, plus shell scripts that validate SVG and export 1920px PNG via rsvg-convert. - Use Case: Ask for an agent architecture diagram in Dark Terminal style; the skill loads the style reference, writes the SVG, validates it, and exports a retina PNG for your README. ## Quick Start Generate an architecture diagram of my RAG pipeline in style 2 and export it as a PNG.

Frequently Asked Questions about hs:tech-graph

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

FAQPage Schema
How do I generate an SVG architecture diagram with a specific style?▼

Describe the topic and optionally pass a style number from 1 to 8. The skill loads the matching style reference file, writes the SVG, validates it with rsvg-convert, and exports a 1920px PNG alongside the SVG.

What diagram types can this SVG generator produce?▼

It supports 13 types: architecture, data flow, flowchart, sequence, agent, memory, comparison matrix, timeline/Gantt, mind map, class/ER, use case, state machine, and network topology, each with defined layout rules.

What happens if rsvg-convert is not installed?▼

The skill checks for rsvg-convert before validation. If missing, it still delivers the SVG file as the primary artifact, skips validation and PNG export, and reports the install command such as apt-get install librsvg2-bin or brew install librsvg.

Can I generate diagrams in batch from a JSON spec?▼

Yes. Run scripts/generate-from-template.py with a diagram type, output path, and JSON data describing containers, nodes, and arrows. Style 8 (Dark Luxury) is excluded and must be hand-crafted from its reference spec.

When should I use draw.io or Mermaid instead of this SVG generator?▼

Use draw.io for vendor-branded shapes like AWS, GCP, Cisco, or Kubernetes and for native draw.io editing. Use Mermaid or Excalidraw for inline diagrams embedded directly in documents. Azure is the exception, since this skill ships its own Azure icon catalog.

Related Skills

Explore More Design & Creative Skills→
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced
M-Abdullah07M-Abdullah07
1

mermaid-graph-renderer

Convert Mermaid diagram syntax into SVG, PNG, or PDF images.

Community
Intermediate
openclawopenclaw
388.4k

diagram-maker

Generate SVG, HTML, or Excalidraw diagrams for concepts, architecture, and workflows.

Official
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
4

drawio-impl-network

Enforces Cisco19 vendor namespaces and zone containers in Draw.io network diagrams.

Official
Advanced