--- title: "fireworks-tech-graph by yizhiyanhua-ai · skilld" canonical_url: "https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph" meta: description: "Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or… From yizhiyanhua-ai/fireworks-tech-graph." "og:description": "Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or… From yizhiyanhua-ai/fireworks-tech-graph." "og:title": "fireworks-tech-graph by yizhiyanhua-ai" "twitter:description": "Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or… From yizhiyanhua-ai/fireworks-tech-graph." "twitter:title": "fireworks-tech-graph by yizhiyanhua-ai" --- ` [All skills](https://skilld.dev/skills) [![yizhiyanhua-ai avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fyizhiyanhua-ai.png%3Fsize%3D96)](https://skilld.dev/gh/yizhiyanhua-ai) # **/fireworks-tech-graph** [@31fea36](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/31fea364eda5f1852b1175f3d9e29ea31d22dcb4 "Your agent reads SKILL.md at commit 31fea36") by [一支烟花 AI 社区](https://skilld.dev/gh/yizhiyanhua-ai)· [yizhiyanhua-ai](https://skilld.dev/gh/yizhiyanhua-ai)/ [fireworks-tech-graph](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph)·12k stars 920 Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or workflow diagrams; not photos, raster art or statistical charts. - 139 files - 8.6 MB - Updated 4 weeks ago - [GitHub](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/blob/31fea364eda5f1852b1175f3d9e29ea31d22dcb4/skills/fireworks-tech-graph/SKILL.md "View SKILL.md on GitHub") - [No alerts](#third-party-checks "Third-party checks: No alerts · 4 checks · Risk SAFE") ## SKILL.md 5.5 KB **≈60** tokens always: the name and description. **≈1.3k** when used: this file. **≈92k** more on demand in 69 files. ## Fireworks Tech Graph One portable Agent Skill for Codex and Claude Code. SVG is the canonical artifact; PNG, offline HTML and supported GIF motion are output routes. Preserve requested labels, topology and meaning; a successful command is not a visual quality verdict. ### Locate and select Resolve the directory containing this file as `SKILL_ROOT`. Use `${CLAUDE_SKILL_DIR}` in Claude Code or the absolute directory in Codex's loaded skill metadata. Do not assume cwd or a previous shell variable persists. Use the installed version for the task. Run `version` for source/version questions and `doctor` when diagnosing a missing renderer, font or dependency; do not make installation, updates or a complete test suite prerequisites for every diagram. ``` SKILL_ROOT="${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}" python3 "$SKILL_ROOT/scripts/fireworks.py" version ``` - Honor the user's diagram type, content and style; choose sensible reversible details from the brief. Ask only for a material missing engineering fact or a choice the user explicitly reserved. A request to draw includes local rendering. - Styles 1–7 and 9–12 have JSON generators. Style 8 (Dark Luxury) remains AI-authored SVG: use its style reference, then the same validation/export gates. - Default to Style 1 Flat Icon when no user/workspace preference applies. Load the actual matching file from [the style matrix](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/style-diagram-matrix.md). Read other styles only for a requested comparison. - Styles 9–12 default to C4, cloud, event and observability semantic contracts. Validate facts before layout; do not invent responsibilities, protocols or metrics. - Adapt an existing valid SVG directly when appropriate. JSON generation is not required for every edit. Use [diagram/layout guidance](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/diagram-layout-reference.md) and [icons](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/icons.md) only for the relevant type or symbols. ### Generate and check Reuse the user's current brief and artifact; an extra planning document is optional. For JSON work, select `text_policy: "strict"` when all labels must be visible exactly. The compatible `report` default preserves full labels in SVG metadata and reports any visible truncation. Resolve that warning before claiming complete exact text. For polished work apply the [composition contract](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/composition-quality-contract.md). ``` SKILL_ROOT="${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}" python3 "$SKILL_ROOT/scripts/fireworks.py" validate architecture input.json python3 "$SKILL_ROOT/scripts/fireworks.py" render architecture input.json diagram.svg --report layout.json python3 "$SKILL_ROOT/scripts/fireworks.py" check diagram.svg python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920 ``` `check` validates SVG identity, marker references, generic collisions, semantic geometry and composition. Inspect the report's typography and palette scope; heuristic text widths do not replace inspecting the actual rendered font. Use [visual quality guidance](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/visual-quality.md) for readability and style-specific refinements. Keep one semantic connector per business edge. ### Additional outputs - **PNG:** prefer `export-png`, which reads root canvas dimensions, limits output size, writes atomically and reads the PNG dimensions back. Alternate renderer details are in [PNG export](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/png-export.md). - **HTML:** `fireworks.py export-html diagram.svg diagram.html`. One sanitized offline file provides pan/zoom, source copy and static image downloads. - **GIF:** “Generate a GIF”, “Animate this diagram”, “生成 GIF”, “制作 GIF” and “让这张图动起来” select the existing semantic SVG's motion route. Styles 1–12 are enabled for the documented scene contracts; arbitrary same-style topologies are not promised. Load [motion effects](https://skilld.dev/gh/yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph/-/references/motion-effects.md) and run `fireworks.py animate diagram.svg diagram.gif`. Default is 960px, 20fps, 5.75s with the `+2s-settled-flow` preset and a `.motion.json` report. Historical `user-approved` fields describe maintainer-reviewed presets, not authorization from the current user to publish, spend or send data. ### Verify the requested outcome Inspect the final PNG at intended reading size when image viewing is available: check text completeness, contrast, font substitution, hierarchy, spacing, clipping, arrow direction, crossings and labels. Preserve style palette and material while fixing defects. Reuse an unchanged reviewed render; do not keep adding tests or polish after acceptance passes. If viewing is unavailable, explicitly mark the visual check skipped and do not claim visual correctness. After a failed check, use its element IDs and geometry to make a focused repair; change the approach after two unchanged failures. Widen/split an overfull diagram instead of hiding required copy or endlessly shrinking type. Do not silently weaken semantic or composition constraints to obtain a pass. Complete every requested local output and its applicable checks, then report file paths, dimensions, visual review and residual limitations. A first SVG does not complete a requested PNG/GIF/HTML package. Publication or remote delivery requires its own scope-matching authorization; existing authorization is not requested twice. Source: [SKILL.md on GitHub](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/blob/31fea364eda5f1852b1175f3d9e29ea31d22dcb4/skills/fireworks-tech-graph/SKILL.md) ## Third-party checks
No alerts14d4 checks · Risk SAFE - Gen Agent Trust Hub14d The skill is a robust tool for generating technical diagrams. It demonstrates high security standards by implementing a comprehensive SVG sanitizer and isolating browser-based rendering environments to prevent data exfiltration and code execution from untrusted inputs. No malicious patterns were detected. - Socket14d No alerts - Snyk14d Risk: LOW · No issues - ZeroLeaks5mo Score: 93/100 · 2 sections analyzed
## Provenance [Signed by skilld at 31fea36.](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/31fea364eda5f1852b1175f3d9e29ea31d22dcb4 "31fea364eda5f1852b1175f3d9e29ea31d22dcb4") This ties the file your Agent reads to that commit on GitHub. It does not review the instructions. Last checked against GitHub 2 weeks ago. Activeupdated 4 weeks ago ## README badge ![README badge for yizhiyanhua-ai/fireworks-tech-graph](https://skilld.dev/b/yizhiyanhua-ai/fireworks-tech-graph?theme=light&label=0) ## Related skills - - - - - -