skills.rest
trungdo9
trungdo9COMMUNITY
Explore all skills by this author →
GitHub

tech-graph

Generate SVG technical diagrams from DOT, Python, and D3.js JSON data.

3|1|Updated Dec 5, 2025
Search Tags:#SVG#technical documentation#cloud architecture#diagram generation#graph visualization
One-click install
npx skills add https://github.com/trungdo9/ClauKit --skill tech-graph
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tech-graph
Source: https://github.com/trungdo9/ClauKit/tree/main/skills/software/tech-graph
Command: npx skills add https://github.com/trungdo9/ClauKit --skill tech-graph

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires graphviz, mingrammer, d3-graphviz, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of manually creating technical diagrams for documentation, whitepapers, and presentations, by automating the generation of publication-quality SVG diagrams.

Core Features & Use Cases

  • Automated Diagram Generation: Generate technical diagrams from structured data (DOT language, Python, D3.js JSON).
  • Multiple Tools Support: Supports GraphViz (DOT), Mingrammer (Python), and D3.js (WebAssembly) for various diagram types.
  • Use Case: Quickly create a cloud architecture diagram for a whitepaper using Mingrammer and AWS icons, or visualize a dependency tree for code review.

Quick Start

Use the tech-graph skill to generate a diagram of your cloud infrastructure in SVG format.

Frequently Asked Questions about tech-graph

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

FAQPage Schema
How do I generate SVG diagrams from structured data for technical documentation?▼

You generate SVG diagrams by providing structured data inputs like GraphViz DOT language, Mingrammer Python code, or D3.js JSON to automate the creation of publication-quality technical diagrams.

Can I use Mingrammer Python code to create cloud architecture diagrams?▼

Yes, you can use Mingrammer Python code to generate cloud architecture diagrams. The tool processes Mingrammer scripts alongside GraphViz DOT and D3.js JSON to output SVG visualizations.

Does GraphViz DOT support automated diagram generation for infrastructure visualization?▼

GraphViz DOT supports automated infrastructure visualization by taking DOT language input and generating SVG code. This allows you to document architecture and infrastructure dependencies without manual drawing.

What is the best way to visualize dependency trees for code review in SVG format?▼

The best way to visualize dependency trees in SVG format is to use structured data inputs like GraphViz DOT or D3.js JSON. This automates graph visualization generation specifically for code review and technical publications.

Do I need D3.js JSON to create publication-quality graph visualizations?▼

You do not strictly need D3.js JSON to create publication-quality graph visualizations. The tool also accepts GraphViz DOT language and Mingrammer Python code as valid structured data inputs for SVG generation.

When should I not use automated SVG diagram generation for technical documentation?▼

You should avoid automated SVG diagram generation when your technical documentation requires highly customized visual layouts that cannot be accurately represented by standard GraphViz DOT, Mingrammer, or D3.js JSON structures.

Related Skills

Explore More Software Engineering Skills→
mindmorassmindmorass
2

graphviz-diagrams

Create Graphviz diagrams with DOT source and pre-rendered images.

Community
Advanced
artgaurav16420-ossartgaurav16420-oss

elite-pptx

Convert SVG designs into PowerPoint slides with editable text and vector shapes.

Community
Advanced
ntaksh42ntaksh42
1

d3-visualization

Generate D3.js visualizations for network, hierarchical, and geographical data.

Community
Advanced
diegomarinodiegomarino
56

mermaid

Generate flowcharts, sequence, class, ER, state, architecture, and deployment diagrams from code analysis.

Community
Advanced