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.
Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .claude/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graphType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .agents/skills/fireworks-tech-graph && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .agents/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .cursor/skills/fireworks-tech-graph && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .cursor/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/tisfeng/Easydict.git --path .agents/skills/fireworks-tech-graph--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .gemini/skills/fireworks-tech-graph && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .gemini/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install tisfeng/Easydict fireworks-tech-graphInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .github/skills/fireworks-tech-graph && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .github/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tisfeng/Easydict --skill fireworks-tech-graph -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tisfeng/Easydict fireworks-tech-graph --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tisfeng/Easydict.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/fireworks-tech-graph .opencode/skills/fireworks-tech-graph && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "fireworks-tech-graph" agent skill from https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph into .opencode/skills/fireworks-tech-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fireworks-tech-graph", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
fireworks-tech-graphCreate 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. 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.
Read from SKILL.md and the folder at commit cfda6e2. It shows what the files ask for, not the result of running them.
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.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from tisfeng/Easydict at commit cfda6e2, republished under its MIT licence (© tisfeng). 637 words, ~1,402 tokens.
.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.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.
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" versionReuse 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.
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 1920check 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.
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.fireworks.py export-html diagram.svg diagram.html. One sanitized
offline file provides pan/zoom, source copy and static image downloads.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.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
SKILL.md and 151 other files (scripts, references, assets) in .agents/skills/fireworks-tech-graph of tisfeng/Easydict.
Open the folder on GitHubat commit cfda6e2
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Fireworks Tech Graph this skilltisfeng/Easydict | 15k | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 79k | — | ~2.9k | Automated safety check: Pass | MIT | |
| JSON Canvasheyitsnoah/claudesidian | 2.6k | 18 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Excalidraw Diagramcoleam00/excalidraw-diagram-skill | 5k | 2 repos | ~6.1k | Automated safety check: Pass | None | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT |
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.
heyitsnoah/claudesidian
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.
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.
coleam00/excalidraw-diagram-skill
Create Excalidraw diagram JSON files that make visual arguments.
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.
vercel/next.js
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".
tisfeng/Easydict
编排 Easydict macOS 的 draft、publish、release 和 resume,整理英文 GitHub Release 内容,并处理发布后的 Issue 跟进及本地清理。不用于一般的发布流程设计讨论。
tisfeng/Easydict
创建或复用当前 checkout 已提交变更的 GitHub PR,必要时推送任务分支。PR 审查使用 review-pr;仅本地提交使用 git-commit。
tisfeng/Easydict
起草、创建或汇报 Angular-style 本地 Git 提交。用于明确的提交交付;分支集成使用 worktree-rebase-merge,不 push。
tisfeng/Easydict
审查本地工作树、提交、range、文件或模块,找出有证据的缺陷。GitHub PR 审查使用 review-pr;代码清理使用 code-simplifier。
tisfeng/Easydict
审查 GitHub PR 的准确 head/base diff、关联 issue、CI 和 review threads,交付前刷新。创建 PR 使用 submit-pr;本地审查使用 review。
tisfeng/Easydict
将当前 worktree 的任务提交 rebase 到本地目标分支,并从目标 worktree 合并。用于明确要求本地集成;仅创建提交使用 git-commit。
Categories
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.
Fireworks Tech Graph fits situations like: workflow diagrams; statistical charts.
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.
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.
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.
Going by SKILL.md and its folder, Fireworks Tech Graph needs the command-line tools its instructions call (python3). Our summary lists: Python 3.
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.
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.
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.
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.
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.
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.