AgentToolHub
Skill

fireworks-tech-graph

Claude Code skill for generating production-quality SVG+PNG technical diagrams. Supports 8 diagram types, 5 visual styles, and deep AI/Agent domain knowledge.

Features

  • ✓**7 visual styles** — from clean white docs to dark neon to frosted glass to official brand styles
  • ✓**Executable style system** — style guides are encoded into the generator, not only documented in markdown
  • ✓**14 diagram types** — Full UML support (Class, Component, Deployment, Package, Composite Structure, Object, Use Case, Activity, State Machine, Sequence, Communication, Timing, Interaction Overview, ER Diagram) plus AI/Agent domain diagrams
  • ✓**AI/Agent domain patterns** — RAG, Agentic Search, Mem0, Multi-Agent, Tool Call, and more built-in
  • ✓**Semantic shape vocabulary** — LLM = double-border rect, Agent = hexagon, Vector Store = ringed cylinder
  • ✓**Semantic arrow system** — color + dash pattern encode meaning (write vs read vs async vs loop)
  • ✓**Product icons** — 40+ products with brand colors: OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL…
  • ✓**Swim lane grouping** — automatic layer labeling for complex architectures
  • ✓**SVG + PNG output** — SVG for editing, 1920px PNG for embedding
  • ✓**rsvg-convert compatible** — no external font fetching, pure inline SVG

Installation Guide

bash
npx skills add yizhiyanhua-ai/fireworks-tech-graph

This skill is installed from the GitHub repository. The npm package page is the public package/distribution page:

text
https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph

Do not use the npm package name with skills add, because the CLI resolves install sources as GitHub/local paths.

Reviews