Agent skill

Fireworks Tech Graph

by tisfeng in tisfeng/Easydict

Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.

MITAuto-check passedDevelopment

Install Fireworks Tech Graph

skills CLI
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .claude/skills/fireworks-tech-graph && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fireworks-tech-graph
GitHub stars
15k
Used in
1 other repo
Token cost
~1.4k tokens
SKILL.md length
637 words
Files
152 (incl. scripts, references, assets)
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.

  • Workflow diagrams
  • SKILL.md covers Locate and select, Generate and check, Additional outputs and Verify the requested outcome
  • Calls python3
  • Statistical charts

What it does

Fireworks Tech Graph is an agent skill from tisfeng/Easydict. 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.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 156 other files, including scripts, reference files and assets (for example `CHANGELOG.md`, `CONTRIBUTING.md` and `README.md`).

It sits in Development, covering Diagrams. The repository describes itself as: 一个简洁优雅的词典翻译 macOS App。开箱即用,支持离线 OCR 识别,支持有道词典,🍎 苹果系统词典,🍎 苹果系统翻译,OpenAI,Gemini,DeepL,Google,Bing,腾讯,百度,阿里,小牛,彩云和火山翻译。A concise and elegant Dictionary and Translator macOS App… The licence is MIT.

When your agent uses it

  • Workflow diagrams
  • Statistical charts

Example prompts

  • “/fireworks-tech-graph”

Requirements

  • Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit cfda6e2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fireworks Tech Graph loads about 1.4k tokens when it runs, and up to ~35k if it reads all its reference files. Until then it costs about 60 tokens; SKILL.md has 637 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~35k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from tisfeng/Easydict at commit cfda6e2, republished under its MIT licence (© tisfeng). 637 words, ~1,402 tokens.

Download SKILL.mdSave it as .claude/skills/fireworks-tech-graph/SKILL.md (or your agent's skills folder). This skill also uses 151 other files; get the full folder from GitHub.
name
fireworks-tech-graph
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 workflow diagrams; not photos, raster art or statistical charts.

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.

bash
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. 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 and icons 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.

bash
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 for readability and style-specific refinements. Keep one semantic connector per business edge.

Show full SKILL.md (281 more words)Show less

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.
  • 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 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.

© tisfeng, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 151 other files (scripts, references, assets) in .agents/skills/fireworks-tech-graph of tisfeng/Easydict.

  • SKILL.md
  • CHANGELOG.md
  • CONTRIBUTING.md
  • LICENSE
  • README.md
  • README.zh.md
  • SECURITY.md
  • agents/openai.yaml
  • assets/icons/cloud/manifest-v1.json
  • assets/samples/sample-style1-flat.gif
  • assets/samples/sample-style1-flat.png
  • assets/samples/sample-style10-cloud-fabric.gif
  • assets/samples/sample-style10-cloud-fabric.png
  • assets/samples/sample-style11-event-transit.gif
  • assets/samples/sample-style11-event-transit.png
  • assets/samples/sample-style12-ops-pulse.gif
  • … and 136 more

Open the folder on GitHubat commit cfda6e2

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in tisfeng/Easydict, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Fireworks Tech Graph next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fireworks Tech Graph compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fireworks Tech Graph this skilltisfeng/Easydict15k1 repos~1.4kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify79k—~2.9kAutomated safety check: PassMIT
JSON Canvasheyitsnoah/claudesidian2.6k18 repos~3.5kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design45k1 repos~7.5kAutomated safety check: PassMIT
Excalidraw Diagramcoleam00/excalidraw-diagram-skill5k2 repos~6.1kAutomated safety check: PassNone
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    79k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • JSON Canvas

    heyitsnoah/claudesidian

    Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.

    2.6k GitHub starsUsed in 18 repos~3.5k tokens
    DevelopmentAuto-check passed
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    45k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed
  • Excalidraw Diagram

    coleam00/excalidraw-diagram-skill

    Create Excalidraw diagram JSON files that make visual arguments.

    5k GitHub starsUsed in 2 repos~6.1k tokens
    DevelopmentAuto-check passed
  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 6 days ago
    DevelopmentAuto-check: notes
  • Docs Diagrams

    vercel/next.js

    Official

    Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".

    143k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

More from tisfeng/Easydict

All 8 skills in this repo
  • Release Easydict

    tisfeng/Easydict

    编排 Easydict macOS 的 draft、publish、release 和 resume,整理英文 GitHub Release 内容,并处理发布后的 Issue 跟进及本地清理。不用于一般的发布流程设计讨论。

    15k GitHub stars~810 tokensUpdated 2 days ago
    Auto-check passed
  • Submit PR

    tisfeng/Easydict

    创建或复用当前 checkout 已提交变更的 GitHub PR,必要时推送任务分支。PR 审查使用 review-pr;仅本地提交使用 git-commit。

    15k GitHub stars~595 tokensUpdated 2 days ago
    Auto-check passed
  • Git Commit

    tisfeng/Easydict

    起草、创建或汇报 Angular-style 本地 Git 提交。用于明确的提交交付;分支集成使用 worktree-rebase-merge,不 push。

    15k GitHub stars~535 tokensUpdated 2 days ago
    Auto-check passed
  • Review

    tisfeng/Easydict

    审查本地工作树、提交、range、文件或模块,找出有证据的缺陷。GitHub PR 审查使用 review-pr;代码清理使用 code-simplifier。

    15k GitHub stars~659 tokensUpdated 2 days ago
    Auto-check passed
  • Review PR

    tisfeng/Easydict

    审查 GitHub PR 的准确 head/base diff、关联 issue、CI 和 review threads,交付前刷新。创建 PR 使用 submit-pr;本地审查使用 review。

    15k GitHub stars~723 tokensUpdated 2 days ago
    Auto-check passed
  • Worktree Rebase Merge

    tisfeng/Easydict

    将当前 worktree 的任务提交 rebase 到本地目标分支,并从目标 worktree 合并。用于明确要求本地集成;仅创建提交使用 git-commit。

    15k GitHub stars~408 tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Fireworks Tech Graph

What does Fireworks Tech Graph do?

Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Fireworks Tech Graph is an agent skill from tisfeng/Easydict. Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.

When should I use Fireworks Tech Graph?

Fireworks Tech Graph fits situations like: workflow diagrams; statistical charts.

How do I install Fireworks Tech Graph in Claude Code?

Run `npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a claude-code`. Or copy the skill folder (.agents/skills/fireworks-tech-graph in tisfeng/Easydict) into .claude/skills/fireworks-tech-graph in your project. Claude Code loads it when a task matches its description.

How do I install Fireworks Tech Graph in Codex?

Run `npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a codex`. Or copy the skill folder (.agents/skills/fireworks-tech-graph in tisfeng/Easydict) into .agents/skills/fireworks-tech-graph in your project. Codex loads it when a task matches its description.

Can I use Fireworks Tech Graph in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fireworks-tech-graph, .gemini/skills/fireworks-tech-graph, .github/skills/fireworks-tech-graph and .opencode/skills/fireworks-tech-graph in your project.

What does Fireworks Tech Graph need to run?

Going by SKILL.md and its folder, Fireworks Tech Graph needs the command-line tools its instructions call (python3). Our summary lists: Python 3.

Does Fireworks Tech Graph access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Fireworks Tech Graph safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Fireworks Tech Graph use?

Fireworks Tech Graph is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fireworks Tech Graph use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 34k tokens, read only when the agent opens those files.

What are the alternatives to Fireworks Tech Graph?

Skills that share tags, products or a category with Fireworks Tech Graph: Archify Diagrams (tt-a1i/archify, 79k stars), JSON Canvas (heyitsnoah/claudesidian, 2.6k stars), Diagram Design (cathrynlavery/diagram-design, 45k stars) and Excalidraw Diagram (coleam00/excalidraw-diagram-skill, 5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fireworks Tech Graph?

tisfeng (a GitHub user) maintains it in tisfeng/Easydict, which has 14,866 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 6, 2026.

Source: tisfeng/Easydict on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.