</>MCP Agents Market
Skill

fireworks-tech-graph

by yizhiyanhua-ai10.8kPythonUpdated 2026-08-18

Generate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.

CodexClaude Code

fireworks-tech-graph is an agent skill that generates production-quality SVG and PNG technical diagrams from natural language descriptions. It supports 12 visual styles (including AI/Agent domain patterns, UML diagrams, and engineering-first themes like C4 reviews and cloud deployments), semantic shape vocabularies, and geometry-safe routing with validation feedback loops. The skill outputs polished diagrams, high-resolution PNGs, optional SVG-to-GIF animations, and offline interactive HTML exports without requiring manual drawing or DSL syntax.

Key Features

12 visual styles covering Flat Icon, Dark Terminal, Blueprint, Glassmorphism, Claude Official, OpenAI Official, Dark Luxury (AI-authored), and four engineering-first styles (C4 Review, Cloud Fabric, Event Transit, Ops Pulse)
14 UML diagram types plus AI/Agent domain patterns (RAG, Agentic Search, Mem0, Multi-Agent, Tool Call flows) with semantic shape and arrow vocabularies
Geometry-safe orthogonal routing with deterministic waypoints, zero-crossing/bridge enforcement, label clearance budgets, and bounded validation feedback loops
Versioned diagram IR with schema validation, structural SVG checks (XML, markers, paths, collisions), and PNG visual readback for clipping and overlap detection
SVG + 1920px PNG output via cairosvg/rsvg-convert, plus focused SVG-to-GIF semantic motion (5.75s, 20fps, 115 frames, user-approved timelines per style)
Offline interactive HTML export with pan/zoom, light/dark themes, SVG source copy, and multi-format download (SVG/PNG/JPEG/WebP) at 1×–4× scale
40+ product icons with brand colors (OpenAI, Anthropic, Pinecone, Kafka, PostgreSQL) and swim-lane grouping for complex architectures
Works identically in Codex and Claude Code; natural language triggers ("generate diagram", "draw flowchart", "animate this SVG") with style and output-path options

Use Cases

  • 01Generate RAG pipeline or Agentic Search architecture diagrams for technical documentation and blog posts
  • 02Create Mem0 memory architecture or multi-agent collaboration diagrams for AI/Agent system design reviews
  • 03Produce microservices, Kubernetes deployment, or cloud infrastructure diagrams with horizontal layers and swim lanes
  • 04Draw UML sequence, class, or state-machine diagrams with proper notation for software design documentation
  • 05Visualize OAuth2 flows, API integration sequences, or tool-call execution loops as sequence diagrams
  • 06Generate animated GIFs of system architectures with semantic motion (routes drawing in, live data flow) for README showcases and presentations

Related Skills

View more

superpowers

An agentic skills framework & software development methodology that works.

Skill293.5k

skills

Skills for Real Engineers. Straight from my .agents directory.

Skill273k

skills

Public repository for Agent Skills

Skill179.2k

ponytail

Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.

Skill149.2k

fireworks-tech-graph — FAQ

What is fireworks-tech-graph?+

fireworks-tech-graph is an agent skill that converts natural language descriptions into polished SVG/PNG technical diagrams with 12 built-in visual styles, UML support, and AI/Agent domain patterns. It includes validation loops, semantic routing, and optional GIF animation.

How do I install it for Codex and Claude Code?+

Run 'npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy' to install complete copies for both runtimes. Alternatively, clone the repository into ~/.agents/skills/ for Codex or ~/.claude/skills/ for Claude Code.

Which AI clients does it work with?+

It works with Codex (OpenAI) and Claude Code. The skill auto-triggers on phrases like 'generate diagram', 'draw flowchart', or 'animate this SVG'.

Does it require API keys or external services?+

No API keys are required. PNG export needs cairosvg (Python) or rsvg-convert (system package). Optional GIF animation requires FFmpeg, Chromium, and puppeteer-core installed locally.

Is it free to use?+

Yes, it is open-source under the MIT license. All features are free; no subscription or cloud service is required.

What are the 12 visual styles?+

Styles include Flat Icon (default), Dark Terminal, Blueprint, Notion Clean, Glassmorphism, Claude Official, OpenAI Official, Dark Luxury (AI-authored), C4 Review Canvas, Cloud Fabric, Event Transit, and Ops Pulse. Each optimizes for different documentation contexts (blogs, GitHub, engineering reviews, presentations).

How do I install fireworks-tech-graph?+

Open the source repository on GitHub and follow its README. fireworks-tech-graph is a skill — MCP Agents Market links you directly to the official repo.

Is fireworks-tech-graph free?+

fireworks-tech-graph is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.

Related searches

Developer Tools SkillsDocumentation SkillsDesign SkillsBest MCP ServersBest PluginsBest AgentsTop rated listingsClaude Code toolsBrowse all categories