{"owner":"yizhiyanhua-ai","repo":"fireworks-tech-graph","hasSkills":true,"totalSkillsCount":49,"totalTokensCount":81255,"categories":["anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["SKILL.md","skills/fireworks-tech-graph/CHANGELOG.md","skills/fireworks-tech-graph/CONTRIBUTING.md","skills/fireworks-tech-graph/README.md","skills/fireworks-tech-graph/README.zh.md","skills/fireworks-tech-graph/SECURITY.md","skills/fireworks-tech-graph/SKILL.md","skills/fireworks-tech-graph/agents/openai.yaml","skills/fireworks-tech-graph/assets/icons/cloud/manifest-v1.json","skills/fireworks-tech-graph/assets/samples/showcase-gif-manifest.json","skills/fireworks-tech-graph/docs/CAPABILITIES.md","skills/fireworks-tech-graph/docs/ROADMAP.md","skills/fireworks-tech-graph/docs/releases/README.md","skills/fireworks-tech-graph/docs/releases/v1.0.0.md","skills/fireworks-tech-graph/docs/releases/v1.0.1.md","skills/fireworks-tech-graph/docs/releases/v1.0.2.md","skills/fireworks-tech-graph/docs/releases/v1.0.3.md","skills/fireworks-tech-graph/docs/releases/v1.0.4.md","skills/fireworks-tech-graph/docs/releases/v1.0.5.md","skills/fireworks-tech-graph/docs/releases/v1.1.0.md","skills/fireworks-tech-graph/docs/releases/v1.2.0.md","skills/fireworks-tech-graph/examples/README.md","skills/fireworks-tech-graph/package.json","skills/fireworks-tech-graph/references/composition-quality-contract.md","skills/fireworks-tech-graph/references/diagram-layout-reference.md","skills/fireworks-tech-graph/references/icons.md","skills/fireworks-tech-graph/references/motion-effects.md","skills/fireworks-tech-graph/references/png-export.md","skills/fireworks-tech-graph/references/style-1-flat-icon.md","skills/fireworks-tech-graph/references/style-10-cloud-fabric.md","skills/fireworks-tech-graph/references/style-11-event-transit.md","skills/fireworks-tech-graph/references/style-12-ops-pulse.md","skills/fireworks-tech-graph/references/style-2-dark-terminal.md","skills/fireworks-tech-graph/references/style-3-blueprint.md","skills/fireworks-tech-graph/references/style-4-notion-clean.md","skills/fireworks-tech-graph/references/style-5-glassmorphism.md","skills/fireworks-tech-graph/references/style-6-claude-official.md","skills/fireworks-tech-graph/references/style-7-openai.md","skills/fireworks-tech-graph/references/style-8-dark-luxury.md","skills/fireworks-tech-graph/references/style-9-c4-review-canvas.md","skills/fireworks-tech-graph/references/style-diagram-matrix.md","skills/fireworks-tech-graph/references/svg-layout-best-practices.md","skills/fireworks-tech-graph/references/visual-quality.md","skills/fireworks-tech-graph/schemas/architecture-v1.schema.json","skills/fireworks-tech-graph/schemas/diagram-v1.schema.json","skills/fireworks-tech-graph/schemas/sequence-v1.schema.json","skills/fireworks-tech-graph/schemas/workflow-v1.schema.json","skills/fireworks-tech-graph/scripts/README.md","skills/fireworks-tech-graph/tests/snapshots/quality-upgrade.json"],"skills":{"SKILL.md":"---\nname: fireworks-tech-graph\ndescription: >-\n Create precise SVG technical diagrams, export PNG or offline HTML, and animate\n supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or\n workflow diagrams; not photos, raster art or statistical charts.\n---\n\n# Fireworks Tech Graph\n\nOne portable Agent Skill for Codex and Claude Code. SVG is the canonical artifact;\nPNG, offline HTML and supported GIF motion are output routes. Preserve requested\nlabels, topology and meaning; a successful command is not a visual quality verdict.\n\n## Locate and select\n\nResolve the directory containing this file as `SKILL_ROOT`. Use\n`${CLAUDE_SKILL_DIR}` in Claude Code or the absolute directory in Codex's loaded\nskill metadata. Do not assume cwd or a previous shell variable persists.\n\nUse the installed version for the task. Run `version` for source/version questions\nand `doctor` when diagnosing a missing renderer, font or dependency; do not make\ninstallation, updates or a complete test suite prerequisites for every diagram.\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" version\n```\n\n- Honor the user's diagram type, content and style; choose sensible reversible\n details from the brief. Ask only for a material missing engineering fact or\n a choice the user explicitly reserved. A request to draw includes local rendering.\n- Styles 1–7 and 9–12 have JSON generators. Style 8 (Dark Luxury) remains\n AI-authored SVG: use its style reference, then the same validation/export gates.\n- Default to Style 1 Flat Icon when no user/workspace preference applies. Load the\n actual matching file from [the style matrix](references/style-diagram-matrix.md).\n Read other styles only for a requested comparison.\n- Styles 9–12 default to C4, cloud, event and observability semantic contracts.\n Validate facts before layout; do not invent responsibilities, protocols or metrics.\n- Adapt an existing valid SVG directly when appropriate. JSON generation is not\n required for every edit. Use [diagram/layout guidance](references/diagram-layout-reference.md)\n and [icons](references/icons.md) only for the relevant type or symbols.\n\n## Generate and check\n\nReuse the user's current brief and artifact; an extra planning document is optional.\nFor JSON work, select `text_policy: \"strict\"` when all labels must be visible exactly.\nThe compatible `report` default preserves full labels in SVG metadata and reports\nany visible truncation. Resolve that warning before claiming complete exact text.\nFor polished work apply the [composition contract](references/composition-quality-contract.md).\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" validate architecture input.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" render architecture input.json diagram.svg --report layout.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" check diagram.svg\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-png diagram.svg diagram.png --width 1920\n```\n\n`check` validates SVG identity, marker references, generic collisions, semantic\ngeometry and composition. Inspect the report's typography and palette scope;\nheuristic text widths do not replace inspecting the actual rendered font.\nUse [visual quality guidance](references/visual-quality.md) for readability and\nstyle-specific refinements. Keep one semantic connector per business edge.\n\n## Additional outputs\n\n- **PNG:** prefer `export-png`, which reads root canvas dimensions, limits output\n size, writes atomically and reads the PNG dimensions back. Alternate renderer\n details are in [PNG export](references/png-export.md).\n- **HTML:** `fireworks.py export-html diagram.svg diagram.html`. One sanitized\n offline file provides pan/zoom, source copy and static image downloads.\n- **GIF:** “Generate a GIF”, “Animate this diagram”, “生成 GIF”, “制作 GIF” and\n “让这张图动起来” select the existing semantic SVG's motion route. Styles 1–12 are enabled\n for the documented scene contracts; arbitrary same-style topologies are not\n promised. Load [motion effects](references/motion-effects.md) and run\n `fireworks.py animate diagram.svg diagram.gif`. Default is 960px, 20fps, 5.75s\n with the `+2s-settled-flow` preset and a `.motion.json` report. Historical\n `user-approved` fields describe maintainer-reviewed presets, not authorization\n from the current user to publish, spend or send data.\n\n## Verify the requested outcome\n\nInspect the final PNG at intended reading size when image viewing is available:\ncheck text completeness, contrast, font substitution, hierarchy, spacing, clipping,\narrow direction, crossings and labels. Preserve style palette and material while\nfixing defects. Reuse an unchanged reviewed render; do not keep adding tests or\npolish after acceptance passes. If viewing is unavailable, explicitly mark the\nvisual check skipped and do not claim visual correctness.\n\nAfter a failed check, use its element IDs and geometry to make a focused repair;\nchange the approach after two unchanged failures. Widen/split an overfull diagram\ninstead of hiding required copy or endlessly shrinking type. Do not silently\nweaken semantic or composition constraints to obtain a pass.\n\nComplete every requested local output and its applicable checks, then report file\npaths, dimensions, visual review and residual limitations. A first SVG does not\ncomplete a requested PNG/GIF/HTML package. Publication or remote delivery requires\nits own scope-matching authorization; existing authorization is not requested twice.\n","skills/fireworks-tech-graph/CHANGELOG.md":"# Changelog\n\nAll notable changes use semantic versioning.\n\nHistorical `1.0.0` through `1.0.4` entries were reconstructed from the published npm artifacts and their registry-recorded `gitHead` values. See [`docs/releases/`](docs/releases/) for provenance details.\n\n## Unreleased — quality upgrade\n\n- Reject non-SVG XML and invalid viewBoxes before layout; include generic arrow/node collisions in the default `check` contract.\n- Add CJK-aware two-line wrapping, bounded card titles, complete-text reports and opt-in `text_policy: \"strict\"` that rejects visible truncation before output writes.\n- Strengthen supporting text in nine themes while preserving their palette identities, routes and motion signatures; expose default-canvas contrast measurements.\n- Add `version` and capability-scoped `doctor` evidence. Align optional Puppeteer runtime requirements and CI with Node.js 22.12+.\n- Add a shared, bounded PNG export command with atomic output and dimension readback. Keep the Chromium PNG route, fix root-only canvas sizing and share trusted browser discovery with GIF export.\n- Reduce the Skill entrypoint and load detailed composition/quality guidance on demand. Repair the complete nested distribution, including README and sponsor assets.\n- Refresh current text/style snapshots separately from historical motion approval hashes. Published 1.2.0 GIF showcases remain historical release artifacts.\n\n## 1.2.0 — 2026-07-17\n\n- Added one focused motion contract: generated semantic SVG in, validated GIF plus a JSON motion report out. The renderer rejects raster inputs and unsupported media formats.\n- Added twelve user-approved style signatures: headed memory packets, terminal evidence traces, blueprint registration beads, Notion memory cards, glass task capsules, governance seals, API token trains, gem tracers, C4 review cursors, active-active cloud chevrons, event trains, and an ops-pulse scanner.\n- Changed the default GIF timeline to 5.75s/115 frames at 20fps. Routes construct on frames 1–36, live flow reaches full opacity at frame 38, settled flow continues through frame 109, and reset remains frames 110–114. Explicit 3.75s/75-frame and 2.75s/55-frame timelines remain supported.\n- Replaced all 13 README showcase positions with approved GIFs, including a synchronized 3×4 overview below 2 MiB. Added a public SHA-256/metadata manifest and binary GIF parsing for dimensions, cadence, frame count, duration, and infinite-loop readback. Retained regenerated 1920px PNGs as static regression baselines.\n- Updated the GitHub Pages product site to showcase the animated overview and all twelve style GIFs, with static social-card media and reduced-motion fallbacks retained.\n- Added bounded runtime probes, secure Puppeteer resolution, source-DOM immutability guards, frame uniqueness and periodic-motion gates, FFprobe validation, atomic GIF/report installation, explicit encoder requirements, and a 500KB per-style guidance target.\n- Kept valid same-style title/content variants animatable by pinning semantic topology, route roles, order, direction, stage, geometry, and style signatures instead of exact source bytes.\n- Added a real-Chromium 12-style 75-vs-115 regression covering 852 comparisons, plus installed-copy all-style motion canaries in CI and the tag-release workflow.\n- Fixed transformed SVG bounds to inspect all four corners and corrected multi-subpath bridge counting. Refreshed the Style 6 and Style 7 PNG baselines to match the canonical renderer.\n- Updated Codex and Claude Code installation guidance so optional motion dependencies are installed into each copied Skill root.\n\n## 1.1.0 — 2026-07-15\n\n- Added four engineering-first styles: C4 Review Canvas, Cloud Fabric, Event Transit, and Ops Pulse, each with an executable semantic contract, distinct prompt fingerprints, and showcase fixtures.\n- Added schema v1 normalization, typed node/edge IR, deterministic layout reports, and a unified CLI.\n- Added geometry-safe orthogonal routing, mandatory waypoint validation, port fan-out, label/canvas checks, legend relocation, edge-crossing bridges, and semantic SVG metadata.\n- Added strict SVG geometry validation and regression coverage for line crossings, reserved regions, clipping, and bridge masks.\n- Added safe offline interactive HTML export with pan, zoom, theme switching, copy, and SVG/PNG/JPEG/WebP export up to 4×.\n- Added a complete nested Agent Skill distribution for reliable `npx skills add` installation.\n- Added CI, release archives, archive parity checks, project consistency checks, and isolated install canaries.\n- Refreshed the official 12-style PNG showcase and product website with one distinct engineering scenario per style.\n- Raised the supported Node.js runtime baseline to Node.js 18+.\n\n## 1.0.5 — 2026-07-11\n\n- Added shared Codex and Claude Code support, compatibility metadata, tests, and installation guidance.\n- Added Style 8 Dark Luxury and expanded the gallery to eight distinct visual styles.\n- Added a bounded generate-validate-repair loop, structural SVG validation, and optional visual self-review.\n- Improved connector routing, label placement, overlap prevention, clipping guidance, CJK font fallbacks, and helper-script robustness.\n- Switched the default PNG renderer to CairoSVG and documented renderer-specific edge cases.\n- Added the first GitHub Pages product showcase.\n\n## 1.0.4 — 2026-04-12\n\n- Added an explicit `npx skills add ... --force -g -y` update workflow to the English README, Chinese README, and Skill instructions.\n- Published npm package `1.0.4` with Node.js 14+ metadata.\n\n## 1.0.3 — 2026-04-12\n\n- Clarified that `skills add` installs from the GitHub repository while npm remains the package and distribution page.\n- Replaced the legacy install example with `npx skills add yizhiyanhua-ai/fireworks-tech-graph`.\n- Published npm package `1.0.3` with the corrected install-source guidance.\n\n## 1.0.2 — 2026-04-12\n\n- Added the style-driven generator, fixtures, reusable SVG templates, and a seven-style diagram matrix.\n- Refreshed the seven official showcase images and expanded SVG validation and all-style test scripts.\n- Added formal npm package metadata for repository, license, files, runtime, and discovery keywords.\n- Expanded the npm package payload to include fixtures and templates.\n\n## 1.0.1 — 2026-04-12\n\n- Added an explicit layout validation checklist covering connector-node collisions, text overflow, endpoint alignment, and label backgrounds.\n- Normalized npm repository metadata.\n\n## 1.0.0 — 2026-04-12\n\n- Published the first npm package for the Agent Skill.\n- Shipped seven built-in diagram styles, SVG and PNG generation, architecture and UML guidance, validation scripts, and bilingual documentation.\n","skills/fireworks-tech-graph/CONTRIBUTING.md":"# Contributing\n\nFireworks Tech Graph accepts fixes, fixtures, style documentation, and renderer improvements.\n\n## Local checks\n\nRequirements: Python 3.9+, Node.js 22.12+ for optional Chromium export, and either CairoSVG or `rsvg-convert`.\n\n```bash\npython3 -m unittest discover -s tests -v\nTEST_OUTPUT_DIR=\"$(mktemp -d)\" ./scripts/test-all-styles.sh\npython3 tools/check_project_consistency.py\npython3 tools/distribution.py --check\n./tools/install-canary.sh \"$PWD/skills/fireworks-tech-graph\"\n```\n\nGeometry changes must include a failing fixture or unit test before the fix. Generated SVGs must pass the `geometry` check; declared jumps require a matching bridge mask.\n\nRun `python3 tools/distribution.py --sync` after changing any packaged file. Commit the canonical root files and the refreshed nested mirror together.\n\nPlease keep secrets, tokens, cookies, generated caches, and local test output out of commits.\n\n## Reproducible reports and visual changes\n\nInclude `fireworks.py version`, `doctor`, the command, expected behavior and a\nminimal SVG or JSON with private content removed. Report whether a file was\ncreated and whether its exported pixels were inspected.\n\nFor palette or typography changes, attach before/after renders, inspect Chinese\nand long labels, and keep current source snapshots separate from historical\nmotion approvals. Run real Chromium regression when a change affects motion:\n\n```bash\nFIREWORKS_RUN_RENDER_REGRESSION=1 python3 -m unittest discover -s tests -p test_motion.py -v\n```\n\nSecurity reports follow [SECURITY.md](SECURITY.md). Do not put credentials or\nunredacted customer diagrams into public issues.\n","skills/fireworks-tech-graph/README.md":"[English](README.md) | [中文](README.zh.md)\n\n[Release history](docs/releases/README.md) · [Changelog](CHANGELOG.md)\n\n# fireworks-tech-graph\n\n> **Stop drawing diagrams by hand.** Describe your system in English or Chinese — get geometry-safe SVG, PNG, focused SVG-to-GIF motion, and offline interactive technical diagrams.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![GitHub Release](https://img.shields.io/github/v/release/yizhiyanhua-ai/fireworks-tech-graph)](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases)\n[![Codex Skill](https://img.shields.io/badge/Codex-Skill-10a37f)](https://learn.chatgpt.com/docs/build-skills)\n[![Claude Code Skill](https://img.shields.io/badge/Claude%20Code-Skill-d97757)](https://code.claude.com/docs/en/skills)\n[![12 Visual Styles](https://img.shields.io/badge/Styles-12-purple)]()\n[![14 Diagram Types](https://img.shields.io/badge/Diagram%20Types-14-green)]()\n[![UML Support](https://img.shields.io/badge/UML-Full%20Support-orange)]()\n\n---\n\n## Output quality\n\nThe current checkout adds complete-text reporting and stronger supporting text across the default themes. Add `\"text_policy\": \"strict\"` to reject visible truncation before output is written; reports preserve the full source label and explain how to recover. Chinese descriptions use the available second line. See [visual quality](references/visual-quality.md) for theme-specific guidance and measurement limits.\n\n```bash\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" version\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-png diagram.svg diagram.png --width 1920\n```\n\n`version` reports the package, actual Skill root and Git state when available. `doctor` distinguishes SVG/HTML support from optional PNG/GIF dependencies. PNG export checks the root canvas, bounds image size, writes atomically and reads the resulting pixel dimensions back. The browser PNG exporter remains available for Chromium fidelity. The showcase GIFs below are the published 1.2.0 references; this unreleased upgrade preserves their motion contracts.\n\n\n## Overview\n\n`fireworks-tech-graph` is one Agent Skill that works unchanged in **Codex and Claude Code**. It turns natural language descriptions into polished, geometry-checked SVG diagrams, high-resolution PNGs, validated SVG-to-GIF semantic motion, and offline interactive HTML. The focused animation path accepts a generated semantic SVG and emits one compact, probed GIF. It ships with **11 generator-backed styles** and **1 AI-authored style (Dark Luxury)**. Four engineering-first styles add executable contracts for C4 reviews, cloud deployments, event streams, and reliability investigations, alongside deep AI/Agent domain patterns and all 14 UML diagram types.\n\n```\nUser: \"Generate a Mem0 memory architecture diagram, dark style\"\n → Skill classifies: Memory Architecture Diagram, Style 2\n → Generates SVG with swim lanes, cylinders, semantic arrows\n → Exports 1920px PNG\n → Reports: mem0-architecture.svg / mem0-architecture.png\n```\n\n---\n\n## Sponsors\n\n\n \n \n \n \n
\"AIGoCode\"Thanks to AIGoCode for sponsoring this project! AIGoCode is an all-in-one platform that integrates Claude Code, Codex, and the latest Gemini models, providing you with stable, efficient, and highly cost-effective AI coding services. The sponsor advertises flexible subscriptions and direct access without a VPN; availability and account conditions follow its own service terms. AIGoCode has prepared a special benefit for fireworks-tech-graph users: if you register via this link, you'll receive an extra 10% bonus credit on your first top-up!
\n\nInterested in becoming a sponsor? Contact: ccc7574@gmail.com\n\n---\n\n## Work With the Builder\n\nThis project is also a proof surface for a broader capability: turning vague AI/devtool workflows into constrained, reusable systems with validation, documentation, export paths, and product-facing polish.\n\nIf you are building agent infrastructure, AI IDEs, internal copilots, developer tools, technical documentation systems, or applied AI workflow products, I am open to scoped paid sprints, design-partner work, and founding engineer conversations.\n\n- Founder-facing profile: https://bradzhang.dev/en\n- Commercial case study: https://bradzhang.dev/en/case-studies/fireworks-tech-graph\n- Work with me: https://bradzhang.dev/en/work-with-me\n\n---\n\n## Showcase\n\n> The animated previews use the user-approved 5.75-second settled-flow timeline: routes draw in first, then the final topology keeps live data moving for two additional seconds. Each full-size GIF is 960px wide at 20fps / 115 frames; the 3×4 overview is an optimized 1200px preview. Lossless 1920px PNGs remain in `assets/samples/` as static regression baselines.\n\n![Animated 12-style showcase — one distinct engineering scenario per style](assets/samples/showcase-12-styles.gif)\n\nThe v1.2.0 overview above and every full-size animated sample below come from the approved regression set. Each style keeps a distinct scenario while sharing the same geometry, text-fit, wire-routing, and semantic-motion quality gates.\n\n### Style 1 — Flat Icon (default)\n*Mem0 Memory Architecture — personal-memory extraction, conflict resolution, storage, and retrieval*\n![Style 1 — Flat Icon](assets/samples/sample-style1-flat.gif)\n\n### Style 2 — Dark Terminal\n*Tool Call Flow — dark terminal execution, source grounding, retrieval, and answer synthesis*\n![Style 2 — Dark Terminal](assets/samples/sample-style2-dark.gif)\n\n### Style 3 — Blueprint\n*Microservices Architecture — engineering grid, domain services, data stores, events, and telemetry*\n![Style 3 — Blueprint](assets/samples/sample-style3-blueprint.gif)\n\n### Style 4 — Notion Clean\n*Agent Memory Types — minimal hierarchy from sensory and working context to durable memory*\n![Style 4 — Notion Clean](assets/samples/sample-style4-notion.gif)\n\n### Style 5 — Glassmorphism\n*Multi-Agent Collaboration — coordinator, specialists, shared state, review, and synthesis*\n![Style 5 — Glassmorphism](assets/samples/sample-style5-glass.gif)\n\n### Style 6 — Claude Official\n*System Architecture — warm interface, runtime, safety, memory, tools, and operations layers*\n![Style 6 — Claude Official](assets/samples/sample-style6-claude.gif)\n\n### Style 7 — OpenAI Official\n*API Integration Flow — clean SDK, prompt, model, tool, delivery, and release stages*\n![Style 7 — OpenAI Official](assets/samples/sample-style7-openai.gif)\n\n### Style 8 — Dark Luxury *(AI-authored)*\n*Agent Runtime Architecture — control plane, execution and state layers, champagne-gold structure, semantic color buckets*\n![Style 8 — Dark Luxury](assets/samples/sample-style8-dark-luxury.gif)\n\n### Style 9 — C4 Review Canvas\n*Checkout Container Review — one abstraction level, explicit responsibilities, technologies, and protocols*\n![Style 9 — C4 Review Canvas](assets/samples/sample-style9-c4-review-canvas.gif)\n\n### Style 10 — Cloud Fabric\n*Active–Active Checkout Deployment — global ingress, regions, VPC ownership, and cross-region replication*\n![Style 10 — Cloud Fabric](assets/samples/sample-style10-cloud-fabric.gif)\n\n### Style 11 — Event Transit\n*Checkout Event Line — topics as rails, processors as stations, a declared junction, DLQ, and state projection*\n![Style 11 — Event Transit](assets/samples/sample-style11-event-transit.gif)\n\n### Style 12 — Ops Pulse\n*Checkout Reliability Pulse — golden signals, one critical path, OTel export, and a correlated trace*\n![Style 12 — Ops Pulse](assets/samples/sample-style12-ops-pulse.gif)\n\n---\n\n## Stable Prompt Recipe\n\nThe public showcase keeps a distinct domain scene for every style. They remain comparable because every fixture passes the same executable composition contract. A same-topology regression set remains internal under `fixtures/quality-baseline/`.\n\n```text\nDraw the scenario assigned to style N:\n1 Mem0 Memory Architecture; 2 Tool Call Flow; 3 Microservices Architecture;\n4 Agent Memory Types; 5 Multi-Agent Collaboration; 6 System Architecture;\n7 API Integration Flow; 8 Agent Runtime Architecture; 9 C4 Checkout Review;\n10 Active–Active Cloud Deployment; 11 Checkout Event Line; 12 Checkout Reliability Pulse.\nPreserve the scenario-specific nodes, sections, and reading direction.\nApply the showcase composition contract: zero crossings, zero bridge jumps, at most two bends per edge,\nat most eight bends overall, at least 40px between nodes, at least 20px container gutter,\nshort orthogonal segments, and labels kept clear of nodes, routes, and section headers.\nPreserve the selected style's typography, palette, card material, and brand details.\n```\n\nFor the four engineering-first styles, use one of these prompt fingerprints so\nthe router selects the domain contract as well as the visual theme:\n\n```text\nStyle 9 · C4 review board: show one C4 level, responsibilities, technologies, review state, and relationship protocols.\nStyle 10 · Multi-region deployment map: show global ingress, Region/VPC ownership, neutral cloud glyphs, deployment mode, and named boundary mechanisms.\nStyle 11 · Event metro map: show thin topic rails, numbered processor stations, declared junctions, consumer groups, DLQ, and state projections.\nStyle 12 · Reliability pulse: show one observation window, four golden signals per service, numbered critical hops, telemetry export, and one correlated trace.\n```\n\nReplace `N` with `1`–`12`. Style 8 remains AI-authored and loads `references/style-8-dark-luxury.md`; Styles 9–12 also enforce their engineering semantic contract. All styles load `references/composition-quality-contract.md`.\n\n---\n\n## Features\n\n- **12 visual styles** — 11 generator-backed profiles + 1 AI-authored style (Dark Luxury)\n- **Engineering semantic contracts** — C4 abstraction levels, deployment ownership, event-rail topology, and exact golden signals fail closed before rendering\n- **Executable style system** — style guides are encoded into the generator, not only documented in markdown\n- **Shared composition-quality contract** — every official style enforces zero crossings/bridges, ≤2 bends per edge, route-stretch, spacing, gutter, micro-segment, and label-clearance budgets\n- **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\n- **AI/Agent domain patterns** — RAG, Agentic Search, Mem0, Multi-Agent, Tool Call, and more built-in\n- **Semantic shape vocabulary** — LLM = double-border rect, Agent = hexagon, Vector Store = ringed cylinder\n- **Semantic arrow system** — color + dash pattern encode meaning (write vs read vs async vs loop)\n- **Geometry-safe routing** — deterministic orthogonal routes, exact waypoints, distinct ports, automatic legend relocation, labels kept inside the canvas, and verified bridge jumps for unavoidable crossings\n- **Versioned diagram IR** — legacy JSON normalizes to schema v1; duplicate IDs, dangling references, malformed waypoints, and non-finite geometry fail before rendering\n- **Structured SVG validation** — XML and marker integrity plus semantic node, reserved-region, label, canvas, edge-overlap, and edge-crossing checks\n- **Unified CLI + interactive export** — render, validate, inspect, and export one offline HTML file with pan/zoom, themes, copy, and SVG/PNG/JPEG/WebP output up to 4×\n- **Focused semantic GIF motion** — generated SVG in, validated GIF out; connectors begin absent and draw in semantic order. All twelve style contracts are user-approved. The shared `+2s-settled-flow` timing revision is also user-approved, so the default 5.75s/115-frame loop holds full settled flow on frames 38–109, then resets on 110–114\n- **Visual review gate** — exported PNGs are inspected for clipping, overlap, label placement, and routing regressions before delivery\n- **Product icons** — 40+ products with brand colors: OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL…\n- **Swim lane grouping** — automatic layer labeling for complex architectures\n- **SVG + PNG output** — SVG for editing, 1920px PNG for embedding\n- **Renderer-friendly** — pure inline SVG, no external font fetching; renders cleanly in cairosvg, rsvg-convert, and headless Chrome\n\n---\n\n## Loop Engineering\n\nThe first render is treated as a candidate, not an automatic final result. `fireworks-tech-graph` uses an agent-driven, bounded validation feedback loop to move each diagram toward a verified deliverable:\n\n```text\nPrompt\n → Diagram Contract\n → Semantic IR\n → Style Spec\n → Route Planner\n → SVG Build\n → Structural Validation\n → PNG Visual Readback\n → Targeted Revision\n → Verified SVG + PNG\n```\n\nThe loop follows five design principles:\n\n1. **Evaluate, don't assert** — completion is backed by validator and render evidence, not by the model saying the diagram looks correct.\n2. **Deterministic checks first** — XML structure, marker integrity, path geometry, arrow-component collisions, and renderability are checked before visual judgment.\n3. **Perceptual validation second** — the exported PNG is read back to inspect clipping, label collisions, hierarchy, whitespace, and routing quality that syntax checks cannot see.\n4. **Targeted correction** — each pass changes only the diagnosed labels, coordinates, corridors, or spacing, then reruns validation and rendering.\n5. **Bounded convergence** — visual review allows at most two focused correction passes by default, preventing an unbounded self-editing loop.\n\nThe loop is observable in the final status:\n\n```text\nvalidation: passed\nvisual_review: passed\n```\n\nIf the runtime cannot read images, the skill reports `visual_review: skipped (image reader unavailable)` explicitly. The workflow remains bounded and auditable; it does not claim visual verification without image evidence.\n\n---\n\n## Installation\n\n### Recommended: install the complete skill for both runtimes\n\nUse the real nested skill path. The final `/skills/fireworks-tech-graph` segment is required because a bare repository install can select only the root `SKILL.md` in current versions of `skills` CLI.\n\n```bash\nnpx -y skills@1.5.17 add \\\n yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \\\n --agent codex claude-code -g -y --copy\n```\n\nThis creates complete copies at `~/.agents/skills/fireworks-tech-graph` for Codex and `~/.claude/skills/fireworks-tech-graph` for Claude Code, including scripts, schemas, fixtures, templates, tests, references, and metadata.\n\n### Editable Git checkout for Codex\n\n```bash\nmkdir -p ~/.agents/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.agents/skills/fireworks-tech-graph\n```\n\nCodex discovers personal skills from `~/.agents/skills` and reads the optional `agents/openai.yaml` metadata included in this repository.\n\n### Editable Git checkout for Claude Code\n\n```bash\nmkdir -p ~/.claude/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph\n```\n\nClaude Code discovers personal skills from `~/.claude/skills` and ignores the Codex-only UI metadata.\n\n### One editable checkout shared by Codex and Claude Code\n\nFor a fresh install with Claude Code 2.1.203 or newer, keep one checkout and link both discovery paths to it. Move any existing destinations aside before creating the links.\n\n```bash\nmkdir -p ~/.local/share/agent-skills ~/.agents/skills ~/.claude/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.local/share/agent-skills/fireworks-tech-graph\nln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.agents/skills/fireworks-tech-graph\nln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.claude/skills/fireworks-tech-graph\n```\n\nThis keeps `SKILL.md`, references, scripts, templates, and future updates identical in both agents. The npm registry is a separate distribution channel and may lag GitHub Releases. For the current Skill version, use the nested GitHub path above; the npm page remains available for package metadata:\n\n```text\nhttps://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph\n```\n\n## Update\n\nFor a `skills` CLI copy, rerun the recommended nested-path command. For Git installations, update whichever checkout you installed:\n\n```bash\ngit -C ~/.agents/skills/fireworks-tech-graph pull\n# or\ngit -C ~/.claude/skills/fireworks-tech-graph pull\n# or, for the shared checkout\ngit -C ~/.local/share/agent-skills/fireworks-tech-graph pull\n```\n\nAfter the first install, restart Codex and Claude Code so both discover the skill. Later `SKILL.md` edits are detected automatically; restart the runtime after changing bundled scripts or references if the update is not visible.\n\nThe shell commands above target macOS, Linux, WSL, and Git Bash. On native Windows, use the equivalent `%USERPROFILE%\\.agents\\skills` and `%USERPROFILE%\\.claude\\skills` paths. Python 3.9+ is required; the optional Puppeteer path requires Node.js 22.12+.\n\n---\n\n## Unified CLI\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}\"\n\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" doctor\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" validate architecture \"$SKILL_ROOT/fixtures/api-flow-style7.json\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" render architecture \"$SKILL_ROOT/fixtures/api-flow-style7.json\" diagram.svg --report layout.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" check diagram.svg\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-html diagram.svg diagram.html --title \"Agent Runtime Architecture\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" animate diagram.svg diagram.gif\n```\n\nThe HTML export is one offline file. It sanitizes the SVG, adds pan/zoom/reset, light and dark themes, SVG source copy, and SVG/PNG/JPEG/WebP downloads at 1×–4×.\n\nFor motion, say **“Generate a GIF”**, **“Animate this diagram”**, `生成 GIF`, `制作 GIF`, or `让这张图动起来`. The command accepts a generated semantic SVG that carries one of the twelve approved motion contracts. Exact source bytes are not pinned, so validated title and content variants of a supported topology work; missing or changed role/stage/order coverage, route direction, required colors, or geometry fails closed. GIF is the only motion media format, and the default command also writes `.motion.json` as its verification report. The approved default is 960px, 5.75 seconds, 20fps, and 115 frame-center samples. All twelve scenes start connector-free, draw routes on frames 1–36, fade live flow on 36–38, hold full settled flow on 38–109, and reset on 110–114. Their approved identities include the packet heads, terminal evidence trace, Blueprint registration beads, 14×10 Notion memory cards, and the eight scene-specific signatures listed below. Default packages report both the style contract and shared `+2s-settled-flow` timing revision as `user-approved`. Timelines of 75 frames or fewer remain all-unique. Longer timelines allow non-adjacent repeated rasters inside the full-opacity interval; frame 110 is the sole boundary exception because its unchanged reset opacity is exactly 1.00, and such evidence is classified as `intentional_reset_boundary_repeat`. Frames 111–114 remain globally distinct. Long timelines require at least 75 unique rasters and forbid adjacent duplicates. The all-style 75-vs-115 gate counts binary-exact and decoded-RGBA-exact frames separately; compositor-only fallback is accepted only at AE ≤ 128, normalized RMSE ≤ 0.001, with components no thicker than 2px and confined to edge or node borders. DOM and signature geometry remain strict-exact. Explicit 3.75s/75-frame and 2.75s/55-frame calls remain supported. See [Focused SVG-to-GIF Motion](references/motion-effects.md).\n\n| Style | Preset | Live signature |\n|---:|---|---|\n| 5 | `agent-orchestration` | glass task capsule + coordinator halo |\n| 6 | `governed-runtime` | governance thread + policy seal |\n| 7 | `token-stream` | API rail + three-cell token train |\n| 8 | `golden-circuit` | luxury circuit rail + gem tracer |\n| 9 | `review-trace` | review rail + moving review cursor |\n| 10 | `cloud-flow` | region chevrons + replication capsule |\n| 11 | `event-transit` | event train + exception/projection cars |\n| 12 | `ops-pulse` | ECG/export heads + trace reveal + waterfall scanner |\n\n---\n\n## Requirements\n\nThe bundled SVG/PNG scripts require **cairosvg** (recommended) or `rsvg-convert`. Optional SVG-to-GIF export requires FFmpeg/FFprobe, Chrome/Chromium, and `puppeteer` or `puppeteer-core`.\n\n```bash\n# Recommended: cairosvg (best CSS support)\npython3 -m pip install cairosvg\n\n# Fallback: rsvg-convert (system package; may drop CSS / )\nbrew install librsvg # macOS\nsudo apt install librsvg2-bin # Ubuntu/Debian\n\n# Optional semantic motion export. Install beside every copied Skill because the\n# renderer intentionally does not load modules from the caller's directory.\nbrew install ffmpeg # macOS; use your system package manager elsewhere\nfor SKILL_ROOT in \\\n \"$HOME/.agents/skills/fireworks-tech-graph\" \\\n \"$HOME/.claude/skills/fireworks-tech-graph\"\ndo\n [ -d \"$SKILL_ROOT\" ] || continue\n npm install --prefix \"$SKILL_ROOT\" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0\n python3 \"$SKILL_ROOT/scripts/fireworks.py\" doctor\ndone\n\n# Verify either supported script renderer\npython3 -c \"import cairosvg; print(cairosvg.__version__)\"\nrsvg-convert --version\n```\n\n| Renderer | Quality | Install Cost | Use When |\n|----------|---------|--------------|----------|\n| **cairosvg** | ✅ Good | Single `python3 -m pip install` | Default — best balance |\n| rsvg-convert | ⚠️ Fair | System package | No Python available, simple flat diagrams |\n| puppeteer | ✅✅ Best | Node + Chromium | Manual browser-rendering path for D3, Mermaid, or pixel-perfect output |\n\n---\n\n## Why Not Mermaid or draw.io?\n\n| | Mermaid | draw.io | **fireworks-tech-graph** |\n|--|---------|---------|--------------------------|\n| Natural language input | ✗ | ✗ | ✅ |\n| AI/Agent domain patterns | ✗ | ✗ | ✅ |\n| Multiple visual styles | ✗ | manual | ✅ 12 built-in |\n| High-res PNG export | ✗ | manual | ✅ auto 1920px |\n| Semantic arrow colors | ✗ | manual | ✅ auto |\n| No online tool needed | ✅ | ✗ | ✅ |\n\nMermaid is great for quick inline diagrams in markdown. draw.io is great for manual polishing. `fireworks-tech-graph` is optimized for **describing a system and getting a polished diagram immediately**, without writing DSL syntax or clicking around a GUI.\n\n---\n\n## Usage\n\n### Trigger phrases\n\nThe skill auto-triggers on:\n\n```\ngenerate diagram / draw diagram / create chart / visualize\narchitecture diagram / flowchart / sequence diagram / data flow\nGenerate a GIF / animate this diagram / animate this SVG as a GIF / 生成 GIF / 制作 GIF / 让这张图动起来 / 把刚才的 SVG 转成 GIF\n```\n\n### Basic usage\n\n```\nDraw a RAG pipeline flowchart\n```\n\n```\nGenerate an Agentic Search architecture diagram\n```\n\n### Specify style\n\n```\nDraw a microservices architecture diagram, style 2 (dark terminal)\n```\n\n```\nDraw a multi-agent collaboration diagram --style glassmorphism\n```\n\n### Specify output path\n\n```\nGenerate a Mem0 architecture diagram, output to ~/Desktop/\n```\n\n```\nCreate a tool call flow diagram --output /tmp/diagrams/\n```\n\n---\n\n## Example Prompts by Scenario\n\n### AI/Agent Systems\n\n```\nCompare Agentic RAG vs standard RAG in a feature matrix, Notion clean style\n```\n→ Comparison matrix: RAG vs Agentic RAG, covering retrieval strategy, agent loop, tool use\n\n```\nGenerate a Mem0 memory architecture diagram with vector store, graph DB, KV store, and memory manager\n```\n→ Memory Architecture with swim lanes: Input → Memory Manager → Storage tiers → Retrieval\n\n```\nDraw a Multi-Agent diagram: Orchestrator dispatches 3 SubAgents (search / compute / code execution), results aggregated\n```\n→ Agent Architecture with hexagons, tool layers, and result aggregation\n\n```\nVisualize the Tool Call execution flow: LLM → Tool Selector → Execution → Parser → back to LLM\n```\n→ Flowchart with decision loop showing tool invocation cycle\n\n```\nDraw the 5 agent memory types: Sensory, Working, Episodic, Semantic, Procedural\n```\n→ Mind map or layered architecture showing memory tiers from sensory to procedural\n\n### Infrastructure & Cloud\n\n```\nDraw a microservices architecture: Client → API Gateway → [User Service / Order Service / Payment Service] → PostgreSQL + Redis\n```\n→ Architecture diagram with horizontal layers, swim lanes per service cluster\n\n```\nGenerate a data pipeline diagram: Kafka → Spark processing → write to S3 → Athena query\n```\n→ Data flow diagram with labeled arrows (stream / batch / query)\n\n```\nDraw a Kubernetes deployment: Ingress → Service → [Pod × 3] → ConfigMap + PersistentVolume\n```\n→ Architecture with dashed containers per namespace, solid arrows for traffic flow\n\n### API & Sequence Flows\n\n```\nDraw an OAuth2 authorization code flow sequence diagram: User → Client → Auth Server → Resource Server\n```\n→ Sequence diagram with vertical lifelines and activation boxes\n\n```\nDraw the ChatGPT Plugin call sequence diagram\n```\n→ Sequence: User → ChatGPT → Plugin Manifest → API → Response chain\n\n### Decision & Process Flows\n\n```\nDraw a pre-launch QA flowchart for an AI app: Code Review → Security Scan → Performance Test → Manual Approval → Deploy\n```\n→ Flowchart with diamond decision nodes and parallel branches\n\n```\nGenerate a feature comparison matrix: RAG vs Fine-tuning vs Prompt Engineering\n```\n→ Comparison matrix with checked/unchecked cells across cost, latency, accuracy, flexibility\n\n### Concept Maps\n\n```\nVisualize the LLM application tech stack: from foundation model to SDK to app framework to deployment\n```\n→ Layered architecture or mind map from model layer to product layer\n\n```\nDraw an AI Agent capability map: Perception / Memory / Reasoning / Action / Learning\n```\n→ Mind map with central \"AI Agent\" node and 5 radial branches\n\n---\n\n## 12 Styles\n\n| # | Name | Background | Font | Best For |\n|---|------|-----------|------|----------|\n| 1 | **Flat Icon** *(default)* | `#ffffff` | Helvetica | Blogs, slides, docs |\n| 2 | **Dark Terminal** | `#0f0f1a` | SF Mono / Fira Code | GitHub README, dev articles |\n| 3 | **Blueprint** | `#0a1628` | Courier New | Architecture docs, engineering |\n| 4 | **Notion Clean** | `#ffffff` | system-ui | Notion, Confluence, wikis |\n| 5 | **Glassmorphism** | `#0d1117` gradient | Inter | Product sites, keynotes |\n| 6 | **Claude Official** | `#f8f6f3` | system-ui | Anthropic-style diagrams, warm aesthetic |\n| 7 | **OpenAI Official** | `#ffffff` | system-ui | OpenAI-style diagrams, clean modern look |\n| 8 | **Dark Luxury** *(AI-authored)* | `#0a0a0a` | Georgia + system-ui | Premium docs, README heroes, conference slides |\n| 9 | **C4 Review Canvas** | `#f7f2e8` | Avenir / system-ui | C4 design reviews, ADRs, responsibilities |\n| 10 | **Cloud Fabric** | `#edf5fb` | Inter / system-ui | Multi-region deployments, VPC/network ownership |\n| 11 | **Event Transit** | `#fbf7ee` | Avenir / system-ui | Kafka/event streams, consumer groups, DLQ |\n| 12 | **Ops Pulse** | `#07111f` | SF Mono / Fira Code | SRE reviews, golden signals, critical traces |\n\nEach style has a dedicated reference file in `references/` with exact color tokens and SVG patterns. Styles 1–7 and 9–12 are generator-backed; Style 8 uses AI-authored composition plus a static regression fixture.\nThe generator consumes structure fields such as `containers`, semantic `nodes[].kind`, `arrows[].flow`, and explicit port anchors. Styles 9–12 additionally validate domain-specific fields before layout.\n\nUseful high-leverage fields for style-specific polish:\n- `style_overrides` to nudge title alignment or palette tokens without forking a full style\n- `containers[].header_prefix` / `containers[].header_text` for blueprint-style numbered section headers such as `01 // EDGE`\n- `containers[].side_label` for Claude-style left layer labels\n- `window_controls`, `meta_left`, `meta_center`, `meta_right` for terminal / document chrome\n- `blueprint_title_block` for engineering title boxes in style 3\n\n### Style Selection Guide\n\n**For UML Diagrams:**\n- **Class/Component/Package**: Style 1 (Flat Icon) or Style 4 (Notion Clean) — clear structure, easy to read\n- **Sequence/Timing**: Style 2 (Dark Terminal) — monospace fonts help with alignment\n- **State Machine/Activity**: Style 3 (Blueprint) — engineering aesthetic fits process flows\n- **Use Case/Interview**: Style 1 (Flat Icon) — colorful, accessible\n\n**For AI/Agent Diagrams:**\n- **RAG/Agentic Search**: Style 2 (Dark Terminal) or Style 5 (Glassmorphism) — tech-forward aesthetic\n- **Memory Architecture**: Style 3 (Blueprint) — emphasizes layered storage tiers\n- **Multi-Agent**: Style 5 (Glassmorphism) — frosted cards distinguish agent boundaries\n\n**For Documentation:**\n- **Internal docs**: Style 4 (Notion Clean) — minimal, wiki-friendly\n- **Blog posts**: Style 1 (Flat Icon) — colorful, engaging\n- **GitHub README**: Style 2 (Dark Terminal) — matches dark theme\n- **Presentations**: Style 5 (Glassmorphism) or Style 6 (Claude Official) — polished\n\n**For Engineering Reviews:**\n- **C4/ADR review**: Style 9 (C4 Review Canvas) — one declared abstraction level with responsibilities and protocols\n- **Cloud deployment review**: Style 10 (Cloud Fabric) — explicit region/network ownership and cross-boundary mechanisms\n- **Event-driven system review**: Style 11 (Event Transit) — topic rails, processors, consumer groups, state, and DLQ\n- **Reliability/incident review**: Style 12 (Ops Pulse) — golden signals, one critical path, and a correlated trace\n\n**Brand-Specific:**\n- **Anthropic/Claude projects**: Style 6 (Claude Official) — warm cream background, brand colors\n- **OpenAI projects**: Style 7 (OpenAI Official) — clean white, OpenAI palette\n- **Premium editorial diagrams**: Style 8 (Dark Luxury) — deep black canvas, champagne-gold hierarchy, semantic color buckets\n\n---\n\n## Diagram Types\n\n| Type | Description | Key Layout Rule |\n|------|-------------|-----------------|\n| **Architecture** | Services, components, cloud infra | Horizontal layers top→bottom |\n| **Data Flow** | What data moves where | Label every arrow with data type |\n| **Flowchart** | Decisions, process steps | Diamond = decision, top→bottom |\n| **Agent Architecture** | LLM + tools + memory | 5-layer model: Input/Agent/Memory/Tool/Output |\n| **Memory Architecture** | Mem0, MemGPT-style | Separate read/write paths, memory tiers |\n| **Sequence** | API call chains, time-ordered | Vertical lifelines, horizontal messages |\n| **Comparison** | Feature matrix, side-by-side | Column = system, row = attribute |\n| **Mind Map** | Concept maps, radial | Central node, bezier branches |\n\n### UML Diagram Support (14 Types)\n\n| UML Type | Description | Best Style |\n|----------|-------------|------------|\n| **Class Diagram** | Classes, attributes, methods, relationships | Style 1, 4 |\n| **Component Diagram** | Software components and dependencies | Style 1, 3 |\n| **Deployment Diagram** | Hardware nodes and software deployment | Style 3 |\n| **Package Diagram** | Package organization and dependencies | Style 1, 4 |\n| **Composite Structure** | Internal structure of classes/components | Style 1, 3 |\n| **Object Diagram** | Object instances and relationships | Style 1, 4 |\n| **Use Case Diagram** | Actors, use cases, system boundaries | Style 1 |\n| **Activity Diagram** | Workflows, parallel processes | Style 3 |\n| **State Machine** | State transitions and events | Style 2, 3 |\n| **Sequence Diagram** | Message exchanges over time | Style 2 |\n| **Communication Diagram** | Object interactions and messages | Style 1, 2 |\n| **Timing Diagram** | State changes over time | Style 2 |\n| **Interaction Overview** | High-level interaction flow | Style 1, 2 |\n| **ER Diagram** | Entity-relationship data models | Style 1, 3 |\n\n---\n\n## AI/Agent Domain Patterns\n\nBuilt-in pattern knowledge:\n\n```\nRAG Pipeline → Query → Embed → VectorSearch → Retrieve → LLM → Response\nAgentic RAG → adds Agent loop + Tool use\nAgentic Search → Query → Planner → [Search/Calc/Code] → Synthesizer\nMem0 Memory Layer → Input → Memory Manager → [VectorDB + GraphDB] → Context\nAgent Memory Types → Sensory → Working → Episodic → Semantic → Procedural\nMulti-Agent → Orchestrator → [SubAgent×N] → Aggregator → Output\nTool Call Flow → LLM → Tool Selector → Execution → Parser → LLM (loop)\n```\n\n---\n\n## Shape Vocabulary\n\nShapes encode semantic meaning consistently across all styles:\n\n| Concept | Shape |\n|---------|-------|\n| User / Human | Circle + body |\n| LLM / Model | Rounded rect, double border, ⚡ |\n| Agent / Orchestrator | Hexagon |\n| Memory (short-term) | Dashed-border rounded rect |\n| Memory (long-term) | Solid cylinder |\n| Vector Store | Cylinder with inner rings |\n| Graph DB | 3-circle cluster |\n| Tool / Function | Rect with ⚙ |\n| API / Gateway | Hexagon (single border) |\n| Queue / Stream | Horizontal pipe/tube |\n| Document / File | Folded-corner rect |\n| Browser / UI | Rect with 3-dot titlebar |\n| Decision | Diamond |\n| External Service | Dashed-border rect |\n\n---\n\n## Arrow Semantics\n\n| Flow Type | Stroke | Dash | Meaning |\n|-----------|--------|------|---------|\n| Primary data flow | 2px solid | — | Main request/response |\n| Control / trigger | 1.5px solid | — | System A triggers B |\n| Memory read | 1.5px solid | — | Retrieve from store |\n| Memory write | 1.5px | `5,3` | Write/store operation |\n| Async / event | 1.5px | `4,2` | Non-blocking |\n| Feedback / loop | 1.5px curved | — | Iterative reasoning |\n\n---\n\n## File Structure\n\n```\nfireworks-tech-graph/\n├── SKILL.md # Main skill — diagram types, layout rules, shape vocab\n├── README.md # This file (English)\n├── README.zh.md # Chinese version\n├── references/\n│ ├── style-1-flat-icon.md # White background, colored accents\n│ ├── style-2-dark-terminal.md # Dark bg, neon accents, monospace\n│ ├── style-3-blueprint.md # Blueprint grid, cyan lines\n│ ├── style-4-notion-clean.md # Minimal, white, single arrow color\n│ ├── style-5-glassmorphism.md # Dark gradient, frosted glass cards\n│ ├── style-6-claude-official.md # Warm cream background, Anthropic brand\n│ ├── style-7-openai.md # Clean white, OpenAI brand palette\n│ ├── style-8-dark-luxury.md # Deep black, champagne gold, AI-authored layout\n│ ├── style-9-c4-review-canvas.md # C4 review semantics + deterministic rough marks\n│ ├── style-10-cloud-fabric.md # Deployment ownership + neutral cloud glyphs\n│ ├── style-11-event-transit.md # Topic rails, stations, junctions, and DLQ\n│ ├── style-12-ops-pulse.md # Golden signals, critical path, and trace waterfall\n│ ├── png-export.md # Renderer selection and manual export paths\n│ └── icons.md # 40+ product icons + semantic shapes\n├── agents/\n│ └── openai.yaml # Optional Codex UI metadata\n├── schemas/ # Versioned diagram JSON Schemas\n├── docs/ # Capability contract and roadmap\n├── examples/\n│ └── interactive-architecture.html # Offline pan/zoom/export demo\n├── fixtures/\n│ ├── mem0-style1.json # Style 1 · Mem0 memory scene\n│ ├── tool-call-style2.json # Style 2 · grounded tool-call scene\n│ ├── microservices-style3.json # Style 3 · microservices blueprint\n│ ├── agent-memory-types-style4.json # Style 4 · memory hierarchy\n│ ├── multi-agent-style5.json # Style 5 · specialist collaboration\n│ ├── system-architecture-style6.json # Style 6 · layered system\n│ ├── api-flow-style7.json # Style 7 · API integration\n│ ├── dark-luxury-style8.svg # Style 8 · AI-authored runtime scene\n│ ├── c4-review-canvas-style9.json # Style 9 · Checkout C4 review\n│ ├── cloud-fabric-style10.json # Style 10 · Active-active deployment\n│ ├── event-transit-style11.json # Style 11 · Checkout event line\n│ ├── ops-pulse-style12.json # Style 12 · Reliability pulse\n│ └── quality-baseline/ # Internal same-topology regression set\n├── scripts/\n│ ├── fireworks.py # Unified validate/render/check/animate/export CLI\n│ ├── diagram_ir.py # Typed schema-v1 normalization\n│ ├── fireworks_geometry.py # Shared routing and collision semantics\n│ ├── interactive_html.py # Sanitized offline HTML exporter\n│ ├── generate-diagram.sh # Validate SVG + export PNG\n│ ├── generate-from-template.py # Create starter SVGs from templates\n│ ├── motion.py # SVG-to-GIF validation, encoding, and atomic reports\n│ ├── svg2gif.js # Manual-timeline Chromium frame renderer\n│ ├── svg2png.js # High-fidelity Puppeteer exporter\n│ ├── validate-svg.sh # Validation and render-check entrypoint\n│ ├── validate_svg.py # XML, marker, transform, and path collision checks\n│ └── test-all-styles.sh # Batch test all styles\n├── tests/\n│ ├── test_geometry_contracts.py # Router and artifact geometry gates\n│ └── ... # IR, CLI, exporter, installer compatibility\n├── tools/ # Distribution, consistency, install canary\n├── skills/fireworks-tech-graph/ # Complete npx-compatible physical mirror\n├── assets/\n│ └── samples/ # Showcase diagram PNGs\n├── templates/\n│ ├── architecture.svg # Architecture starter template\n│ ├── data-flow.svg # Data-flow starter template\n│ └── ... # Additional diagram templates\n└── agentloop-core.svg # Included sample SVG\n```\n\n---\n\n## Product Icon Coverage\n\n**AI/ML:** OpenAI, Anthropic/Claude, Google Gemini, Meta LLaMA, Mistral, Cohere, Groq, Hugging Face\n\n**AI Frameworks:** Mem0, LangChain, LlamaIndex, LangGraph, CrewAI, AutoGen, DSPy, Haystack\n\n**Vector DBs:** Pinecone, Weaviate, Qdrant, Chroma, Milvus, pgvector, Faiss\n\n**Databases:** PostgreSQL, MySQL, MongoDB, Redis, Elasticsearch, Neo4j, Cassandra\n\n**Messaging:** Kafka, RabbitMQ, NATS, Pulsar\n\n**Cloud:** AWS, GCP, Azure, Cloudflare, Vercel, Docker, Kubernetes\n\n**Observability:** Grafana, Prometheus, Datadog, LangSmith, Langfuse, Arize\n\n---\n\n## Troubleshooting\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| PNG is blank or all-black | `@import url()` in SVG — neither cairosvg nor rsvg-convert can fetch external fonts | Remove `@import`, use system font stack |\n| PNG not generated | No renderer installed | `python3 -m pip install cairosvg` (recommended), or `brew install librsvg` / `apt install librsvg2-bin` |\n| Borders or text missing in PNG | Using `rsvg-convert` on SVG with CSS / `` | Switch to `cairosvg` (`python3 -m pip install cairosvg`) — much better CSS support |\n| Diagram cut off at bottom | ViewBox height too short | Increase `height` in `viewBox=\"0 0 960 \"` |\n| Text overflowing boxes | Labels too long | Add `text-anchor=\"middle\"` + `` or shorten label |\n| Icons not rendering | External CDN URL | Use inline SVG paths from `references/icons.md` |\n| Browser-generated SVG renders incorrectly | cairosvg / rsvg can't replay all CSS/JS-injected styles | Use `scripts/svg2png.js` as described in `references/png-export.md` |\n\n---\n\n## License\n\nMIT © 2025 fireworks-tech-graph contributors\n","skills/fireworks-tech-graph/README.zh.md":"[English](README.md) | [中文](README.zh.md)\n\n[版本历史](docs/releases/README.md) · [更新日志](CHANGELOG.md)\n\n# fireworks-tech-graph\n\n> 不用手画图了。用中文描述你的系统，直接得到通过几何门禁的 SVG、PNG、聚焦的 SVG 转 GIF 动效与离线交互技术图。\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![GitHub Release](https://img.shields.io/github/v/release/yizhiyanhua-ai/fireworks-tech-graph)](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases)\n[![Codex Skill](https://img.shields.io/badge/Codex-Skill-10a37f)](https://learn.chatgpt.com/docs/build-skills)\n[![Claude Code Skill](https://img.shields.io/badge/Claude%20Code-Skill-d97757)](https://code.claude.com/docs/zh-CN/skills)\n[![12 种视觉风格](https://img.shields.io/badge/风格-12种-purple)]()\n[![14 种图类型](https://img.shields.io/badge/图类型-14种-green)]()\n[![UML 支持](https://img.shields.io/badge/UML-完整支持-orange)]()\n\n## 输出质量\n\n当前工作树增强了各主题的辅助文字可读性，并提供完整文字报告。在输入中设置 `\"text_policy\": \"strict\"`，可在写文件前拒绝可见文字截断；报告保留原文并提示调整方式。中文描述会使用可用的第二行。各风格的细节与测量边界见[视觉质量说明](references/visual-quality.md)。\n\n```bash\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" version\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-png diagram.svg diagram.png --width 1920\n```\n\n`version` 返回包版本、实际 Skill 路径和可用的 Git 状态；`doctor` 分别报告 SVG、HTML、PNG、GIF 的运行条件。PNG 导出校验根画布与图片尺寸，采用原子写入并回读实际像素宽高。需要 Chromium 还原效果时仍可使用浏览器 PNG 导出器。下方动图保留为已发布的 1.2.0 参考，本次未发布升级沿用其动效契约。\n\n\n## 概述\n\n`fireworks-tech-graph` 是一份可由 **Codex 和 Claude Code 共用**的 Agent Skill。它将自然语言描述转化为经过几何校验的 SVG、高分辨率 PNG、经过媒体探测验证的 SVG 转 GIF 语义动效与离线交互 HTML。聚焦后的动效链路只接收生成器产出的语义 SVG，只输出一个紧凑、可验证的 GIF。项目内置 **11 种生成器风格** + **1 种 AI 手绘风格（Dark Luxury）**；新增的四种工程风格分别为 C4 评审、云部署、事件流和可靠性排查提供可执行语义契约，同时保留 AI/Agent Pattern 与全部 14 种 UML 图类型。\n\n```\n用户: \"画一张 Mem0 的架构图，暗黑风格\"\n → Skill 识别：Memory Architecture Diagram，Style 2\n → 生成含泳道、圆柱体、语义箭头的 SVG\n → 导出 1920px PNG\n → 输出路径：mem0-architecture.svg / mem0-architecture.png\n```\n\n---\n\n## 赞助商\n\n\n \n \n \n \n
\"AIGoCode\"感谢 AIGoCode 对本项目的赞助！AIGoCode 是一个集成了 Claude Code、Codex 与最新 Gemini 模型的一站式平台，为你提供稳定、高效且极具性价比的 AI 编程服务。据赞助方介绍，平台提供灵活订阅与无需 VPN 的直连服务；可用性与账户规则以其自身服务条款为准。AIGoCode 为 fireworks-tech-graph 用户准备了专属福利：通过此链接注册，首次充值即可额外获得 10% 奖励额度！
\n\n有兴趣成为赞助商？请联系：ccc7574@gmail.com\n\n---\n\n## 效果展示\n\n> 动态样例统一使用已验收的 5.75 秒 settled-flow 时间线：先逐步绘制线路，再让最终拓扑中的数据流额外持续 2 秒。每张完整 GIF 为 960px 宽、20fps / 115 帧；3×4 总览压缩为 1200px 动态预览。`assets/samples/` 中仍保留 1920px 无损 PNG，作为静态回归基线。\n\n![动态 12 风格总览 — 每种风格使用独立工程场景](assets/samples/showcase-12-styles.gif)\n\n上方 v1.2.0 总览与下方每张完整动态样例均来自已验收回归集。12 种风格保留各自独立场景，同时统一通过几何、文字适配、线束路由和语义动效质量门禁。\n\n### 风格 1 — 扁平图标风（默认）\n*Mem0 Memory Architecture — 个人记忆抽取、冲突消解、存储与检索*\n![风格 1 — 扁平图标风](assets/samples/sample-style1-flat.gif)\n\n### 风格 2 — 暗黑极客风\n*Tool Call Flow — 暗黑终端执行、来源 Grounding、检索与回答合成*\n![风格 2 — 暗黑极客风](assets/samples/sample-style2-dark.gif)\n\n### 风格 3 — 工程蓝图风\n*Microservices Architecture — 工程网格、领域服务、数据存储、事件与遥测*\n![风格 3 — 工程蓝图风](assets/samples/sample-style3-blueprint.gif)\n\n### 风格 4 — Notion 极简风\n*Agent Memory Types — 从感知和工作上下文到长期记忆的极简层级*\n![风格 4 — Notion 极简风](assets/samples/sample-style4-notion.gif)\n\n### 风格 5 — 玻璃态卡片风\n*Multi-Agent Collaboration — 协调器、专家 Agent、共享状态、评审与合成*\n![风格 5 — 玻璃态卡片风](assets/samples/sample-style5-glass.gif)\n\n### 风格 6 — Claude 官方风格\n*System Architecture — 温暖的界面、Runtime、安全、记忆、工具和运维分层*\n![风格 6 — Claude 官方风格](assets/samples/sample-style6-claude.gif)\n\n### 风格 7 — OpenAI 官方风格\n*API Integration Flow — 清晰的 SDK、Prompt、Model、Tool、交付与发布阶段*\n![风格 7 — OpenAI 官方风格](assets/samples/sample-style7-openai.gif)\n\n### 风格 8 — 暗黑奢华风 *(AI 手绘)*\n*Agent Runtime Architecture — 控制平面、执行与状态分层，香槟金结构线和语义色桶*\n![风格 8 — 暗黑奢华风](assets/samples/sample-style8-dark-luxury.gif)\n\n### 风格 9 — C4 评审画布\n*Checkout Container Review — 单一抽象层级、明确职责、技术栈与协议*\n![风格 9 — C4 评审画布](assets/samples/sample-style9-c4-review-canvas.gif)\n\n### 风格 10 — Cloud Fabric\n*Active–Active Checkout Deployment — 全局入口、Region、VPC 归属与跨区复制*\n![风格 10 — Cloud Fabric](assets/samples/sample-style10-cloud-fabric.gif)\n\n### 风格 11 — Event Transit\n*Checkout Event Line — Topic 轨道、处理站点、显式 Junction、DLQ 与状态投影*\n![风格 11 — Event Transit](assets/samples/sample-style11-event-transit.gif)\n\n### 风格 12 — Ops Pulse\n*Checkout Reliability Pulse — Golden Signals、关键路径、OTel 导出与关联 Trace*\n![风格 12 — Ops Pulse](assets/samples/sample-style12-ops-pulse.gif)\n\n---\n\n## 稳定输出提示词\n\n公开展示保留 12 个互不重复的领域场景；它们通过同一套可执行构图契约保证质量可比。同拓扑回归样例仅保留在 `fixtures/quality-baseline/` 内部使用。\n\n```text\n按 style N 对应的场景出图：\n1 Mem0 Memory Architecture；2 Tool Call Flow；3 Microservices Architecture；\n4 Agent Memory Types；5 Multi-Agent Collaboration；6 System Architecture；\n7 API Integration Flow；8 Agent Runtime Architecture；9 C4 Checkout Review；\n10 Active–Active Cloud Deployment；11 Checkout Event Line；12 Checkout Reliability Pulse。\n保留该场景自己的节点、分区和阅读方向。\n应用 showcase 构图质量契约：零交叉、零跨线桥、每条线最多 2 个折点、\n全图最多 8 个折点、节点间距至少 40px、容器内边距至少 20px，\n正交线段保持简短，标签避开节点、线路和分区标题。\n保留所选风格的字体、配色、卡片材质和品牌化细节。\n```\n\n新增的四种工程风格可以直接使用下面的“提示词指纹”，让路由同时选中\n对应的视觉语言与领域语义契约：\n\n```text\n风格 9 · C4 评审画布：只展示一个 C4 层级，包含职责、技术栈、评审状态，以及“动作 + 协议”关系标签。\n风格 10 · 多区域云部署图：展示全局入口、Region/VPC 归属、中立云图标、部署模式，以及具名的跨边界机制。\n风格 11 · 事件地铁图：使用细 Topic 轨道、编号处理站、显式 Junction、Consumer Group、DLQ 与状态投影。\n风格 12 · 可靠性脉冲：固定观察窗口，每个服务展示四个 Golden Signals、编号关键跳、遥测导出和一条关联 Trace。\n```\n\n把 `N` 替换为 `1`–`12`。Style 8 仍由 AI 读取 `references/style-8-dark-luxury.md` 手工绘制；Style 9–12 还会执行对应的工程语义契约；所有风格同时加载 `references/composition-quality-contract.md`。\n\n---\n\n## 功能特性\n\n- **12 种视觉风格** — 11 种生成器驱动 + 1 种 AI 手绘（Dark Luxury）\n- **工程语义契约** — C4 抽象层级、Deployment 归属、事件轨道拓扑、精确 Golden Signals 在渲染前 fail closed\n- **可执行风格系统** — 风格约束不仅写在文档里，也真正进入生成器逻辑\n- **几何安全布线** — 确定性的正交路径、强制 waypoint、端口分流、图例自动避让、标签画布约束，以及带遮罩验证的跨线桥\n- **版本化 Diagram IR** — 旧 JSON 会归一化为 schema v1；重复 ID、悬空引用、非法 waypoint 和非有限坐标在渲染前直接失败\n- **统一 CLI 与交互导出** — 支持 render、validate、inspect，并可导出单文件离线 HTML，包含平移缩放、主题切换、复制和 1×–4× SVG/PNG/JPEG/WebP 导出\n- **14 种图类型** — 完整支持全部 UML 图类型（类图、组件图、部署图、包图、复合结构图、对象图、用例图、活动图、状态机图、序列图、通信图、时序图、交互概览图、ER 图）以及 AI/Agent 领域图\n- **AI/Agent 领域内建知识** — RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 等常见 Pattern 开箱即用\n- **语义形状词汇表** — LLM = 双边框圆角矩形，Agent = 六边形，Vector Store = 带内环圆柱\n- **语义箭头系统** — 颜色 + 虚线样式编码含义（写入/读取/异步/循环）\n- **结构化 SVG 校验** — XML 解析、`marker-start/mid/end` 完整性，以及 `M/L/H/V/Q/C/S/T` 路径的箭头穿框检测\n- **视觉复核门禁** — 交付前回读 PNG，检查裁切、重叠、标签位置和走线回归\n- **产品图标库** — 40+ 产品品牌色：OpenAI、Anthropic、Pinecone、Weaviate、Kafka、PostgreSQL……\n- **泳道分组** — 自动为复杂架构添加层级标签\n- **SVG + PNG 双输出** — SVG 可编辑，1920px PNG 可直接嵌入文章\n- **聚焦的语义 GIF 动效** — 只支持生成 SVG 输入和 GIF 输出；连接线从无到有并按语义顺序绘制。Style 1–12 的数据包头、终端证据流、Blueprint bead、14×10 Notion memory card、玻璃任务胶囊、治理印章、API token train、宝石 tracer、评审 cursor、双活区域流、事件列车和运维瀑布 scanner 均已验收；共享 `+2s-settled-flow` 时间修订也已成为正式默认\n- **渲染器友好** — 纯内联 SVG，不依赖外部字体；在 cairosvg、rsvg-convert、headless Chrome 下都能稳定渲染\n\n---\n\n## Loop Engineering 设计理念\n\n首轮渲染会被视为候选结果，交付前还要经过一条由 Agent 驱动、轮次受限的 validation feedback loop：\n\n```text\nPrompt\n → Diagram Contract\n → Semantic IR\n → Style Spec\n → Route Planner\n → SVG Build\n → Structural Validation\n → PNG Visual Readback\n → Targeted Revision\n → Verified SVG + PNG\n```\n\n这条闭环遵循五项原则：\n\n1. **Evaluate, don't assert** — 完成状态必须有 validator 和实际渲染证据，不能只依赖模型对结果的主观判断。\n2. **先确定性校验** — 依次检查 XML 结构、marker 引用、路径几何、箭头穿框和渲染可用性，再进入视觉判断。\n3. **再做感知验证** — 回读导出的 PNG，检查语法工具无法识别的裁切、标签碰撞、视觉层级、留白和走线质量。\n4. **定向修正** — 每轮只修改已诊断的标签、坐标、corridor 或间距，随后重新运行 validator 和 render check。\n5. **有界收敛** — 默认最多执行两轮 focused correction，避免进入无上限的自我修改循环。\n\n最终状态会明确报告闭环结果：\n\n```text\nvalidation: passed\nvisual_review: passed\n```\n\n当运行环境无法读取图片时，Skill 会明确报告 `visual_review: skipped (image reader unavailable)`。整个流程保持可观察、可审计，也不会在缺少图片证据时宣称已经完成视觉验证。\n\n---\n\n## 安装\n\n### 推荐：一次安装到 Codex 与 Claude Code\n\n必须使用真正的嵌套 Skill 路径。末尾的 `/skills/fireworks-tech-graph` 不能省略；当前版本的 `skills` CLI 在裸仓库路径下可能只选择根目录的 `SKILL.md`。\n\n```bash\nnpx -y skills@1.5.17 add \\\n yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \\\n --agent codex claude-code -g -y --copy\n```\n\n命令会把完整 Skill 分别复制到 Codex 的 `~/.agents/skills/fireworks-tech-graph` 与 Claude Code 的 `~/.claude/skills/fireworks-tech-graph`，其中包含脚本、schema、fixture、模板、测试、参考资料与元数据。\n\n### Codex 的可编辑 Git 安装\n\n```bash\nmkdir -p ~/.agents/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.agents/skills/fireworks-tech-graph\n```\n\nCodex 从 `~/.agents/skills` 发现个人 Skill，并会读取仓库中的可选元数据 `agents/openai.yaml`。\n\n### Claude Code 的可编辑 Git 安装\n\n```bash\nmkdir -p ~/.claude/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph\n```\n\nClaude Code 从 `~/.claude/skills` 发现个人 Skill，会忽略只供 Codex 使用的 UI 元数据。\n\n### Codex 与 Claude Code 共用一份可编辑仓库\n\n首次安装且 Claude Code 版本不低于 2.1.203 时，可以只保留一份仓库，再把两个发现路径链接到它。创建链接前，先把已有目标目录移开。\n\n```bash\nmkdir -p ~/.local/share/agent-skills ~/.agents/skills ~/.claude/skills\ngit clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.local/share/agent-skills/fireworks-tech-graph\nln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.agents/skills/fireworks-tech-graph\nln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.claude/skills/fireworks-tech-graph\n```\n\n这样 `SKILL.md`、参考资料、脚本、模板和后续更新在两端始终一致。npm registry 是独立分发渠道，版本可能晚于 GitHub Release。当前 Skill 版本请使用上面的 GitHub 嵌套路径；npm 页面继续用于查看包元数据：\n\n```text\nhttps://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph\n```\n\n## 更新\n\n通过 `skills` CLI 安装时，重新执行上面的嵌套路径命令。通过 Git 安装时，更新实际安装的那一份仓库：\n\n```bash\ngit -C ~/.agents/skills/fireworks-tech-graph pull\n# 或\ngit -C ~/.claude/skills/fireworks-tech-graph pull\n# 或：共享仓库方式\ngit -C ~/.local/share/agent-skills/fireworks-tech-graph pull\n```\n\n首次安装后重启 Codex 和 Claude Code，让两端重新发现 Skill。后续修改 `SKILL.md` 会自动生效；如果改的是脚本或参考资料而运行时没有看到更新，重启对应运行时。\n\n以上 Shell 命令适用于 macOS、Linux、WSL 和 Git Bash。原生 Windows 请使用 `%USERPROFILE%\\.agents\\skills` 与 `%USERPROFILE%\\.claude\\skills` 对应路径。运行脚本需要 Python 3.9+；可选的 Puppeteer 路径需要 Node.js 22.12+。\n\n---\n\n## 统一 CLI\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}\"\n\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" doctor\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" validate architecture \"$SKILL_ROOT/fixtures/api-flow-style7.json\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" render architecture \"$SKILL_ROOT/fixtures/api-flow-style7.json\" diagram.svg --report layout.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" check diagram.svg\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-html diagram.svg diagram.html --title \"API Integration Flow\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" animate diagram.svg diagram.gif\n```\n\nHTML 导出是单文件离线产物。导出器会清洗 SVG，并提供平移、缩放、复位、明暗主题、复制 SVG 源码，以及 1×–4× 的 SVG/PNG/JPEG/WebP 下载。\n\n动效可以直接说 **“生成 GIF”**、**“制作 GIF”** 或 **“让这张图动起来”**。命令只接收带有 12 套已验收动效契约之一的生成器语义 SVG。它不锁定源文件的精确字节，因此同一受支持拓扑下通过校验的标题和内容变化可以正常使用；缺失或改变 role/stage/order 覆盖、线路方向、必要颜色或几何时会 fail closed。动效媒体格式只允许 GIF，默认还会写出 `.motion.json` 验证报告。正式默认参数为 960px、5.75 秒、20fps、115 个帧中心采样：第 1–36 帧完成线路构建，第 36–38 帧淡入运行流，第 38–109 帧保持完整稳定数据流，第 110–114 帧执行五档 reset。Style 1–12 的 signature、速度、路径、几何、构建节奏均已验收，包括 packet head、terminal evidence trace、Blueprint bead、14×10 Notion memory card 和八种场景专属 signature；共享的 `+2s-settled-flow` 时间修订也已验收，默认新包的相关状态统一记录为 `user-approved`。75 帧及以下继续要求全部帧唯一；更长时间线允许完整不透明区间内出现非相邻重复。frame 110 因 reset opacity 精确保留 1.00，成为唯一边界例外，并显式分类为 `intentional_reset_boundary_repeat`；frame 111–114 必须全局不同。长时间线至少保留 75 个唯一 raster，并禁止相邻重复。全样式 75-vs-115 gate 分开统计 binary-exact 与 decoded-RGBA-exact；仅当 AE ≤ 128、normalized RMSE ≤ 0.001、差异 component 宽或高不超过 2px 且只落在 edge/node border 时，才接受 compositor 抗锯齿等价，DOM 与 signature geometry 始终 strict-exact。显式 3.75 秒/75 帧与 2.75 秒/55 帧调用继续兼容。详见 [聚焦的 SVG 转 GIF 动效](references/motion-effects.md)。\n\n| Style | Preset | 运行态 signature |\n|---:|---|---|\n| 5 | `agent-orchestration` | 玻璃任务胶囊 + coordinator halo |\n| 6 | `governed-runtime` | governance thread + policy seal |\n| 7 | `token-stream` | API rail + 三格 token train |\n| 8 | `golden-circuit` | luxury circuit rail + gem tracer |\n| 9 | `review-trace` | review rail + moving review cursor |\n| 10 | `cloud-flow` | region chevrons + replication capsule |\n| 11 | `event-transit` | event train + exception/projection cars |\n| 12 | `ops-pulse` | ECG/export heads + trace reveal + waterfall scanner |\n\n---\n\n## 安装依赖\n\n仓库自带的 SVG/PNG 校验与导出脚本需要 **cairosvg**（推荐）或 `rsvg-convert`。可选的 SVG 转 GIF 动效导出需要 FFmpeg/FFprobe、Chrome/Chromium，以及 `puppeteer` 或 `puppeteer-core`。\n\n```bash\n# 推荐：cairosvg（CSS 支持最好）\npython3 -m pip install cairosvg\n\n# 备选：rsvg-convert（系统包，可能丢失 CSS / ）\nbrew install librsvg # macOS\nsudo apt install librsvg2-bin # Ubuntu/Debian\n\n# 可选：语义动效导出。依赖分别安装在两份 Skill 旁边，因为渲染器会\n# 刻意忽略调用者当前目录中的同名 Node 模块。\nbrew install ffmpeg # macOS；其他平台使用系统包管理器\nfor SKILL_ROOT in \\\n \"$HOME/.agents/skills/fireworks-tech-graph\" \\\n \"$HOME/.claude/skills/fireworks-tech-graph\"\ndo\n [ -d \"$SKILL_ROOT\" ] || continue\n npm install --prefix \"$SKILL_ROOT\" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0\n python3 \"$SKILL_ROOT/scripts/fireworks.py\" doctor\ndone\n\n# 验证脚本支持的任一渲染器\npython3 -c \"import cairosvg; print(cairosvg.__version__)\"\nrsvg-convert --version\n```\n\n| 渲染器 | 渲染质量 | 安装成本 | 适用场景 |\n|--------|---------|---------|---------|\n| **cairosvg** | ✅ 好 | 一行 `python3 -m pip install` | 默认推荐，平衡最佳 |\n| rsvg-convert | ⚠️ 一般 | 系统包 | 没有 Python 环境，简单图形够用 |\n| puppeteer | ✅✅ 最佳 | Node + Chromium | D3、Mermaid 或像素级还原的手动浏览器渲染方案 |\n\n> 渲染器对比和 Puppeteer 用法见 [references/png-export.md](references/png-export.md)，浏览器导出脚本位于 `scripts/svg2png.js`。\n\n---\n\n## 使用方式\n\n### 触发词\n\n以下关键词会自动触发 Skill：\n\n```\n画图 / 帮我画 / 生成图 / 做个图 / 架构图 / 流程图 / 可视化一下 / 出图\ngenerate diagram / draw diagram / create chart / visualize\n生成 GIF / 制作 GIF / 让这张图动起来 / 把刚才的 SVG 转成 GIF / Generate a GIF / animate this diagram / animate this SVG as a GIF\n```\n\n### 基本用法\n\n```\n画一张 RAG 流程图\n```\n\n```\n生成一张 Agentic Search 架构图\n```\n\n### 指定风格\n\n```\n画一张微服务架构图，风格2（暗黑极客风）\n```\n\n```\n生成 Multi-Agent 协作图，玻璃态风格\n```\n\n### 指定输出路径\n\n```\n生成 Mem0 架构图，输出到 ~/Desktop/\n```\n\n```\n画一张 Tool Call 流程图 --output /tmp/diagrams/\n```\n\n---\n\n## 场景示例集\n\n### AI/Agent 系统\n\n```\n画一张 Agentic RAG 和普通 RAG 的对比图，用 Notion 极简风\n```\n→ 功能矩阵对比：检索策略、Agent 循环、工具调用、延迟、成本\n\n```\n生成一张 Mem0 记忆架构图，包含向量库、图数据库、KV 存储和记忆管理器\n```\n→ 分泳道记忆架构：Input → Memory Manager → 存储层 → 检索输出\n\n```\n画一张 Multi-Agent 协作图：Orchestrator 调度 3 个 SubAgent（搜索/计算/代码执行），汇聚到 Aggregator\n```\n→ Agent 架构，六边形节点 + 工具层 + 结果聚合\n\n```\n可视化一下 Tool Call 的执行流程：LLM → Tool Selector → Execution → Parser → 回到 LLM\n```\n→ 含决策循环的流程图，展示工具调用的完整生命周期\n\n```\n画一张 Agent 的 5 种记忆类型图：感知记忆、工作记忆、情景记忆、语义记忆、程序记忆\n```\n→ 思维导图或分层架构，从感官输入到程序技能的记忆层级\n\n### 基础设施与云架构\n\n```\n帮我画一张微服务架构图：Client → API Gateway → [用户服务 / 订单服务 / 支付服务] → PostgreSQL + Redis\n```\n→ 水平分层架构，每个服务集群一个泳道\n\n```\n生成一张数据管道图：Kafka 消费数据 → Spark 处理 → 写入 S3 → Athena 查询\n```\n→ 数据流图，每条箭头标注数据类型（stream / batch / query）\n\n```\n画一张 Kubernetes 部署架构：Ingress → Service → [Pod × 3] → ConfigMap + PersistentVolume\n```\n→ 架构图，Namespace 用虚线框，流量用实线箭头\n\n### API 与时序流程\n\n```\n画一张 OAuth2 授权码流程的序列图：用户 → 客户端 → 授权服务器 → 资源服务器\n```\n→ 序列图，垂直生命线 + 激活框\n\n```\n帮我画一张 ChatGPT Plugin 的调用时序图\n```\n→ 时序：User → ChatGPT → Plugin Manifest → API → 响应链\n\n### 决策与流程图\n\n```\n画一张 AI 应用上线前的质检流程图：代码审查 → 安全扫描 → 性能测试 → 人工审核 → 发布\n```\n→ 流程图，含菱形决策节点和并行分支\n\n```\n生成一张 RAG vs Fine-tuning vs Prompt Engineering 的功能对比图\n```\n→ 功能矩阵，对比成本、延迟、准确率、灵活性\n\n### 概念图与知识图谱\n\n```\n帮我可视化一下 LLM 应用的技术栈：从底层模型到 SDK 到应用框架到部署层\n```\n→ 分层架构图或思维导图，从模型层到产品层\n\n```\n画一张 AI Agent 的核心能力地图：感知 / 记忆 / 推理 / 行动 / 学习\n```\n→ 以\"AI Agent\"为中心的放射状思维导图，5 个核心能力分支\n\n---\n\n## 12 种风格\n\n| # | 名称 | 背景色 | 字体 | 适用场景 |\n|---|------|--------|------|----------|\n| 1 | **扁平图标风** *(默认)* | `#ffffff` | Helvetica | 博客、幻灯片、技术文档 |\n| 2 | **暗黑极客风** | `#0f0f1a` | SF Mono / Fira Code | GitHub README、开发者文章 |\n| 3 | **工程蓝图风** | `#0a1628` | Courier New | 架构设计文档、工程规范 |\n| 4 | **Notion 极简风** | `#ffffff` | system-ui | Notion、Confluence、内部 Wiki |\n| 5 | **玻璃态卡片风** | `#0d1117` 渐变 | Inter | 产品官网、演讲 Keynote |\n| 6 | **Claude 官方风格** | `#f8f6f3` | system-ui | Anthropic 风格图表，温暖专业美学 |\n| 7 | **OpenAI 官方风格** | `#ffffff` | system-ui | OpenAI 风格图表，简洁现代设计 |\n| 8 | **暗黑奢华风** *(AI 手绘)* | `#0a0a0a` | Georgia + system-ui | 高级文档、README Hero、技术演讲 |\n| 9 | **C4 评审画布** | `#f7f2e8` | Avenir / system-ui | C4 设计评审、ADR、职责边界 |\n| 10 | **Cloud Fabric** | `#edf5fb` | Inter / system-ui | 多 Region 部署、VPC/网络归属 |\n| 11 | **Event Transit** | `#fbf7ee` | Avenir / system-ui | Kafka/Event Stream、Consumer Group、DLQ |\n| 12 | **Ops Pulse** | `#07111f` | SF Mono / Fira Code | SRE 评审、Golden Signals、关键 Trace |\n\n每种风格在 `references/` 目录下都有专属参考文件，包含精确的颜色 Token 和 SVG Pattern。风格 1–7 与 9–12 由生成器驱动；风格 8 使用 AI 手绘构图和静态回归 fixture。\n生成器会直接消费 `containers`、语义化 `nodes[].kind`、`arrows[].flow` 以及显式端口锚点；Style 9–12 还会在布局前校验领域字段。\n\n几个很有用的增强字段：\n- `style_overrides`：在不复制整套 style 的前提下微调标题对齐或配色 token\n- `containers[].header_prefix` / `containers[].header_text`：用于 style 3 这种 `01 // EDGE` 的工程编号分区标题\n- `containers[].side_label`：用于 style 6 这类左侧 Layer Label\n- `window_controls`、`meta_left`、`meta_center`、`meta_right`：用于终端 / 文档风格的顶部 chrome\n- `blueprint_title_block`：用于 style 3 的蓝图标题信息框\n\n### 风格选择指南\n\n**UML 图类型：**\n- **类图/组件图/包图**：风格 1（扁平图标风）或风格 4（Notion 极简风）— 结构清晰，易于阅读\n- **序列图/时序图**：风格 2（暗黑极客风）— 等宽字体有助于对齐\n- **状态机图/活动图**：风格 3（工程蓝图风）— 工程美学适合流程图\n- **用例图/交互图**：风格 1（扁平图标风）— 彩色，易于理解\n\n**AI/Agent 图类型：**\n- **RAG/Agentic Search**：风格 2（暗黑极客风）或风格 5（玻璃态卡片风）— 科技感强\n- **记忆架构**：风格 3（工程蓝图风）— 强调分层存储结构\n- **Multi-Agent**：风格 5（玻璃态卡片风）— 磨砂卡片区分 Agent 边界\n\n**文档类型：**\n- **内部文档**：风格 4（Notion 极简风）— 极简，适合 Wiki\n- **技术博客**：风格 1（扁平图标风）— 彩色，吸引眼球\n- **GitHub README**：风格 2（暗黑极客风）— 匹配暗色主题\n- **演示文稿**：风格 5（玻璃态卡片风）或风格 6（Claude 官方风格）— 精致专业\n\n**品牌特定：**\n- **Anthropic/Claude 项目**：风格 6（Claude 官方风格）— 温暖奶油色背景，品牌感强且克制\n- **OpenAI 项目**：风格 7（OpenAI 官方风格）— 简洁白色，OpenAI 配色\n- **高级编辑感技术图**：风格 8（暗黑奢华风）— 深黑画布、香槟金层级和语义色桶\n\n**工程评审：**\n- **C4/ADR 评审**：风格 9（C4 评审画布）— 单一抽象层级、职责与协议明确\n- **云部署评审**：风格 10（Cloud Fabric）— Region/Network 归属与跨边界机制明确\n- **事件驱动系统**：风格 11（Event Transit）— Topic、Processor、Consumer Group、状态与 DLQ\n- **可靠性/事故复盘**：风格 12（Ops Pulse）— Golden Signals、唯一关键路径与关联 Trace\n\n---\n\n## 支持的图类型\n\n| 类型 | 描述 | 关键布局规则 |\n|------|------|-------------|\n| **架构图** | 服务、组件、云基础设施 | 水平分层，自上而下 |\n| **数据流图** | 数据在系统中的流向 | 每条箭头标注数据类型 |\n| **流程图** | 决策树、流程步骤 | 菱形 = 决策，自上而下 |\n| **Agent 架构图** | LLM + 工具 + 记忆 | 五层模型：输入/Agent/记忆/工具/输出 |\n| **记忆架构图** | Mem0、MemGPT 风格 | 读/写路径分离，记忆层级分明 |\n| **序列图** | API 调用链、时序交互 | 垂直生命线，水平消息箭头 |\n| **对比图** | 功能矩阵、方案比较 | 列 = 系统，行 = 属性 |\n| **思维导图** | 概念地图、发散思维 | 中心节点，贝塞尔曲线分支 |\n\n### UML 图类型支持（14 种）\n\n| UML 类型 | 描述 | 推荐风格 |\n|----------|------|----------|\n| **类图** | 类、属性、方法、关系 | 风格 1, 4 |\n| **组件图** | 软件组件和依赖关系 | 风格 1, 3 |\n| **部署图** | 硬件节点和软件部署 | 风格 3 |\n| **包图** | 包组织和依赖关系 | 风格 1, 4 |\n| **复合结构图** | 类/组件的内部结构 | 风格 1, 3 |\n| **对象图** | 对象实例和关系 | 风格 1, 4 |\n| **用例图** | 参与者、用例、系统边界 | 风格 1 |\n| **活动图** | 工作流、并行流程 | 风格 3 |\n| **状态机图** | 状态转换和事件 | 风格 2, 3 |\n| **序列图** | 时间顺序的消息交换 | 风格 2 |\n| **通信图** | 对象交互和消息 | 风格 1, 2 |\n| **时序图** | 状态随时间的变化 | 风格 2 |\n| **交互概览图** | 高层交互流程 | 风格 1, 2 |\n| **ER 图** | 实体关系数据模型 | 风格 1, 3 |\n\n---\n\n## AI/Agent 领域内建 Pattern\n\nSkill 内置以下领域知识，可直接描述场景生成：\n\n```\nRAG Pipeline → Query → Embed → VectorSearch → Retrieve → LLM → Response\nAgentic RAG → 在 RAG 基础上加入 Agent 循环 + 工具调用\nAgentic Search → Query → Planner → [Search/Calc/Code] → Synthesizer\nMem0 记忆层 → Input → Memory Manager → [VectorDB + GraphDB] → Context\nAgent 记忆类型 → 感知记忆 → 工作记忆 → 情景记忆 → 语义记忆 → 程序记忆\nMulti-Agent → Orchestrator → [SubAgent×N] → Aggregator → Output\nTool Call 流程 → LLM → Tool Selector → Execution → Parser → LLM (循环)\n```\n\n---\n\n## 形状词汇表\n\n形状在所有风格中保持一致的语义：\n\n| 概念 | 形状 |\n|------|------|\n| 用户 / 人类 | 圆形 + 身体路径 |\n| LLM / 模型 | 圆角矩形，双边框，⚡ |\n| Agent / 编排器 | 六边形 |\n| 短期记忆 | 虚线边框圆角矩形 |\n| 长期记忆 | 实线圆柱体 |\n| Vector Store | 带内环圆柱 |\n| Graph DB | 三圆簇 |\n| 工具 / 函数 | 带 ⚙ 的矩形 |\n| API / 网关 | 六边形（单边框） |\n| 消息队列 / 流 | 横向管道 |\n| 文档 / 文件 | 折角矩形 |\n| 浏览器 / UI | 带三点标题栏的矩形 |\n| 决策节点 | 菱形 |\n| 外部服务 | 虚线边框矩形 |\n\n---\n\n## 箭头语义\n\n| 流类型 | 线宽 | 虚线 | 含义 |\n|--------|------|------|------|\n| 主数据流 | 2px 实线 | — | 主要请求/响应路径 |\n| 控制 / 触发 | 1.5px 实线 | — | 系统 A 触发 B |\n| 记忆读取 | 1.5px 实线 | — | 从存储检索 |\n| 记忆写入 | 1.5px | `5,3` | 写入/存储操作 |\n| 异步 / 事件 | 1.5px | `4,2` | 非阻塞 |\n| 反馈 / 循环 | 1.5px 曲线 | — | 迭代推理 |\n\n---\n\n## 文件结构\n\n```\nfireworks-tech-graph/\n├── SKILL.md # 主 Skill 文件 — 图类型、布局规则、形状词汇\n├── README.md # 英文文档\n├── README.zh.md # 本文件（中文）\n├── references/\n│ ├── style-1-flat-icon.md # 白底风格 — 彩色强调色\n│ ├── style-2-dark-terminal.md # 暗黑风格 — Neon 配色，等宽字体\n│ ├── style-3-blueprint.md # 蓝图风格 — 网格底纹，青色线条\n│ ├── style-4-notion-clean.md # 极简风格 — 白底，单色箭头\n│ ├── style-5-glassmorphism.md # 玻璃态风格 — 深色渐变，磨砂卡片\n│ ├── style-6-claude-official.md # Claude 官方风格 — 温暖奶油色，Anthropic 品牌\n│ ├── style-7-openai.md # OpenAI 官方风格 — 简洁白色，OpenAI 品牌配色\n│ ├── style-8-dark-luxury.md # 深黑画布、香槟金、AI 手绘布局\n│ ├── style-9-c4-review-canvas.md # C4 评审语义 + 确定性手绘纹理\n│ ├── style-10-cloud-fabric.md # Deployment 归属 + 中性 Cloud Glyph\n│ ├── style-11-event-transit.md # Topic 轨道、站点、Junction 与 DLQ\n│ ├── style-12-ops-pulse.md # Golden Signals、关键路径与 Trace Waterfall\n│ ├── png-export.md # 渲染器选择与手动导出方案\n│ └── icons.md # 40+ 产品图标 + 语义形状模板\n├── agents/\n│ └── openai.yaml # Codex 可选 UI 元数据\n├── schemas/ # 版本化 Diagram JSON Schema\n├── docs/ # 能力契约与路线图\n├── examples/\n│ └── interactive-architecture.html # 离线平移/缩放/导出演示\n├── fixtures/\n│ ├── mem0-style1.json # Style 1 · Mem0 记忆场景\n│ ├── tool-call-style2.json # Style 2 · Tool Call 场景\n│ ├── microservices-style3.json # Style 3 · 微服务蓝图\n│ ├── agent-memory-types-style4.json # Style 4 · 记忆层级\n│ ├── multi-agent-style5.json # Style 5 · 多 Agent 协作\n│ ├── system-architecture-style6.json # Style 6 · 系统分层\n│ ├── api-flow-style7.json # Style 7 · API 集成\n│ ├── dark-luxury-style8.svg # Style 8 · AI 手绘 Runtime 场景\n│ ├── c4-review-canvas-style9.json # Style 9 · Checkout C4 评审\n│ ├── cloud-fabric-style10.json # Style 10 · Active-Active Deployment\n│ ├── event-transit-style11.json # Style 11 · Checkout Event Line\n│ ├── ops-pulse-style12.json # Style 12 · Reliability Pulse\n│ └── quality-baseline/ # 内部同拓扑质量回归基线\n├── scripts/\n│ ├── fireworks.py # 统一 validate/render/check/animate/export CLI\n│ ├── diagram_ir.py # Schema v1 类型化归一层\n│ ├── fireworks_geometry.py # 路由与碰撞共享语义\n│ ├── interactive_html.py # 安全的离线 HTML 导出器\n│ ├── generate-diagram.sh # SVG 校验与 PNG 导出\n│ ├── generate-from-template.py # 基于模板生成 SVG 起始文件\n│ ├── motion.py # SVG 转 GIF 校验、编码与原子报告\n│ ├── svg2gif.js # 手动时间轴 Chromium 逐帧渲染器\n│ ├── svg2png.js # Puppeteer 高保真导出脚本\n│ ├── validate-svg.sh # 校验与渲染检查入口\n│ ├── validate_svg.py # XML、marker、transform 与路径碰撞检测\n│ └── test-all-styles.sh # 批量测试所有风格\n├── tests/\n│ ├── test_geometry_contracts.py # 路由与产物几何门禁\n│ └── ... # IR、CLI、导出器、安装兼容测试\n├── tools/ # 分发、项目一致性、安装 canary\n├── skills/fireworks-tech-graph/ # 完整的 npx 兼容物理镜像\n├── assets/\n│ └── samples/ # 示例图 PNG\n├── templates/\n│ ├── architecture.svg # 架构图模板\n│ ├── data-flow.svg # 数据流模板\n│ └── ... # 其他图类型模板\n└── agentloop-core.svg # 仓库自带示例 SVG\n```\n\n---\n\n## 产品图标覆盖范围\n\n**AI/ML 模型：** OpenAI、Anthropic/Claude、Google Gemini、Meta LLaMA、Mistral、Cohere、Groq、Hugging Face\n\n**AI 框架：** Mem0、LangChain、LlamaIndex、LangGraph、CrewAI、AutoGen、DSPy、Haystack\n\n**向量数据库：** Pinecone、Weaviate、Qdrant、Chroma、Milvus、pgvector、Faiss\n\n**关系型/NoSQL 数据库：** PostgreSQL、MySQL、MongoDB、Redis、Elasticsearch、Neo4j、Cassandra\n\n**消息队列：** Kafka、RabbitMQ、NATS、Pulsar\n\n**云服务 & 基础设施：** AWS、GCP、Azure、Cloudflare、Vercel、Docker、Kubernetes\n\n**可观测性：** Grafana、Prometheus、Datadog、LangSmith、Langfuse、Arize\n\n---\n\n## 故障排查\n\n| 现象 | 原因 | 处理方式 |\n|------|------|----------|\n| `npx skills add` 后只有 `SKILL.md` | 使用了裸仓库路径，CLI 选中了根 Skill | 使用 `yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph` 嵌套路径重新安装 |\n| SVG 校验报告 `edge_node` / `edge_reserved` | 业务线穿过节点、图例或标题区 | 调整端口、`corridor_x/y` 或 waypoint，再重新渲染；不要手工删除 geometry gate |\n| SVG 校验报告 `edge_overlap` | 两条业务线共用同一段轨道 | 给边分配独立 corridor 或 waypoint；跨线桥不能修复共线重叠 |\n| PNG 为空或纯黑 | SVG 中含外部字体 `@import url()` | 移除 `@import`，使用系统字体栈 |\n| PNG 未生成 | 未安装 raster renderer | 推荐 `python3 -m pip install cairosvg`，也可安装 `rsvg-convert` |\n| 交互 HTML 导出拒绝 SVG | SVG 含脚本、事件属性、外部链接或 `foreignObject` | 将资源内联并移除 active content 后重新导出 |\n| 图底部被截断 | `viewBox` 高度不足 | 增加画布 `height`，再执行严格 geometry check |\n\n---\n\n## License\n\nMIT © 2025 fireworks-tech-graph contributors\n","skills/fireworks-tech-graph/SECURITY.md":"# Security reporting\n\nPlease avoid posting exploit details, credentials or private diagrams in public\nissues. Use GitHub private vulnerability reporting if it is available in the\nrepository Security tab. If no private channel is offered, open an issue asking\nthe maintainer for a private contact route without including the vulnerability.\n\nInclude the installed version/source, affected command, a minimal redacted input,\nexpected and actual behavior, and the security impact. No response-time guarantee\nor enabled reporting channel is implied by this document.\n\nSVG, HTML and browser rendering have different accepted-content boundaries.\nKeep renderer sandboxing enabled unless an explicitly configured isolated runtime\nrequires the documented opt-in. Do not execute remote SVG scripts to reproduce an\nissue. Maintainers should reproduce reports with minimum privileges and record\nfixed versions in the changelog.\n","skills/fireworks-tech-graph/SKILL.md":"---\nname: fireworks-tech-graph\ndescription: >-\n Create precise SVG technical diagrams, export PNG or offline HTML, and animate\n supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or\n workflow diagrams; not photos, raster art or statistical charts.\n---\n\n# Fireworks Tech Graph\n\nOne portable Agent Skill for Codex and Claude Code. SVG is the canonical artifact;\nPNG, offline HTML and supported GIF motion are output routes. Preserve requested\nlabels, topology and meaning; a successful command is not a visual quality verdict.\n\n## Locate and select\n\nResolve the directory containing this file as `SKILL_ROOT`. Use\n`${CLAUDE_SKILL_DIR}` in Claude Code or the absolute directory in Codex's loaded\nskill metadata. Do not assume cwd or a previous shell variable persists.\n\nUse the installed version for the task. Run `version` for source/version questions\nand `doctor` when diagnosing a missing renderer, font or dependency; do not make\ninstallation, updates or a complete test suite prerequisites for every diagram.\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" version\n```\n\n- Honor the user's diagram type, content and style; choose sensible reversible\n details from the brief. Ask only for a material missing engineering fact or\n a choice the user explicitly reserved. A request to draw includes local rendering.\n- Styles 1–7 and 9–12 have JSON generators. Style 8 (Dark Luxury) remains\n AI-authored SVG: use its style reference, then the same validation/export gates.\n- Default to Style 1 Flat Icon when no user/workspace preference applies. Load the\n actual matching file from [the style matrix](references/style-diagram-matrix.md).\n Read other styles only for a requested comparison.\n- Styles 9–12 default to C4, cloud, event and observability semantic contracts.\n Validate facts before layout; do not invent responsibilities, protocols or metrics.\n- Adapt an existing valid SVG directly when appropriate. JSON generation is not\n required for every edit. Use [diagram/layout guidance](references/diagram-layout-reference.md)\n and [icons](references/icons.md) only for the relevant type or symbols.\n\n## Generate and check\n\nReuse the user's current brief and artifact; an extra planning document is optional.\nFor JSON work, select `text_policy: \"strict\"` when all labels must be visible exactly.\nThe compatible `report` default preserves full labels in SVG metadata and reports\nany visible truncation. Resolve that warning before claiming complete exact text.\nFor polished work apply the [composition contract](references/composition-quality-contract.md).\n\n```bash\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" validate architecture input.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" render architecture input.json diagram.svg --report layout.json\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" check diagram.svg\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" export-png diagram.svg diagram.png --width 1920\n```\n\n`check` validates SVG identity, marker references, generic collisions, semantic\ngeometry and composition. Inspect the report's typography and palette scope;\nheuristic text widths do not replace inspecting the actual rendered font.\nUse [visual quality guidance](references/visual-quality.md) for readability and\nstyle-specific refinements. Keep one semantic connector per business edge.\n\n## Additional outputs\n\n- **PNG:** prefer `export-png`, which reads root canvas dimensions, limits output\n size, writes atomically and reads the PNG dimensions back. Alternate renderer\n details are in [PNG export](references/png-export.md).\n- **HTML:** `fireworks.py export-html diagram.svg diagram.html`. One sanitized\n offline file provides pan/zoom, source copy and static image downloads.\n- **GIF:** “Generate a GIF”, “Animate this diagram”, “生成 GIF”, “制作 GIF” and\n “让这张图动起来” select the existing semantic SVG's motion route. Styles 1–12 are enabled\n for the documented scene contracts; arbitrary same-style topologies are not\n promised. Load [motion effects](references/motion-effects.md) and run\n `fireworks.py animate diagram.svg diagram.gif`. Default is 960px, 20fps, 5.75s\n with the `+2s-settled-flow` preset and a `.motion.json` report. Historical\n `user-approved` fields describe maintainer-reviewed presets, not authorization\n from the current user to publish, spend or send data.\n\n## Verify the requested outcome\n\nInspect the final PNG at intended reading size when image viewing is available:\ncheck text completeness, contrast, font substitution, hierarchy, spacing, clipping,\narrow direction, crossings and labels. Preserve style palette and material while\nfixing defects. Reuse an unchanged reviewed render; do not keep adding tests or\npolish after acceptance passes. If viewing is unavailable, explicitly mark the\nvisual check skipped and do not claim visual correctness.\n\nAfter a failed check, use its element IDs and geometry to make a focused repair;\nchange the approach after two unchanged failures. Widen/split an overfull diagram\ninstead of hiding required copy or endlessly shrinking type. Do not silently\nweaken semantic or composition constraints to obtain a pass.\n\nComplete every requested local output and its applicable checks, then report file\npaths, dimensions, visual review and residual limitations. A first SVG does not\ncomplete a requested PNG/GIF/HTML package. Publication or remote delivery requires\nits own scope-matching authorization; existing authorization is not requested twice.\n","skills/fireworks-tech-graph/agents/openai.yaml":"interface:\n display_name: \"Fireworks Tech Graph\"\n short_description: \"Generate geometry-safe technical diagrams\"\n default_prompt: \"Use $fireworks-tech-graph to turn the user's system or workflow description into a geometry-checked SVG, then export PNG, controlled offline HTML, or a validated semantic GIF. Treat direct GIF requests as the approved 5.75s/115-frame SVG-to-GIF default.\"\n","skills/fireworks-tech-graph/assets/icons/cloud/manifest-v1.json":"{\n \"schema_version\": 1,\n \"version\": \"2026.07-neutral.1\",\n \"policy\": \"Built-in provider-neutral glyphs. Official vendor packs remain external, versioned adapters.\",\n \"official_sources\": {\n \"aws\": \"https://aws.amazon.com/architecture/icons/\",\n \"azure\": \"https://learn.microsoft.com/azure/architecture/icons/\",\n \"gcp\": \"https://cloud.google.com/icons\"\n },\n \"icons\": [\n {\n \"id\": \"generic:traffic\",\n \"aliases\": [\"global traffic\", \"dns\", \"cdn\"],\n \"badge\": \"EDGE\",\n \"category\": \"edge\",\n \"color\": \"#2563eb\",\n \"glyph\": \"globe\"\n },\n {\n \"id\": \"generic:gateway\",\n \"aliases\": [\"load balancer\", \"api gateway\"],\n \"badge\": \"GW\",\n \"category\": \"network\",\n \"color\": \"#7c3aed\",\n \"glyph\": \"gateway\"\n },\n {\n \"id\": \"generic:compute\",\n \"aliases\": [\"service\", \"container\", \"kubernetes workload\"],\n \"badge\": \"APP\",\n \"category\": \"compute\",\n \"color\": \"#059669\",\n \"glyph\": \"compute\"\n },\n {\n \"id\": \"generic:database\",\n \"aliases\": [\"relational database\", \"managed database\"],\n \"badge\": \"DB\",\n \"category\": \"data\",\n \"color\": \"#ea580c\",\n \"glyph\": \"database\"\n },\n {\n \"id\": \"generic:stream\",\n \"aliases\": [\"event stream\", \"message bus\"],\n \"badge\": \"BUS\",\n \"category\": \"integration\",\n \"color\": \"#db2777\",\n \"glyph\": \"stream\"\n },\n {\n \"id\": \"generic:observability\",\n \"aliases\": [\"metrics\", \"telemetry\"],\n \"badge\": \"OBS\",\n \"category\": \"operations\",\n \"color\": \"#0891b2\",\n \"glyph\": \"observe\"\n }\n ]\n}\n","skills/fireworks-tech-graph/assets/samples/showcase-gif-manifest.json":"{\n \"schema_version\": 1,\n \"approved_at\": \"2026-07-17\",\n \"source_contract\": \"user-approved +2s-settled-flow\",\n \"approval\": {\n \"status\": \"user-approved\",\n \"style_count\": 12,\n \"full_size_frame_count\": 1380,\n \"compatibility_frames_accepted\": 852,\n \"compatibility_frames_total\": 852\n },\n \"overview\": {\n \"layout\": \"3x4\",\n \"tile_box\": \"400x320\",\n \"preview_fps\": \"12/1\",\n \"palette_colors\": 160,\n \"frame_delays_centiseconds\": {\n \"8\": 46,\n \"9\": 23\n }\n },\n \"assets\": [\n {\n \"file\": \"showcase-12-styles.gif\",\n \"sha256\": \"361c06f415e14915198e37302beb884c3e6d223f252c163e8d0c4956a8076b08\",\n \"bytes\": 1020419,\n \"width\": 1200,\n \"height\": 1280,\n \"fps\": \"12/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 69\n },\n {\n \"file\": \"sample-style1-flat.gif\",\n \"sha256\": \"db22b38f0c54d4d77c464085c66e81558fcca1ece9d352fb17f96ff06244b25e\",\n \"bytes\": 269337,\n \"width\": 960,\n \"height\": 680,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style2-dark.gif\",\n \"sha256\": \"54ff54b2694ae12b995f59f7bfac658d733298e72ac0238c948fc61e41dec9d4\",\n \"bytes\": 388446,\n \"width\": 960,\n \"height\": 720,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style3-blueprint.gif\",\n \"sha256\": \"94405804ba16bd6dd1b6b77c0acee576e119ef80909037418cdd9851b66033cb\",\n \"bytes\": 283449,\n \"width\": 960,\n \"height\": 720,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style4-notion.gif\",\n \"sha256\": \"ef74b2582e24b9aeda41dfc1cac00aa4e45754a2da83949615b5c01719af04f5\",\n \"bytes\": 211403,\n \"width\": 960,\n \"height\": 620,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style5-glass.gif\",\n \"sha256\": \"c89b0278b3792b179941f4efda300690eb769783b35b2bd055705f73cdda5314\",\n \"bytes\": 376688,\n \"width\": 960,\n \"height\": 700,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style6-claude.gif\",\n \"sha256\": \"390fda2e36af77f8fe798ed93136bb9874975cffa9eb91842aa2fa430d35e67b\",\n \"bytes\": 246718,\n \"width\": 960,\n \"height\": 700,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style7-openai.gif\",\n \"sha256\": \"672f9f62d0800f25918db5c411014b1fbfdde64cd5cd700f2fcb16105d4cc97e\",\n \"bytes\": 165225,\n \"width\": 960,\n \"height\": 700,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style8-dark-luxury.gif\",\n \"sha256\": \"186e28cc8a35ad0434558308562c7a2c743055e3b8bbc2b3865758af39080056\",\n \"bytes\": 234825,\n \"width\": 960,\n \"height\": 600,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style9-c4-review-canvas.gif\",\n \"sha256\": \"ebc1d337a38d55ba2010191c90e534d94f394dd64205a36d3a205c78771c0b5e\",\n \"bytes\": 205572,\n \"width\": 960,\n \"height\": 611,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style10-cloud-fabric.gif\",\n \"sha256\": \"d02fa0d67cd4fd621fe94635938de8b6066594b7060e08cf92bbcc008c54e29f\",\n \"bytes\": 340823,\n \"width\": 960,\n \"height\": 760,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style11-event-transit.gif\",\n \"sha256\": \"f3995d0269732277b6e80f5f24849b26d710f9a6c34642e94c61de000cd08637\",\n \"bytes\": 184537,\n \"width\": 960,\n \"height\": 590,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n },\n {\n \"file\": \"sample-style12-ops-pulse.gif\",\n \"sha256\": \"26f5657f4430f337daec744a761bc27f8554f4708bd9a564bff198fc83507800\",\n \"bytes\": 356902,\n \"width\": 960,\n \"height\": 860,\n \"fps\": \"20/1\",\n \"duration_seconds\": 5.75,\n \"frames\": 115\n }\n ]\n}\n","skills/fireworks-tech-graph/docs/CAPABILITIES.md":"# Capability contract\n\n## Input\n\n- Legacy JSON remains supported and normalizes to schema v1.\n- Versioned input uses `schema_version: 1` and a `mode` matching the selected renderer.\n- Duplicate IDs, dangling references, non-finite coordinates, malformed waypoints, and unknown schema versions fail before layout.\n- Style-specific fields and unknown renderer extensions are preserved.\n- `style` and `visual_theme` resolve through one catalog covering Styles 1–12; unknown or conflicting selectors fail closed.\n\n## Engineering semantics\n\n- Style 9 defaults to `c4-review`: one C4 level, typed elements, responsibilities, technologies, and protocols.\n- Style 10 defaults to `cloud-fabric`: acyclic deployment boundaries, explicit workload ownership, versioned neutral icons, and named cross-boundary mechanisms.\n- Style 11 defaults to `event-transit`: ordered topic rails, declared junctions, consumer groups, state projections, and real DLQ targets.\n- Style 12 defaults to `ops-pulse`: exact golden signals, one contiguous business critical path, separate telemetry semantics, and a valid trace tree.\n- `semantic_profile: \"generic\"` keeps any generator-backed visual theme available for internal topology regression without pretending domain semantics are present.\n\n## Geometry\n\n- All generated business edges are rectilinear outside declared bridge arcs.\n- `route_points` are exact ordered waypoints; every leg is routed safely.\n- Nodes, section headers, legends, title blocks, footers, labels, and the canvas boundary participate in layout checks.\n- Distinct ports are allocated deterministically for shared node sides.\n- Collinear edge overlap is fatal. Proper crossings receive a visible bridge and background mask.\n- Layout output and reports are deterministic for the same input.\n\n## Output\n\n- SVG is the canonical artifact and carries `data-graph-role`, style, diagram-type, semantic-profile, semantic-role, edge-kind, topic, flow, station-order, status, critical-hop, and trace-timing metadata.\n- PNG export uses CairoSVG or `rsvg-convert` in the shell workflow.\n- Optional motion export has one media contract: a generated semantic SVG carrying one of the 12 approved role/stage/order scene contracts becomes a validated GIF plus its JSON verification report. Exact source bytes are not pinned, but unsupported same-style topologies fail closed. The user-approved 5.75s/115-frame default keeps construction at 1–36, live fade at 36–38, full settled flow at 38–109, and reset at 110–114. Styles 1–12 and the shared `+2s-settled-flow` timing revision retain `user-approved` status. Timelines through 75 frames remain all-unique. Longer timelines require at least 75 unique rasters and zero adjacent duplicates. Repeats stay inside the full-opacity interval except frame 110, the sole `intentional_reset_boundary_repeat` allowed by its unchanged 1.00 reset opacity; frames 111–114 remain globally distinct. The 75-vs-115 compatibility report separates binary-exact, decoded-RGBA-exact, and guarded antialias-equivalent counts. The guarded tier requires AE ≤ 128, normalized RMSE ≤ 0.001, components no thicker than 2px, and edge/node-border-only scope while DOM and signature geometry remain strict-exact. Direction/source-DOM guards, FFprobe validation, infinite looping, and atomic GIF/report installation remain mandatory.\n- The single-SVG offline HTML viewer remains independent of motion and supports pan, zoom, reset, themes, copy, and static SVG/PNG/JPEG/WebP export.\n- Interactive export rejects active elements, event handlers, external references, `foreignObject`, and external CSS.\n\n## Distribution\n\n- Git clone and npm archives contain the complete skill.\n- The committed `skills/fireworks-tech-graph/` mirror supports deterministic `npx skills add` subpath installation for Codex and Claude Code.\n- npm `.tgz` and GitHub release `.zip` are built from the same payload and checked by file hash.\n","skills/fireworks-tech-graph/docs/ROADMAP.md":"# Roadmap\n\n## Shipped in 1.1\n\n- Versioned diagram IR and schemas\n- Geometry-safe renderer and artifact audit\n- Deterministic layout reports\n- Complete Agent Skill installer mirror\n- Unified CLI and offline interactive export\n- CI, release archives, parity checks, and public install canary\n\n## Next candidates\n\n- Incremental layout for diagrams above 100 edges\n- Pluggable text metrics using browser font measurement\n- Interactive edge/node inspection panels\n- Optional theme token packs without changing diagram semantics\n- Visual-diff baselines for browser engines and platform fonts\n\nRoadmap items remain proposals until they have tests, a compatibility plan, and a measured maintenance cost.\n","skills/fireworks-tech-graph/docs/releases/README.md":"# Release history\n\nThis directory is the source of truth for the curated GitHub Release notes. Version dates describe when each version originally became available, not when a historical GitHub Release page was backfilled.\n\n| Version | Version date | Tag commit | npm `gitHead` | Distribution record | Notes |\n| --- | --- | --- | --- | --- | --- |\n| [`v1.2.0`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.2.0) | 2026-07-17 | [`ea534c2d`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/ea534c2d2817d43e4c02fe0ea9f67dfced6dece3) | — | Latest GitHub release | [Release notes](v1.2.0.md) |\n| [`v1.1.0`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.1.0) | 2026-07-15 | [`1c7ba0fe`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/1c7ba0fe69ef5b166821eefb6fe447a0e5d70be9) | — | GitHub release | [Release notes](v1.1.0.md) |\n| [`v1.0.5`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.5) | 2026-07-11 | [`14be3ad3`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/14be3ad3b05389a5d603562c207eb37157637127) | — | Repository version; not published to npm | [Release notes](v1.0.5.md) |\n| [`v1.0.4`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.4) | 2026-04-12 | [`c8668407`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c8668407ebfa72e00719be8f4312b71ab90c3c3e) | [`c3726124`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c37261248ca674d5d94e24d9d7d85e50a88c77d1) | [npm `1.0.4`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.4) | [Release notes](v1.0.4.md) |\n| [`v1.0.3`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.3) | 2026-04-12 | [`c3726124`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c37261248ca674d5d94e24d9d7d85e50a88c77d1) | [`921fb308`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/921fb30855cd76e03e1b96ff3463028ddcd36deb) | [npm `1.0.3`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.3) | [Release notes](v1.0.3.md) |\n| [`v1.0.2`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.2) | 2026-04-12 | [`921fb308`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/921fb30855cd76e03e1b96ff3463028ddcd36deb) | [`fee15924`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/fee15924e5d9a273d270067dce6380f27de3d033) | [npm `1.0.2`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.2) | [Release notes](v1.0.2.md) |\n| [`v1.0.1`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.1) | 2026-04-12 | [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819) | [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819) | [npm `1.0.1`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.1) | [Release notes](v1.0.1.md) |\n| [`v1.0.0`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.0) | 2026-04-12 | [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819) | [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819) | [npm `1.0.0`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.0) | [Release notes](v1.0.0.md) |\n\n## Historical provenance\n\nGitHub Release pages for `v1.0.0` through `v1.0.5` were backfilled on 2026-07-17. The npm packages were sometimes published from a working tree immediately before its matching commit: npm `1.0.2`, `1.0.3`, and `1.0.4` retain the preceding `gitHead`, while their complete published file sets match the subsequent commits shown in the Tag commit column. No fully committed tree reproduces every packaging change in npm `1.0.0` or `1.0.1`; those tags use the registry source anchor, and their notes state the limitation.\n","skills/fireworks-tech-graph/docs/releases/v1.0.0.md":"# Fireworks Tech Graph v1.0.0\n\nThe first public npm release established Fireworks Tech Graph as a reusable Agent Skill for generating polished technical diagrams from natural-language requirements.\n\n## Version information\n\n- Version: `v1.0.0` / npm `1.0.0`\n- Version date: 2026-04-12; npm published at `2026-04-12T00:09:17.387Z`\n- Tag commit: [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819)\n- npm registry `gitHead`: [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819)\n- Previous version: initial public release\n- Runtime metadata: Node.js 14 or newer\n- Distribution: [npm package `1.0.0`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.0)\n\n## Highlights\n\n- Shipped seven built-in visual styles for architecture, flow, UML, ER, sequence, and related technical diagrams.\n- Included SVG generation, high-resolution PNG export through `rsvg-convert`, validation scripts, and bilingual documentation.\n- Included style references and the first seven-style showcase.\n\n## Provenance\n\nThis GitHub Release was backfilled on 2026-07-17. Of the 26 files in the published npm tarball, all 25 Git-backed files match the registry-recorded `gitHead` byte-for-byte; `package.json` was publication metadata that had not yet been committed. The tag is therefore the closest source provenance anchor, but GitHub's generated source archive is not byte-identical to the npm artifact.\n","skills/fireworks-tech-graph/docs/releases/v1.0.1.md":"# Fireworks Tech Graph v1.0.1\n\nThis patch release tightened the diagram-quality prompt contract and corrected npm repository metadata.\n\n## Version information\n\n- Version: `v1.0.1` / npm `1.0.1`\n- Version date: 2026-04-12; npm published at `2026-04-12T00:12:37.149Z`\n- Tag commit: [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819)\n- npm registry `gitHead`: [`27f41d98`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/27f41d98883113affbb28a2ebfff4b566e3cc819)\n- Previous version: [`v1.0.0`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.0)\n- Runtime metadata: Node.js 14 or newer\n- Distribution: [npm package `1.0.1`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.1)\n\n## Highlights\n\n- Added an explicit validation checklist for connector-node collisions and orthogonal rerouting.\n- Added text-overflow, endpoint-alignment, and connector-label background checks.\n- Normalized the npm repository URL metadata.\n\n## Provenance\n\nThe npm registry records the same `gitHead` for `1.0.0` and `1.0.1`. The published tarball contains two working-tree-only changes relative to that commit: `package.json` and an expanded `SKILL.md` layout-validation checklist; the other 24 files match byte-for-byte. No historical commit exactly reproduces this npm artifact, so the backfilled tag records the registry provenance anchor.\n","skills/fireworks-tech-graph/docs/releases/v1.0.2.md":"# Fireworks Tech Graph v1.0.2\n\nThis release introduced the style-driven generator and a reproducible fixture-and-template workflow for the original seven styles.\n\n## Version information\n\n- Version: `v1.0.2` / npm `1.0.2`\n- Version date: 2026-04-12; npm published at `2026-04-12T13:24:35.073Z`\n- Tag commit: [`921fb308`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/921fb30855cd76e03e1b96ff3463028ddcd36deb), whose complete file set matches the npm tarball\n- npm registry `gitHead`: [`fee15924`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/fee15924e5d9a273d270067dce6380f27de3d033)\n- Previous version: [`v1.0.1`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.1)\n- Runtime metadata: Node.js 14 or newer\n- Distribution: [npm package `1.0.2`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.2)\n\n## Highlights\n\n- Added a Python style-driven generator, seven scenario fixtures, and ten reusable SVG diagram templates.\n- Added formal npm package metadata for repository, license, files, runtime, and discovery keywords.\n- Expanded the package payload to include `fixtures/` and `templates/`.\n- Refreshed all seven showcase renders and strengthened SVG validation and all-style test scripts.\n- Added a style-to-diagram selection matrix for more reliable prompting.\n\n## Provenance\n\nThis GitHub Release was backfilled on 2026-07-17. Every one of the 44 files in the published npm tarball matches commit `921fb308` byte-for-byte. The registry records the preceding `gitHead` because publication occurred about 34 seconds before the packaging commit was created; the historical tag therefore uses the content-matching commit.\n","skills/fireworks-tech-graph/docs/releases/v1.0.3.md":"# Fireworks Tech Graph v1.0.3\n\nThis patch release made the installation source explicit and separated the Agent Skill installer path from the npm distribution page.\n\n## Version information\n\n- Version: `v1.0.3` / npm `1.0.3`\n- Version date: 2026-04-12; npm published at `2026-04-12T13:28:10.195Z`\n- Tag commit: [`c3726124`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c37261248ca674d5d94e24d9d7d85e50a88c77d1), whose versioned content matches the npm tarball\n- npm registry `gitHead`: [`921fb308`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/921fb30855cd76e03e1b96ff3463028ddcd36deb)\n- Previous version: [`v1.0.2`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.2)\n- Runtime metadata: Node.js 14 or newer\n- Distribution: [npm package `1.0.3`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.3)\n\n## Highlights\n\n- Standardized installation on `npx skills add yizhiyanhua-ai/fireworks-tech-graph`.\n- Clarified that `skills add` resolves the GitHub repository while npm provides package distribution and README discovery.\n\n## Provenance\n\nThis GitHub Release was backfilled on 2026-07-17. npm `1.0.3` was published 13 seconds before the matching repository commit, so the registry retained the preceding `gitHead`. The historical tag uses the subsequent commit because its README, Chinese README, Skill instructions, and `package.json` match the published versioned content.\n","skills/fireworks-tech-graph/docs/releases/v1.0.4.md":"# Fireworks Tech Graph v1.0.4\n\nThis patch release documented a deterministic update path for existing Skill installations.\n\n## Version information\n\n- Version: `v1.0.4` / npm `1.0.4`\n- Version date: 2026-04-12; npm published at `2026-04-12T13:32:37.231Z`\n- Tag commit: [`c8668407`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c8668407ebfa72e00719be8f4312b71ab90c3c3e), whose versioned content matches the npm tarball\n- npm registry `gitHead`: [`c3726124`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/c37261248ca674d5d94e24d9d7d85e50a88c77d1)\n- Previous version: [`v1.0.3`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.3)\n- Runtime metadata: Node.js 14 or newer\n- Distribution: [npm package `1.0.4`](https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph/v/1.0.4); this remains the npm registry's `latest` version for the legacy package line\n\n## Highlights\n\n- Added `npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y` as the documented update command.\n- Synchronized the update workflow across the English README, Chinese README, and Skill instructions.\n\n## Provenance\n\nThis GitHub Release was backfilled on 2026-07-17. npm `1.0.4` was published 11 seconds before the matching repository commit, so the registry retained the preceding `gitHead`. The historical tag uses the subsequent commit because its README, Chinese README, Skill instructions, and `package.json` match the published versioned content.\n","skills/fireworks-tech-graph/docs/releases/v1.0.5.md":"# Fireworks Tech Graph v1.0.5\n\nThis repository release consolidated three months of diagram-quality work and made the Skill directly usable by both Codex and Claude Code.\n\n## Version information\n\n- Version: `v1.0.5`\n- Version date: 2026-07-11\n- Tag commit: [`14be3ad3`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/14be3ad3b05389a5d603562c207eb37157637127), the mainline merge of version commit [`55916c55`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/55916c552300a7475b8f8a57cc62c53e2034b016); both have the same tree\n- Previous version: [`v1.0.4`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.4)\n- Runtime metadata: Node.js 14 or newer\n- Distribution: repository version only; npm publishing stopped at `1.0.4`\n\n## Highlights\n\n- Added shared Codex and Claude Code metadata, instructions, compatibility tests, and installation paths.\n- Added Style 8 Dark Luxury while preserving the seven original style contracts.\n- Added a bounded generate-validate-repair loop, structural SVG checks, and optional visual self-review.\n- Improved connector routing, label placement, overlap prevention, filter and viewport clipping guidance, and CJK font fallbacks.\n- Switched the default PNG renderer to CairoSVG, hardened helper scripts, and documented renderer edge cases.\n- Added the first GitHub Pages product showcase.\n\n## Provenance\n\nThis GitHub Release was backfilled on 2026-07-17. Unlike npm versions `1.0.0` through `1.0.4`, the `v1.0.5` tag points to a committed mainline tree whose `package.json` declares `1.0.5`; no npm `1.0.5` package was published.\n","skills/fireworks-tech-graph/docs/releases/v1.1.0.md":"# Fireworks Tech Graph v1.1.0\n\nThis release turns the project into an engineering-grade diagram system while preserving the distinct scenarios and visual identity of all 12 styles.\n\n## Version information\n\n- Version: `v1.1.0`\n- Version date: 2026-07-15\n- Tag commit: [`1c7ba0fe`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/1c7ba0fe69ef5b166821eefb6fe447a0e5d70be9)\n- Previous version: [`v1.0.5`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.0.5)\n- Release channel: GitHub stable release; the npm registry remains on the legacy `1.0.4` package line.\n\n## Highlights\n\n- Adds Style 9 C4 Review Canvas, Style 10 Cloud Fabric, Style 11 Event Transit, and Style 12 Ops Pulse.\n- Enforces semantic contracts for C4 abstraction, deployment ownership, event rails, Golden Signals, observation windows, critical paths, and correlated traces.\n- Adds geometry-safe orthogonal routing, port fan-out, waypoint validation, label and reserved-region checks, bridge masks, and fail-closed composition gates.\n- Adds a unified CLI, versioned Diagram IR, deterministic layout reports, and safe offline interactive HTML export.\n- Refreshes the official gallery with 12 distinct engineering scenarios and fixed-width 1920px regression renders.\n- Ships a complete nested Agent Skill payload for Codex and Claude Code, plus reproducible tgz/zip archives and `SHA256SUMS`.\n\n## Compatibility\n\n- Node.js 18 or newer is required.\n- Python source compatibility is checked against Python 3.9 grammar; CI runs the test suite on Python 3.9 and 3.12.\n- The npm registry is a separate distribution channel and may lag this GitHub Release. Install the current Skill from `yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph`.\n\nSee the [v1.1.0 changelog](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/blob/v1.1.0/CHANGELOG.md) for the full change list and the release assets below for checksum-verified archives.\n","skills/fireworks-tech-graph/docs/releases/v1.2.0.md":"# Fireworks Tech Graph v1.2.0\n\nThis release adds a focused, production-validated SVG-to-GIF workflow while preserving the twelve distinct diagram styles and their engineering scenarios.\n\n## Version information\n\n- Version: `v1.2.0`\n- Version date: 2026-07-17\n- Tag commit: [`ea534c2d`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/commit/ea534c2d2817d43e4c02fe0ea9f67dfced6dece3)\n- Previous version: [`v1.1.0`](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/releases/tag/v1.1.0)\n- Release channel: latest GitHub stable release; the npm registry remains on the legacy `1.0.4` package line.\n\n## Highlights\n\n- Adds user-approved semantic motion contracts for all 12 styles: connectors start absent, build in semantic order, then keep the completed topology alive with style-specific data flow.\n- Makes the 5.75-second / 115-frame settled-flow timeline the default for natural-language GIF requests, while retaining explicit 3.75-second and 2.75-second compatibility timelines.\n- Replaces every README showcase image with an approved GIF, including a synchronized 3×4 overview optimized below 2 MiB. Static 1920px PNGs remain available as regression baselines.\n- Refreshes the GitHub Pages product site with the animated overview and all twelve per-style GIFs, while retaining static Open Graph media and reduced-motion fallbacks.\n- Adds source-DOM immutability guards, bounded runtime probes, secure Puppeteer resolution, atomic GIF/report installation, FFprobe media checks, binary infinite-loop readback, and motion reports.\n- Validates all 12 installed Skill styles in CI and before tag releases, including 852 Chromium compatibility comparisons across the extended timeline.\n- Keeps motion reusable for valid title and content changes: the semantic topology, route roles, directions, stages, geometry, and style signature are pinned; the exact source SVG bytes are not.\n- Includes the post-v1.1.0 SVG validator fixes for multi-subpath geometry and transformed bounds.\n\n## Compatibility\n\n- Python 3.9 or newer is required.\n- Node.js 18 or newer is required for the optional Chromium motion renderer.\n- GIF generation requires FFmpeg and `puppeteer-core@25.3.0`; static SVG/PNG/HTML workflows continue to work without them.\n- The npm registry is a separate distribution channel and may lag the GitHub Release. Install the current Skill from `yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph`.\n\nSee the [v1.2.0 changelog](https://github.com/yizhiyanhua-ai/fireworks-tech-graph/blob/v1.2.0/CHANGELOG.md) for the full change list and the release assets below for checksum-verified archives.\n","skills/fireworks-tech-graph/examples/README.md":"# Interactive example\n\nOpen `interactive-architecture.html` directly in a browser. It is a single offline file generated from `fixtures/api-flow-style7.json` and contains no remote runtime dependencies.\n\nRegenerate it with:\n\n```bash\ntmp_dir=\"$(mktemp -d)\"\ntrap 'rm -rf \"$tmp_dir\"' EXIT\ntmp_svg=\"$tmp_dir/api-flow.svg\"\npython3 scripts/fireworks.py render architecture fixtures/api-flow-style7.json \"$tmp_svg\"\npython3 scripts/fireworks.py export-html \"$tmp_svg\" examples/interactive-architecture.html --title \"API Integration Flow\" --slug api-integration-flow\n```\n","skills/fireworks-tech-graph/package.json":"{\n \"name\": \"@yizhiyanhua-ai/fireworks-tech-graph\",\n \"version\": \"1.2.0\",\n \"description\": \"Agent Skill and CLI for geometry-safe technical diagrams, focused SVG-to-GIF motion, and offline HTML.\",\n \"keywords\": [\n \"claude-code\",\n \"codex\",\n \"openai-codex\",\n \"agent-skills\",\n \"skill\",\n \"diagram\",\n \"svg\",\n \"architecture\",\n \"flowchart\",\n \"uml\",\n \"sequence-diagram\",\n \"er-diagram\",\n \"visualization\",\n \"animation\",\n \"gif\"\n ],\n \"author\": \"yizhiyanhua-ai\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/yizhiyanhua-ai/fireworks-tech-graph/issues\"\n },\n \"homepage\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/\",\n \"bin\": {\n \"fireworks-tech-graph\": \"scripts/fireworks.py\"\n },\n \"scripts\": {\n \"test\": \"python3 -m unittest discover -s tests -v\",\n \"check\": \"python3 tools/check_project_consistency.py && python3 tools/distribution.py --check\",\n \"examples\": \"python3 scripts/fireworks.py examples\"\n },\n \"files\": [\n \"SKILL.md\",\n \"README.md\",\n \"README.zh.md\",\n \"LICENSE\",\n \"CHANGELOG.md\",\n \"CONTRIBUTING.md\",\n \"SECURITY.md\",\n \"agents/\",\n \"docs/\",\n \"examples/\",\n \"references/\",\n \"schemas/\",\n \"scripts/\",\n \"tests/\",\n \"fixtures/\",\n \"templates/\",\n \"assets/\",\n \"!**/__pycache__/**\",\n \"!**/*.pyc\"\n ],\n \"engines\": {\n \"node\": \">=22.12.0\"\n }\n}\n","skills/fireworks-tech-graph/references/composition-quality-contract.md":"# Composition Quality Contract\n\nThis contract applies to every visual style. Style references control color,\ntypography, material, corner radius, and decorative treatment. They never\nweaken geometry or composition quality.\n\n## Official showcase profile\n\nUse `\"quality_profile\": \"showcase\"` for official samples and polished delivery\nartifacts. The renderer and validator enforce all of these budgets:\n\n| Metric | Showcase limit |\n|---|---:|\n| Edge crossings | 0 |\n| Bridge jumps | 0 |\n| Bends on one edge | 2 maximum |\n| Bends in the six-node reference topology | 8 maximum |\n| Route length / direct Manhattan length | 1.35 maximum |\n| Shortest route segment | 16px minimum |\n| Node-to-node whitespace | 40px minimum |\n| Node-to-container gutter | 20px minimum |\n| Edge-label clearance from unrelated geometry | 4px minimum |\n\nThe six-node reference topology currently scores 100 with four total bends,\nzero crossings, zero bridges, a route-stretch maximum of 1.0, 50px minimum\nnode spacing, and 20px minimum container gutter.\n\n## Layout grammar\n\n1. Establish containers, their header reservations, and node rows before any\n edge is routed.\n2. Keep nodes in a row aligned to the same y coordinate and use consistent\n heights for equivalent semantic roles.\n3. Reserve one empty inter-container corridor for cross-layer routes. A route\n may cross a container boundary only through an open gap and must not run on\n top of the border.\n4. Route the primary horizontal flow first. Route cross-layer context and\n feedback paths through separate, non-overlapping corridor segments.\n5. Use distinct node ports when several edges share a side. Never stack\n multiple arrowheads on one coordinate.\n6. Prefer a monotone orthogonal route. If a connection needs more than two\n bends, change the node placement before adding waypoints.\n7. Treat every external title, subtitle, tag, side label, edge label, legend,\n footer, and title block as an obstacle with measurable bounds.\n8. Keep legends outside business-flow corridors. Use a single horizontal row\n when the canvas has enough width.\n9. Fit long single-line node titles to the card width. Do not let text touch or\n cross the node border.\n10. If the topology cannot meet the showcase limits, simplify the composition,\n split it into focused diagrams, or explicitly use the standard profile for\n a non-showcase engineering stress artifact.\n\n## Style identity boundary\n\nStyles may vary these properties freely within their own reference:\n\n- background, palette, semantic accent colors;\n- font family, title alignment, and typographic hierarchy;\n- card fill, border treatment, shadow, glow, and corner radius;\n- blueprint title blocks, terminal chrome, or restrained brand details.\n\nStyles must share these structural properties for a direct comparison:\n\n- topology and edge direction;\n- row/column alignment;\n- port assignment and corridor positions;\n- crossing, bridge, bend, stretch, spacing, and gutter budgets;\n- semantic SVG roles required by the validator.\n\nVisual effects never create a second business connector. Pencil echoes, rail\ncasings, critical-path glow, and similar layers use\n`data-graph-role=\"decoration\"` with `data-owner`; exactly one ordinary\n`data-graph-role=\"edge\"` carries the source, target, route, and arrowhead.\n\n## Validation\n\nRun both gates before delivery:\n\n```bash\npython3 scripts/validate_svg.py diagram.svg --check geometry\npython3 scripts/validate_svg.py diagram.svg --check composition\n```\n\n`scripts/validate-svg.sh` runs both automatically. A successful render without\nthese gates is still a draft.\n\nDense legacy diagrams live under `fixtures/stress/`. They preserve routing\npressure cases and are not visual quality references. The public 12-style\nshowcase keeps a distinct engineering scene for every style. The internal\n`fixtures/quality-baseline/` set applies one shared Agent Runtime Architecture\ntopology to all 11 generator-backed styles; Style 8 remains the static,\nAI-authored exception.\n\n## Text and raster evidence\n\nApply [visual-quality.md](visual-quality.md) after geometry passes. Use `text_policy: \"strict\"` when labels must remain visible in full, inspect `typography` and `palette` in the layout report, and verify the raster at its intended reading size.\n","skills/fireworks-tech-graph/references/diagram-layout-reference.md":"# Diagram layout and SVG authoring reference\n\nLoad only the relevant diagram type or shape section. User and selected style preferences take precedence over examples.\n\n## Diagram Types & Layout Rules\n\n### Architecture Diagram\nNodes = services/components. Group into **horizontal layers** (top→bottom or left→right).\n- Typical layers: Client → Gateway/LB → Services → Data/Storage\n- Use `` dashed containers to group related services in the same layer\n- Arrow direction follows data/request flow\n- ViewBox: `0 0 960 600` standard, `0 0 960 800` for tall stacks\n\n### Data Flow Diagram\nEmphasizes **what data moves where**. Focus on data transformation.\n- Label every arrow with the data type (e.g., \"embeddings\", \"query\", \"context\")\n- Use wider arrows (`stroke-width: 2.5`) for primary data paths\n- Dashed arrows for control/trigger flows\n- Color arrows by data category (not just Agent/RAG — use semantics)\n\n### Flowchart / Process Flow\nSequential decision/process steps.\n- Top-to-bottom preferred; left-to-right for wide flows\n- Diamond shapes for decisions, rounded rects for processes, parallelograms for I/O\n- Keep node labels short (≤3 words); put detail in sub-labels\n- Align nodes on a grid: x positions snap to 120px intervals, y to 80px\n\n### Agent Architecture Diagram\nShows how an AI agent reasons, uses tools, and manages memory.\nKey conceptual layers to always consider:\n- **Input layer**: User, query, trigger\n- **Agent core**: LLM, reasoning loop, planner\n- **Memory layer**: Short-term (context window), Long-term (vector/graph DB), Episodic\n- **Tool layer**: Tool calls, APIs, search, code execution\n- **Output layer**: Response, action, side-effects\nUse cyclic arrows (loop arcs) to show iterative reasoning. Separate memory types visually.\n\n### Memory Architecture Diagram (Mem0, MemGPT-style)\nSpecialized agent diagram focused on memory operations.\n- Show memory **write path** and **read path** separately (different arrow colors)\n- Memory tiers: Working Memory → Short-term → Long-term → External Store\n- Label memory operations: `store()`, `retrieve()`, `forget()`, `consolidate()`\n- Use stacked rects or layered cylinders for storage tiers\n\n### Sequence Diagram\nTime-ordered message exchanges between participants.\n- Participants as vertical **lifelines** (top labels + vertical dashed lines)\n- Messages as horizontal arrows between lifelines, top-to-bottom time order\n- Activation boxes (thin filled rects on lifeline) show active processing\n- Group with `` loop/alt frames with label in top-left corner\n- ViewBox height = 80 + (num_messages × 50)\n\n### Comparison / Feature Matrix\nSide-by-side comparison of approaches, systems, or components.\n- Column headers = systems, row headers = attributes\n- Row height: 40px; column width: min 120px; header row height: 50px\n- Checked cell: tinted background (e.g. `#dcfce7`) + `✓` checkmark; unsupported: `#f9fafb` fill\n- Alternating row fills (`#f9fafb` / `#ffffff`) for readability\n- Max readable columns: 5; beyond that, split into two diagrams\n\n### Timeline / Gantt\nHorizontal time axis showing durations, phases, and milestones.\n- X-axis = time (weeks/months/quarters); Y-axis = items/tasks/phases\n- Bars: rounded rects, colored by category, labeled inside or beside\n- Milestone markers: diamond or filled circle at specific x position with label above\n- ViewBox: `0 0 960 400` typical; wider for many time periods: `0 0 1200 400`\n\n### Mind Map / Concept Map\nRadial layout from central concept.\n- Central node at `cx=480, cy=280`\n- First-level branches: evenly distributed around center (360/N degrees)\n- Second-level branches: branch off first-level at 30-45° offset\n- Use curved `` with cubic bezier for branches, not straight lines\n\n### Class Diagram (UML)\nStatic structure showing classes, attributes, methods, and relationships.\n- **Class box**: 3-compartment rect (name / attributes / methods), min width 160px\n - Top compartment: class name, bold, centered (abstract = *italic*)\n - Middle: attributes with visibility (`+` public, `-` private, `#` protected)\n - Bottom: method signatures, same visibility notation\n- **Relationships**:\n - Inheritance (extends): solid line + hollow triangle arrowhead, child → parent\n - Implementation (interface): dashed line + hollow triangle, class → interface\n - Association: solid line + open arrowhead, label with multiplicity (1, 0..*, 1..*)\n - Aggregation: solid line + hollow diamond on container side\n - Composition: solid line + filled diamond on container side\n - Dependency: dashed line + open arrowhead\n- **Interface**: `<>` stereotype above name, or circle/lollipop notation\n- **Enum**: compartment rect with `<>` stereotype, values in bottom\n- Layout: parent classes top, children below; interfaces to the left/right of implementors\n- ViewBox: `0 0 960 600` standard; `0 0 960 800` for deep hierarchies\n\n### Use Case Diagram (UML)\nSystem functionality from user perspective.\n- **Actor**: stick figure (circle head + body line) placed outside system boundary\n - Label below figure, 13-14px\n - Primary actors on left, secondary/supporting on right\n- **Use case**: ellipse with label centered inside, min 140×60px\n - Keep names verb phrases: \"Create Order\", \"Process Payment\"\n- **System boundary**: large rect with dashed border + system name in top-left\n- **Relationships**:\n - Include: dashed arrow `<>` from base to included use case\n - Extend: dashed arrow `<>` from extension to base use case\n - Generalization: solid line + hollow triangle (specialized → general)\n- Layout: system boundary centered, actors outside, use cases inside\n- ViewBox: `0 0 960 600` standard\n\n### State Machine Diagram (UML)\nLifecycle states and transitions of an entity.\n- **State**: rounded rect with state name, min 120×50px\n - Internal activities: small text `entry/ action`, `exit/ action`, `do/ activity`\n - **Initial state**: filled black circle (r=8), one outgoing arrow\n - **Final state**: filled circle (r=8) inside hollow circle (r=12)\n - **Choice**: small hollow diamond, guard labels on outgoing arrows `[condition]`\n- **Transition**: arrow with optional label `event [guard] / action`\n - Guard conditions in square brackets\n - Actions after `/`\n- **Composite/nested state**: larger rect containing sub-states, with name tab\n- **Fork/join**: thick horizontal or vertical black bar (synchronization)\n- Layout: initial state top-left, final state bottom-right, flow top-to-bottom\n- ViewBox: `0 0 960 600` standard\n\n### ER Diagram (Entity-Relationship)\nDatabase schema and data relationships.\n- **Entity**: rect with entity name in header (bold), attributes below\n - Primary key attribute: underlined\n - Foreign key: italic or marked with (FK)\n - Min width: 160px; attribute font-size: 12px\n- **Relationship**: diamond shape on connecting line\n - Label inside diamond: \"has\", \"belongs to\", \"enrolls in\"\n - Cardinality labels near entity: `1`, `N`, `0..1`, `0..*`, `1..*`\n- **Weak entity**: double-bordered rect with double diamond relationship\n- **Associative entity**: diamond + rect hybrid (rect with diamond inside)\n- Line style: solid for identifying relationships, dashed for non-identifying\n- Layout: entities in 2-3 rows, relationships between related entities\n- ViewBox: `0 0 960 600` standard; wider `0 0 1200 600` for many entities\n\n### Network Topology\nPhysical or logical network infrastructure.\n- **Devices**: icon-like rects or rounded rects\n - Router: circle with cross arrows\n - Switch: rect with arrow grid\n - Server: stacked rect (rack icon)\n - Firewall: brick-pattern rect or shield shape\n - Load Balancer: horizontal split rect with arrows\n - Cloud: cloud path (overlapping arcs)\n- **Connections**: lines between device centers\n - Ethernet/wired: solid line, label bandwidth\n - Wireless: dashed line with WiFi symbol\n - VPN: dashed line with lock icon\n- **Subnets/Zones**: dashed rect containers with zone label (DMZ, Internal, External)\n- **Labels**: device hostname + IP below, 12-13px\n- Layout: tiered top-to-bottom (Internet → Edge → Core → Access → Endpoints)\n- ViewBox: `0 0 960 600` standard\n\n## UML Coverage Map\n\nFull mapping of UML 14 diagram types to supported diagram types:\n\n| UML Diagram | Supported As | Notes |\n|-------------|-------------|-------|\n| Class | Class Diagram | Full UML notation |\n| Component | Architecture Diagram | Use colored fills per component type |\n| Deployment | Architecture Diagram | Add node/instance labels |\n| Package | Architecture Diagram | Use dashed grouping containers |\n| Composite Structure | Architecture Diagram | Nested rects within components |\n| Object | Class Diagram | Instance boxes with underlined name |\n| Use Case | Use Case Diagram | Full actor/ellipse/relationship |\n| Activity | Flowchart / Process Flow | Add fork/join bars |\n| State Machine | State Machine Diagram | Full UML notation |\n| Sequence | Sequence Diagram | Add alt/opt/loop frames |\n| Communication | — | Approximate with Sequence (swap axes) |\n| Timing | Timeline | Adapt time axis |\n| Interaction Overview | Flowchart | Combine activity + sequence fragments |\n| ER Diagram | ER Diagram | Chen/Crow's foot notation |\n\n## Shape Vocabulary\n\nMap semantic concepts to consistent shapes across all diagram types:\n\n| Concept | Shape | Notes |\n|---------|-------|-------|\n| User / Human | Circle + body path | Stick figure or avatar |\n| LLM / Model | Rounded rect with brain/spark icon or gradient fill | Use accent color |\n| Agent / Orchestrator | Hexagon or rounded rect with double border | Signals \"active controller\" |\n| Memory (short-term) | Rounded rect, dashed border | Ephemeral = dashed |\n| Memory (long-term) | Cylinder (database shape) | Persistent = solid cylinder |\n| Vector Store | Cylinder with grid lines inside | Add 3 horizontal lines |\n| Graph DB | Circle cluster (3 overlapping circles) | |\n| Tool / Function | Gear-like rect or rect with wrench icon | |\n| API / Gateway | Hexagon (single border) | |\n| Queue / Stream | Horizontal tube (pipe shape) | |\n| File / Document | Folded-corner rect | |\n| Browser / UI | Rect with 3-dot titlebar | |\n| Decision | Diamond | Flowcharts only |\n| Process / Step | Rounded rect | Standard box |\n| External Service | Rect with cloud icon or dashed border | |\n| Data / Artifact | Parallelogram | I/O in flowcharts |\n\n## Arrow Semantics\n\nAlways assign arrow meaning, not just color. The values below are defaults; the selected style reference overrides colors and stroke weights while preserving flow semantics:\n\n| Flow Type | Color | Stroke | Dash | Meaning |\n|-----------|-------|--------|------|---------|\n| Primary data flow | blue `#2563eb` | 2px solid | none | Main request/response path |\n| Control / trigger | orange `#ea580c` | 1.5px solid | none | One system triggering another |\n| Memory read | green `#059669` | 1.5px solid | none | Retrieval from store |\n| Memory write | green `#059669` | 1.5px | `5,3` | Write/store operation |\n| Async / event | gray `#6b7280` | 1.5px | `4,2` | Non-blocking, event-driven |\n| Embedding / transform | purple `#7c3aed` | 1px solid | none | Data transformation |\n| Feedback / loop | purple `#7c3aed` | 1.5px curved | none | Iterative reasoning loop |\n\nAlways include a **legend** when 2+ arrow types are used.\n\n## Layout Rules & Validation\n\n**Spacing**:\n- Same-layer nodes: 80px horizontal, 120px vertical between layers\n- Canvas margins: 40px minimum, 60px between node edges\n- Snap to 8px grid: horizontal 120px intervals, vertical 120px intervals\n\n**Arrow Labels** (CRITICAL):\n- **Offset-first** (default): place label 6-8px above horizontal arrows, or 8px left/right of vertical arrows — do not overlap the arrow line\n- **Background fallback**: add `` only when the offset label still crosses another visual element (another arrow, a node edge, etc.)\n- Place mid-arrow, ≤3 words, stagger by 15-20px when multiple arrows converge\n- Maintain 10px safety distance from nodes\n\n**Arrow Routing**:\n- Prefer orthogonal (L-shaped) paths to minimize crossings\n- Anchor arrows on component edges, not geometric centers\n- Route around dense node clusters, use different y-offsets for parallel arrows\n- Jump-over arcs (5px radius) for unavoidable crossings\n- Compress equivalent bidirectional traffic only when both directions share the same semantics and styling: use one corridor with `marker-start` + `marker-end`, or two visibly offset paths in that corridor\n- Keep read/write, request/response, sync/async, or differently labeled directions as separate arrows; remove redundant bends and duplicate rails without erasing direction or meaning\n\n**Post-Generation Arrow Optimization**:\n\nWhen a user asks to \"优化箭头\" / \"fix arrow routing\" / \"optimize the diagram\" on an already-generated diagram, preserve all nodes, containers, styles, and layout — only modify the `arrows` entries in the JSON data, then re-render with `generate-from-template.py`.\n\nAvailable arrow override fields (in recommended order of use):\n\n| Field | Type | When to Use |\n|-------|------|-------------|\n| `source_port` / `target_port` | `\"left\"` / `\"right\"` / `\"top\"` / `\"bottom\"` | Arrow exits/enters from the wrong edge |\n| `corridor_x` | `[x, ...]` | Hint vertical segments toward this x lane (soft preference) |\n| `corridor_y` | `[y, ...]` | Hint horizontal segments toward this y lane (soft preference) |\n| `route_points` | `[[x1,y1], [x2,y2], ...]` | Exact ordered waypoints; each leg is routed orthogonally and unsafe points are rejected |\n| `routing_padding` | number (default: 24) | *(Advanced)* Adjust obstacle clearance for this arrow |\n| `port_clearance` | number | *(Advanced)* Adjust first-segment offset from node edge |\n| `label_style` | `\"badge\"` / `\"offset\"` | Choose `\"offset\"` when badge backgrounds create visual clutter; keep `\"badge\"` (default) for legacy/high-contrast labels |\n\nFor JSON/template rendering, the default remains `\"badge\"` for backward compatibility. Set `\"label_style\": \"offset\"` on individual arrows when you want offset-first labels without background rects.\n\nOptimization steps:\n1. Read the existing SVG — identify which arrows overlap, cross nodes, or look misaligned\n2. Find those arrows in the JSON data by `source` / `target` pair\n3. Add `source_port` / `target_port` if the exit/entry direction is wrong; add `corridor_x` / `corridor_y` to space parallel arrows apart; use `route_points` only when hints alone cannot resolve the path\n4. Re-run `generate-from-template.py` with the updated JSON and validate with `validate-svg.sh`\n\nExample — spacing two overlapping arrows into separate corridors:\n```json\n{ \"source\": \"nodeA\", \"target\": \"nodeB\", \"corridor_y\": [280] }\n{ \"source\": \"nodeC\", \"target\": \"nodeD\", \"corridor_y\": [320] }\n```\n\n**Line Overlap Prevention** (CRITICAL - common in AI-generated diagrams):\nWhen two arrows must cross each other, ALWAYS use jump-over arcs to prevent visual overlap:\n- Crossing horizontal arrows: add a small semicircle arc (radius 5px, stroke same color as arrow, fill none) that \"jumps over\" the other line\n- SVG pattern for jump-over: use a white/matching-background arc on the lower layer, then draw the upper arc on top\n- Multiple crossings: stagger arc radii (5px, 7px, 9px) so arcs don't overlap each other\n- Never let two arrows' straight-line segments cross without a jump-over arc\n\n**Validation Checklist** (run before finalizing):\n1. **Arrow-Component Collision**: Arrows MUST NOT pass through component interiors (route around with orthogonal paths)\n2. **Text Overflow**: All text MUST fit with 8px padding (estimate: `text.length × 7px ≤ shape_width - 16px`)\n3. **Arrow-Text Alignment**: Arrow endpoints MUST connect to shape edges (not floating); arrow labels should not overlap arrow lines (use offset positioning or background rects)\n4. **Container Discipline**: Prefer arrows entering and leaving section containers through open gaps between components, not through inner component bodies\n5. **Filter Boundary Safety**: For every element with `filter=\"url(...)\"`, verify `(element_x + element_width + filter_extension) ≤ viewBox_width` AND `element_x ≥ filter_extension`. The default filter region extends 10-20% beyond bbox; staying near viewBox edges causes Chrome/cairosvg to clip the element's edge-side stroke (one side of the border vanishes while other sides render correctly)\n6. **Arrow-Title Collision**: Arrows MUST NOT cross through section/container title text or region labels (font-size ≥ 13px). For smaller annotations (< 13px), prefer routing around but tolerate if layout constraints require it. *(Visual self-review check — not covered by `validate-svg.sh` automated checks)*\n7. **Frame Label–Arrow Alignment** (sequence diagrams): Section/frame label badges MUST be vertically centered with their first message arrow. Compute `badge_y = first_arrow_y - (badge_height / 2)`. When appending new sections to an existing diagram, verify alignment matches the existing sections — this is the most common regression when adding content incrementally. Use variables in Python list generation to enforce the constraint: `sec_y = 840; badge_y = sec_y - 9 # for height=18 badge`\n8. **Marker Integrity**: Every `marker-start`, `marker-mid`, and `marker-end` URL MUST resolve to a `` definition\n9. **Visual Review Status**: Report whether the exported PNG was visually inspected; automated validation does not cover every text, legend, or arrow-arrow collision\n\n## SVG Technical Rules\n\n- ViewBox: `0 0 960 600` default; `0 0 960 800` tall; `0 0 1200 600` wide\n- Fonts: embed via `` — no external `@import` (cairosvg / rsvg-convert cannot fetch external URLs)\n- ``: arrow markers, gradients, filters, clip paths\n- Text: minimum 12px, prefer 13-14px labels, 11px sub-labels, 16-18px titles\n- All arrows: `` with `markerEnd`, sized `markerWidth=\"10\" markerHeight=\"7\"`\n- Drop shadows: `` in ``, apply sparingly (key nodes only)\n- Curved paths: use `M x1,y1 C cx1,cy1 cx2,cy2 x2,y2` cubic bezier for loops/feedback arrows\n- Clip content: use `` if text might overflow a node box\n- Z-order (drawing order): SVG uses painter's model — later elements cover earlier ones. Recommended layer order (bottom → top): ① canvas background ② dashed containers / region backgrounds ③ arrows and connection lines ④ node shapes (rects, circles) ⑤ text labels and annotations ⑥ legends and overlays. When arrows pass near text, draw arrows BEFORE text so text stays readable. Adjust per diagram needs — this is guidance, not rigid.\n\n## SVG Generation & Error Prevention\n\n**Example: Python List Method.** Use a maintainable SVG/XML generator that passes the same geometry, text and export checks:\n```python\npython3 << 'EOF'\nlines = []\nlines.append('')\nlines.append(' ')\n# ... each line separately\nlines.append('')\n\nwith open('/path/to/output.svg', 'w') as f:\n f.write('\\n'.join(lines))\nprint(\"SVG generated successfully\")\nEOF\n```\n\n**Why mandatory**: Prevents character truncation, typos, and syntax errors. Each line is independent and easy to verify.\n\n**Pre-Tool-Call Checklist** (CRITICAL - use EVERY time):\n1. ✅ Can I write out the COMPLETE command/content right now?\n2. ✅ Do I have ALL required parameters ready?\n3. ✅ Have I checked for syntax errors in my prepared content?\n\n**If ANY answer is NO**: STOP. Do NOT call the tool. Prepare the content first.\n\n**Error Recovery Protocol**:\n- **First error**: Analyze root cause, apply targeted fix\n- **Second error**: Switch method entirely (Python list → chunked generation)\n- **Third error**: STOP and report to user - do NOT loop endlessly\n- **Never**: Retry the same failing command or call tools with empty parameters\n\n**Validation** (run after generation):\n```bash\npython3 -c \"import xml.etree.ElementTree as ET; ET.parse('file.svg')\" && echo \"✓ Valid XML\"\n# Or use cairosvg as a render-time check:\npython3 -c \"import cairosvg; cairosvg.svg2png(url='file.svg', write_to='/tmp/test.png')\" && echo \"✓ Renders\" && rm /tmp/test.png\n```\n\n**If using `generate-from-template.py`**:\n- Prefer `source` / `target` node ids in arrow JSON so the generator can snap to node edges\n- Keep `x1,y1,x2,y2` as hints or fallback coordinates, not the main routing primitive\n- Let the generator choose orthogonal routes; avoid hardcoding center-to-center straight lines unless the path is guaranteed clear\n\n**Common Syntax Errors to Avoid**:\n- ❌ `yt-anchor` → ✅ `y=\"60\" text-anchor=\"middle\"`\n- ❌ `x=\"390` (missing y) → ✅ `x=\"390\" y=\"250\"`\n- ❌ `fill=#fff` → ✅ `fill=\"#ffffff\"`\n- ❌ `marker-end=` → ✅ `marker-end=\"url(#arrow)\"`\n- ❌ `L 29450` → ✅ `L 290,220`\n- ❌ Missing `` at end\n- ❌ Element with `filter` near viewBox edge — filter region extends 20% (default) or more beyond bbox; if that region exceeds viewBox, Chrome/cairosvg clip the filter rendering AND can drop the element's own stroke on that side. Keep filtered elements at least `max(20% of element size, shadow blur radius × 3)` away from viewBox edges, or omit the filter.\n\n## Output\n\n- **Default**: `./[derived-name].svg` and `./[derived-name].png` in current directory\n- **Custom**: user specifies path with `--output /path/` or `输出到 /path/`\n- **PNG / motion export**: see **SVG → PNG Conversion** below and `$SKILL_ROOT/references/motion-effects.md`\n\n## SVG → PNG Conversion\n\nUse `$SKILL_ROOT/scripts/generate-diagram.sh` by default. Load `$SKILL_ROOT/references/png-export.md` only when selecting a renderer manually, handling CJK/emoji fallback, converting browser-generated SVG, or using the bundled Puppeteer converter.\n\n## Styles\n\n| # | Name | Background | Best For |\n|---|------|-----------|----------|\n| 1 | **Flat Icon** (default) | White | Blogs, docs, presentations |\n| 2 | **Dark Terminal** | `#0f0f1a` | GitHub, dev articles |\n| 3 | **Blueprint** | `#0a1628` | Architecture docs |\n| 4 | **Notion Clean** | White, minimal | Notion, Confluence, wikis |\n| 5 | **Glassmorphism** | Dark gradient | Product sites, keynotes |\n| 6 | **Claude Official** | Warm cream `#f8f6f3` | Anthropic-style diagrams |\n| 7 | **OpenAI Official** | Pure white `#ffffff` | OpenAI-style diagrams |\n| 8 | **Dark Luxury** *(AI-authored)* | `#0a0a0a` deep black | Architecture docs, premium editorial — hand-craft SVG from `$SKILL_ROOT/references/style-8-dark-luxury.md` |\n| 9 | **C4 Review Canvas** | Warm paper `#f7f2e8` | C4 reviews and ADRs; enforces one abstraction level |\n| 10 | **Cloud Fabric** | Cloud blue `#edf5fb` | Region/network/workload deployment ownership |\n| 11 | **Event Transit** | Transit paper `#fbf7ee` | Topics, processors, consumer groups, DLQ, state |\n| 12 | **Ops Pulse** | Ops navy `#07111f` | Golden signals, critical paths, correlated traces |\n\nLoad the matching `$SKILL_ROOT/references/style-N-*.md` for exact color tokens and SVG patterns.\n\n## Style Selection\n\n**Default**: Style 1 (Flat Icon) for most diagrams. Load `$SKILL_ROOT/references/style-diagram-matrix.md` for detailed style-to-diagram-type recommendations.\n\nPrompt fingerprints: `C4评审画布/C4 review board` → 9; `多区域云部署/deployment topology` → 10; `事件地铁图/event metro map` → 11; `可靠性脉冲/golden signals trace` → 12; `让这张图动起来/生成 GIF/制作 GIF/animate this diagram/Generate a GIF` → auto motion.\nAuto-select these only with matching domain evidence; otherwise use Styles 1–7 or `semantic_profile: \"generic\"`, and split mixed C4/deployment/event/ops views.\n\nThese patterns appear frequently — internalize them:\n\n**RAG Pipeline**: Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response\n**Agentic RAG**: adds Agent loop with Tool use between Query and LLM\n**Agentic Search**: Query → Planner → [Search Tool / Calculator / Code] → Synthesizer → Response\n**Mem0 / Memory Layer**: Input → Memory Manager → [Write: VectorDB + GraphDB] / [Read: Retrieve+Rank] → Context\n**Agent Memory Types**: Sensory (raw input) → Working (context window) → Episodic (past interactions) → Semantic (facts) → Procedural (skills)\n**Multi-Agent**: Orchestrator → [SubAgent A / SubAgent B / SubAgent C] → Aggregator → Output\n**Tool Call Flow**: LLM → Tool Selector → Tool Execution → Result Parser → LLM (loop)\n","skills/fireworks-tech-graph/references/icons.md":"# Icon Reference\n\n## Rules for Renderer Compatibility (cairosvg / rsvg-convert)\n\n**Never use** `@import url()` for icon fonts — neither cairosvg nor rsvg-convert fetches external resources.\n**Always use** inline SVG ``, ``, ``, `` combinations.\n**Font fallback**: embed font-family in `\n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-10-cloud-fabric.md":"# Style 10: Cloud Fabric\n\nA deployment-topology view for regions, VPCs/networks, compute, data stores,\nand cross-boundary traffic. It answers “where does this run?” without turning\nthe diagram into a vendor icon poster.\n\n## Best fit\n\n- Multi-region and disaster-recovery reviews\n- Cloud deployment and network ownership maps\n- Kubernetes cluster/namespace placement\n- Migration plans and platform boundary discussions\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#edf5fb` with a restrained blue grid |\n| Card | `#ffffff` |\n| Primary text | `#102a43` |\n| Boundary | `#7fa3c2` |\n| Traffic | `#2563eb` |\n| Write | `#ea580c` |\n| Data | `#059669` |\n| Cross-region | `#7c3aed`, dashed |\n\nNested boundaries carry a small `GLOBAL`, `REGION`, or `NETWORK` badge. Nodes\nuse a manifest-backed neutral glyph plus provider metadata. A colored ownership\nspine makes each nested deployment boundary readable even in grayscale.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"cloud-fabric\"` and provide:\n\n- `diagram_type: \"deployment\"`\n- `platform_profile`: `provider-neutral`, `aws`, `azure`, `gcp`, or `kubernetes`\n- `icon_manifest_version: \"2026.07-neutral.1\"`\n- at least one `deployment_kind: \"region\"` boundary\n- every node: `deployment_id` and a manifest-backed `icon_id`\n- every cross-deployment edge: a non-empty `via`\n\nBoundary parents must form an acyclic tree, nesting depth is capped at four,\nchild boundaries stay at least `16px` inside their parent, and nodes stay at\nleast `20px` inside their assigned deployment.\n\n## Icon policy\n\nThe bundled manifest contains provider-neutral geometric glyphs. It records\nofficial AWS, Azure, and Google Cloud asset URLs as adapter metadata; it does\nnot redistribute vendor trademarks. If a user supplies an official icon pack,\npreserve its license and version outside this repository and map it through the\nmanifest boundary.\n\nNever invent a vendor service logo. Unknown `icon_id` values fail validation.\n\n## Composition rules\n\n- Show deployment ownership through nesting, not background color alone\n- Use a shallow `global → region → network` hierarchy where possible\n- Keep ingress paths vertical and regional data paths aligned\n- Name cross-boundary mechanisms (`peering`, `transit gateway`, `service mesh`)\n- Zero crossings in official samples; use no more than two bends per edge\n- Do not encode both logical service architecture and every subnet in one view\n- Reserve the icon/provider area before fitting text; no title or subtitle may cross a card edge\n- Place ingress mechanism labels in inter-boundary whitespace, clear of Region and Network headers\n\n## Signature checklist\n\n- Pale cloud grid and explicit `global → region → network` nesting\n- Ownership spines plus `GLOBAL`, `REGION`, and `NETWORK` boundary badges\n- Manifest-backed globe, compute, database, gateway, stream, or observe glyphs\n- Top-right platform/region/deployment-mode stamp and named cross-boundary mechanisms\n\n## Prompt cues\n\n- English: `multi-region deployment map`, `cloud landing zone map`, `region/VPC ownership map`\n- 中文：`多区域部署图`、`云部署拓扑`、`Region/VPC 归属图`\n- Copyable cue: `Use Style 10 Cloud Fabric; show global ingress, Region and VPC ownership, neutral cloud glyphs, deployment mode, and every cross-boundary mechanism.`\n\n## Do not blend with\n\nDo not use C4 abstraction labels, transit-map station numbering, or live SRE\nmetric cards. When deployment evidence is absent, fall back to a generic Style\n1–7 architecture view instead of inventing cloud ownership.\n\n## Fixture\n\n`fixtures/cloud-fabric-style10.json` demonstrates active-active checkout\ndeployment with two regions, explicit VPC ownership, and neutral glyphs.\n","skills/fireworks-tech-graph/references/style-11-event-transit.md":"# Style 11: Event Transit\n\nA transit-map metaphor for event-driven systems. Topics are rails, processing\nsteps are stations, declared junctions are branch points, and dead letters get\na visibly separate route.\n\n## Best fit\n\n- Kafka/Pulsar/NATS topology reviews\n- Event choreography and consumer-group discussions\n- Stream processing, retry, and DLQ runbooks\n- Schema evolution and materialized-view pipelines\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#fbf7ee` with transit dots |\n| Card | `#fffdf8` |\n| Primary rail | `#e4475b` |\n| State projection | `#00897b` |\n| Read/consumer | `#2563eb` |\n| DLQ | `#c62828`, dashed |\n| Text | `#17213c` |\n\nThe dark casing beneath a rail is decoration. The colored path with\n`data-graph-role=\"edge\"` remains the ordinary semantic connector. Semantic\nrails use a maximum `2.8px` stroke and fixed user-space arrowheads so markers do\nnot grow with line width.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"event-transit\"` and provide:\n\n- `diagram_type: \"event_stream\"`\n- one to four topics, each with unique `id` and `color`\n- every node: `transit_role` and optional/required topic metadata\n- stations/junctions: `operation`\n- consumers: `consumer_group`\n- rail stations: unique integer `station_order`\n- rail edges: `transit_type: \"rail\"`, topic id, `right → left` ports\n\nA rail edge must connect consecutive station orders on one horizontal\ncenterline with at least `64px` clearance. A dead-letter edge must target a\nreal `dlq` node. Multiple rail departures are only valid from a `junction`.\n\n## Composition rules\n\n- One horizontal centerline per topic rail\n- Use branches only where the node is declared as a junction\n- Put DLQ and state-store terminals below their owning station\n- Reserve dashed red for dead-letter/retry semantics\n- Show partition, lag, or schema facts as short badges\n- Zero bridge crossings and no duplicated rail overlay in official samples\n- Keep at least `64px` clear rail between adjacent station cards\n- Use compact user-space arrowheads and a subtle casing; the semantic rail stays at or below `2.8px`\n\n## Signature checklist\n\n- Dark top-right `EVENT METRO` line stamp and a signed topic-line count\n- Numbered station medallions, compact midpoint chevrons, and one rail centerline per topic\n- Distinct junction dot, dashed DLQ terminal with `×`, and state-store terminal with a square glyph\n- Partition, schema, latency, fan-out, lag, replay, and state badges attached to stations\n\n## Prompt cues\n\n- English: `event metro map`, `topic rail map`, `Kafka topology`, `stream choreography map`\n- 中文：`事件地铁图`、`事件轨道图`、`Topic 线路图`、`Kafka 拓扑图`\n- Copyable cue: `Use Style 11 Event Transit; render topics as thin metro rails, processors as numbered stations, declared junctions, consumer groups, DLQ, and state projections.`\n\n## Do not blend with\n\nDo not nest Region/VPC deployment boundaries, label cards as C4 containers, or\nattach golden-signal dashboards to every station. A request/response flow with\nno topic, consumer-group, or stream evidence should use a generic flow style.\n\n## Fixture\n\n`fixtures/event-transit-style11.json` shows a checkout event line with schema\nvalidation, fraud enrichment, a declared junction, DLQ, and materialized state.\n","skills/fireworks-tech-graph/references/style-12-ops-pulse.md":"# Style 12: Ops Pulse\n\nAn operational review surface that combines service topology, the four golden\nsignals, one critical request path, and a correlated trace waterfall. It is\nfor incident and reliability work, not a screenshot of a live dashboard.\n\n## Best fit\n\n- Incident reviews and production-readiness reviews\n- SLO/error-budget discussions\n- Latency and dependency investigations\n- Runbooks that connect topology to one representative trace\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#07111f` with a restrained ops grid |\n| Service card | `#0d1b2a` |\n| Border | `#29435d` |\n| Healthy | `#22c55e` |\n| Warning | `#f59e0b` |\n| Critical | `#f43f5e` |\n| Telemetry | `#22d3ee`, dashed |\n| Trace | `#38bdf8` |\n\n## Required semantic contract\n\nSelect `semantic_profile: \"ops-pulse\"` and provide:\n\n- `diagram_type: \"observability\"`\n- one to twelve nodes with `ops_role: \"service\"`\n- each service: exactly `latency`, `traffic`, `errors`, and `saturation`\n- every signal: `value`, `unit`, `window`, and `status`\n- service cards at least `180×108` and a visible `status_label`\n- a non-empty ordered `critical_path` of business edge ids\n- business and telemetry edges using different `flow` tokens\n- trace spans with positive duration and valid parent coverage\n\nThe critical path must be contiguous and may not include telemetry edges. A\ntrace waterfall has exactly one root when spans are present.\n\n## Composition rules\n\n- Keep service health cards in one aligned band\n- Show only one highlighted critical path per view\n- Telemetry export is dashed and visually subordinate\n- Put the trace waterfall in its own boundary below topology\n- Do not duplicate a critical edge to create glow; glow is decoration owned by\n the single semantic path\n- Use a fixed observation window and display units on every signal\n- Zero bridge crossings and no more than two bends per edge\n\n## Signature checklist\n\n- Top-right `LIVE` investigation stamp with observation window and worst status\n- Status rail on every service card and four metric chips carrying explicit windows\n- Numbered critical-hop markers on the single highlighted business path\n- Dedicated trace boundary with a 0–100% ruler and one correlated waterfall\n\n## Prompt cues\n\n- English: `reliability pulse`, `incident investigation view`, `golden signals trace`, `SRE trace review`\n- 中文：`可靠性脉冲`、`事故排查视图`、`黄金信号追踪图`、`SRE Trace 评审`\n- Copyable cue: `Use Style 12 Ops Pulse; show a fixed observation window, four golden signals per service, one numbered critical path, telemetry export, and one correlated trace waterfall.`\n\n## Do not blend with\n\nDo not turn the service band into a Region/VPC deployment map, an event-metro\nrail, or a C4 responsibility review. If the prompt lacks measured signals,\nstatus, time window, and trace evidence, use a generic architecture style.\n\n## Fixture\n\n`fixtures/ops-pulse-style12.json` demonstrates a degraded checkout path with\nfour service cards, an OTel collector, and a correlated four-span trace.\n","skills/fireworks-tech-graph/references/style-2-dark-terminal.md":"# Style 2: Dark Terminal\n\nNeon-on-dark hacker aesthetic. Matches CLAUDE.md standard tech diagram style.\n\n## Colors\n\n```\nBackground: #0f0f1a (near-black)\nPanel fill: #0f172a (slate-950)\nPanel stroke: #334155 (slate-700)\nBox radius: 6px\n\nText primary: #e2e8f0 (slate-200)\nText secondary: #94a3b8 (slate-400)\nText muted: #475569 (slate-600)\n\nAccent palette (use per theme/layer):\n Purple: #7c3aed / #a855f7\n Orange: #ea580c / #f97316\n Blue: #1d4ed8 / #3b82f6\n Green: #059669 / #10b981\n Gold: #eab308\n Red: #dc2626 / #ef4444\n\nArrow colors: match accent of the source node's theme\n```\n\n## Background Gradient\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Typography\n\n```\nfont-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 11px sub-labels, 15px titles\nfont-weight: 400 normal, 700 bold for section headers\nletter-spacing: 0.02em for labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n\n```\n\n## Glow Effect (optional, for key nodes)\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-3-blueprint.md":"# Style 3: Blueprint\n\nEngineering blueprint aesthetic with grid background and technical annotation style.\n\n## Colors\n\n```\nBackground: #0a1628\nGrid color: #112240 (subtle grid lines)\nPanel fill: #0d1f3c\nPanel stroke: #00b4d8 (cyan/teal)\nBox radius: 2px (sharp corners for technical feel)\n\nText primary: #caf0f8 (light cyan)\nText secondary: #90e0ef\nText label: #00b4d8\nText muted: #48cae4 at 60% opacity\n\nAccent colors:\n Cyan: #00b4d8 / #48cae4\n White: #ffffff (key labels)\n Orange: #f77f00 (warnings/alerts)\n Green: #06d6a0 (success/active)\n```\n\n## Background with Grid\n\n```xml\n\n \n \n \n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Courier New', 'Lucida Console', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 10px annotations, 16px title\nfont-weight: 400; titles use 700\ntext-transform: uppercase for section headers\nletter-spacing: 0.05em\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n```\n\n## Arrows & Annotations\n\n```xml\n\n \n \n \n\n\n\n\n\nHTTP/REST\n```\n\n## Title Block (bottom-right)\n\n```xml\n\n\n\nSYSTEM ARCHITECTURE\nDIAGRAM TITLE\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-4-notion-clean.md":"# Style 4: Notion Clean\n\nMinimal, documentation-friendly. Designed to embed in Notion, Confluence, or GitHub wikis.\n\n## Colors\n\n```\nBackground: #ffffff\nBox fill: #f9fafb (gray-50) or #ffffff\nBox stroke: #e5e7eb (gray-200)\nBox radius: 4px\n\nText primary: #111827 (gray-900)\nText secondary: #374151 (gray-700)\nText muted: #9ca3af (gray-400)\nText label: #6b7280 (gray-500), uppercase, 11px\n\nAccent (subtle, used sparingly):\n Blue: #3b82f6 (arrows only)\n Gray: #d1d5db (dividers)\n```\n\n## Design Principles\n\n- **No decorative icons** — use geometric shapes only (rect, circle, diamond)\n- **Generous whitespace** — 24px+ padding between elements\n- **Single arrow color** — blue (#3b82f6) for all connections\n- **Labels in ALL CAPS** — section headers and node type labels\n- **No drop shadows** — flat only\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei',\n 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 11px uppercase type labels, 18px title\nfont-weight: 400 normal, 500 medium for node labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\nDATABASE\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n\n## Sizing Guide\n\n- Node box: min 120×40px, prefer 160×48px for readability\n- Title: top-left, 18px, gray-900, margin 32px from edges\n- Spacing: 80px minimum between nodes horizontally, 60px vertically\n","skills/fireworks-tech-graph/references/style-5-glassmorphism.md":"# Style 5: Glassmorphism\n\nFrosted glass cards on dark gradient. Designed for product sites, keynotes, and hero sections.\n\n## Colors\n\n```\nBackground gradient: #0d1117 → #161b22 → #0d1117 (diagonal)\n\nGlass card:\n fill: rgba(255,255,255,0.05)\n stroke: rgba(255,255,255,0.15)\n backdrop-filter: blur(12px) [SVG: use feGaussianBlur]\n box-radius: 12px\n\nText primary: #f0f6fc (near-white)\nText secondary: #8b949e (muted)\nText gradient: use linearGradient on text fill for hero labels\n\nAccent glows (one per layer):\n Blue glow: #58a6ff / rgba(88,166,255,0.3)\n Purple glow: #bc8cff / rgba(188,140,255,0.3)\n Green glow: #3fb950 / rgba(63,185,80,0.3)\n Orange glow: #f78166 / rgba(247,129,102,0.3)\n```\n\n## Background\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n```\n\n## Glass Card Effect\n\nSVG cannot do real backdrop-filter, so simulate with:\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 12px sublabels, 20px hero title\nfont-weight: 400 normal, 600 semi-bold, 700 bold titles\n```\n\n## Gradient Text (for hero labels)\n\n```xml\n\n \n \n \n \n\n\n AI Pipeline\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-6-claude-official.md":"# Style 6: Claude Official\n\nInspired by Anthropic's Claude blog technical diagrams — warm, approachable, professional.\n\n```\nBackground: #f8f6f3 (warm cream)\nBox fill:\n - Blue tint: #a8c5e6 (alert/input nodes)\n - Green tint: #9dd4c7 (agent nodes)\n - Beige: #f4e4c1 (infrastructure/bus)\n - Gray tint: #e8e6e3 (storage/state)\nBox stroke: #4a4a4a (dark gray)\nBox radius: 12px\nText primary: #1a1a1a (near black)\nText secondary: #6a6a6a (medium gray)\nText labels: #5a5a5a (arrow labels)\n\nSemantic colors:\n Input/Source: #a8c5e6 (soft blue)\n Agent/Process: #9dd4c7 (soft teal-green)\n Infrastructure: #f4e4c1 (warm beige)\n Storage/State: #e8e6e3 (light gray)\n\nArrow color: #5a5a5a (consistent dark gray)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',\n Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 14px descriptions, 13px arrow labels\nfont-weight: 600 for node labels, 400 for descriptions, 700 for titles\n```\n\n## Box Shapes\n\n```xml\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n```\n\n## Arrow Semantics\n\nUse different arrow styles to convey meaning:\n\n| Flow Type | Color | Stroke | Dash | Usage |\n|-----------|-------|--------|------|-------|\n| Primary data flow | #5a5a5a | 2px solid | none | Main request/response path |\n| Memory write | #5a5a5a | 2px | `5,3` | Write/store operations |\n| Memory read | #5a5a5a | 2px solid | none | Retrieval from store |\n| Control/trigger | #5a5a5a | 1.5px | `3,2` | Event triggers |\n\n```xml\n\n\n\n\n\n```\n\n## Arrow Labels\n\nArrow labels should be **technical and specific**, positioned mid-arrow:\n\n```xml\n\n store(embedding)\n\n```\n\nGood labels: `query(text)`, `retrieve(top_k=5)`, `embed(768d)`, `POST /api/search`\nAvoid vague labels: \"Process\", \"Send\", \"Get\"\n\n## Node Content Guidelines\n\nNode content should include **technical details**, not just concepts:\n\n**Good examples:**\n- \"Vector Store\" → \"Vector Store\" + \"• 768-dim embeddings\" + \"• Cosine similarity\"\n- \"LLM\" → \"GPT-4\" + \"• 8K context\" + \"• Temperature: 0.7\"\n- \"Memory\" → \"Redis Cache\" + \"• TTL: 5min\" + \"• Max: 4K tokens\"\n\n**Avoid vague descriptions:**\n- \"Process data\" → specify what processing\n- \"Store information\" → specify storage type and format\n- \"Handle requests\" → specify request type and method\n\nUse 2-3 lines per node:\n1. Component name (bold, 16px)\n2. Technical detail or implementation (14px)\n3. Key parameter or constraint (14px, optional)\n\n## Layer Labels\n\nFor multi-layer architectures, add layer labels on the left side:\n\n```xml\nInput\nProcessing\nStorage\n```\n\nPosition at the vertical center of each layer.\n\n## Legend Requirement\n\nWhen using 2+ arrow types or colors, include a legend in the bottom-right corner:\n\n```xml\n\nLegend\n\n\n\nRead operation\n\n\nWrite operation\n```\n\nPosition: bottom-right, 20px margin from edges.\n\n## Layout Principles\n\n- **Generous spacing**: Minimum 80px between node edges\n- **Horizontal alignment**: Same-layer nodes align perfectly\n- **Vertical flow**: Top-to-bottom preferred\n- **Symmetry**: Balanced composition\n- **Clean lines**: Orthogonal routing — vertical then horizontal, or vice versa\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n \n Agent name\n\n \n \n Publish\n\n```\n\n## Design Philosophy\n\nClaude's official style emphasizes:\n- **Warmth**: Cream background, soft fills\n- **Clarity**: High contrast text, generous spacing\n- **Professionalism**: Consistent stroke weights, aligned elements\n- **Approachability**: Rounded corners, friendly colors\n\nAvoid:\n- Harsh shadows or gradients\n- Overly saturated colors\n- Thin stroke weights (< 2px)\n- Cluttered layouts\n","skills/fireworks-tech-graph/references/style-7-openai.md":"# Style 7: OpenAI Official\n\nClean, modern aesthetic matching OpenAI's documentation and research diagrams — minimal but precise.\n\n## Color Palette\n\n```\nBackground: #ffffff (pure white)\nPrimary text: #0d0d0d (near black)\nSecondary text: #6e6e80 (muted gray)\nBorder: #e5e5e5 (light gray)\n\nAccent colors (reserved):\nGreen accent: #10a37f (OpenAI brand green)\nBlue accent: #1d4ed8 (links, actions)\nOrange accent: #f97316 (highlights, warnings)\nGray accent: #71717a (secondary elements)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 13px descriptions, 12px arrow labels\nfont-weight: 600 for titles, 500 for labels, 400 for descriptions\nletter-spacing: 0\n```\n\nNo custom fonts. System font stack only for maximum compatibility.\n\n## Node Boxes\n\nClean, minimal boxes with subtle borders:\n\n```xml\n\n\n\n\n\n\n```\n\n**Key techniques:**\n1. White fill with light gray border (no shadows)\n2. Optional colored left-border accent strip (4px wide)\n3. `rx=\"8\"` for subtle rounding\n4. `stroke-width: 1.5` — thin, precise borders\n5. No gradients, no shadows, no decorative elements\n\n## Arrows\n\nThin, precise arrows with subtle colors:\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n\n\n\n\n\n\n```\n\n**Arrow guidelines:**\n- Prefer straight lines (orthogonal routing with right angles)\n- `stroke-width: 1.5` — thin and precise\n- Filled polygon arrowheads (not stroke-based)\n- Gray for default, green for primary/accent flows\n- Dashed (`stroke-dasharray=\"4,3\"`) for optional/async flows\n\n## Arrow Labels\n\nMinimal, small labels:\n\n```xml\n\n label\n\n```\n\nLabels should be:\n- 12px, gray color (`#6e6e80`)\n- No background rect by default (white background is usually sufficient); add a white fallback rect only when offsetting cannot prevent a collision\n- Short, technical language\n- Midpoint of arrow\n\n## Database Shapes\n\nClean cylinders with thin borders:\n\n```xml\n\n\n\n```\n\n## Grouping Containers\n\nDashed rect containers for logical grouping:\n\n```xml\n\n\n Group Label\n\n```\n\n## Node Content\n\nClean, minimal text layout:\n\n```xml\n\n\n Component Name\n\n\n Brief description\n\n```\n\n**Content guidelines:**\n- 1-2 lines per box\n- Main label: 16px, font-weight: 600, near-black\n- Description: 13px, font-weight: 400, gray\n- Center-aligned text within boxes\n\n## Layout Principles\n\n**Precise, grid-aligned layout:**\n- Snap all coordinates to 8px grid\n- Consistent 100px horizontal spacing\n- Consistent 120px vertical spacing\n- Generous whitespace (40px+ margins)\n- No decorative elements\n\n**OpenAI minimalism:**\n- Only use color when semantically meaningful (brand green for primary flow)\n- White boxes on white background — differentiation through border and label only\n- Avoid: shadows, gradients, patterns, icons, decorative elements\n- Prefer: straight lines, orthogonal routing, thin strokes\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n Component\n Description\n\n \n \n label\n\n```\n\n## Design Philosophy\n\nOpenAI Official style emphasizes:\n- **Minimalism**: White on white, only essential visual elements\n- **Precision**: Thin strokes, sharp corners (rx=8), grid-aligned\n- **Clarity**: Content-first, no visual noise\n- **Brand consistency**: `#10a37f` green used sparingly for primary flows\n\nAvoid:\n- Shadows and gradients\n- Colorful fills (white fill only)\n- Thick borders (>2px)\n- Decorative elements (icons, patterns, textures)\n- Custom fonts (system stack only)\n","skills/fireworks-tech-graph/references/style-8-dark-luxury.md":"# Style 8 — Dark Luxury\n\nInspired by the `dark-gold` theme from [Understand-Anything](https://github.com/nicholasgasior/understand-anything).\nDeep black canvas with warm champagne-gold accents and hybrid serif/sans typography.\nUniquely warm among all dark styles — closest peer is style-2 (Dark Terminal) but with a premium editorial feel.\n\n## Color Tokens\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| Background | `#0a0a0a` | Canvas fill (deepest black, no blue tint) |\n| Surface | `#111111` | Node / panel fill |\n| Elevated | `#1a1a1a` | Secondary panels, sub-headers |\n| Accent gold | `#d4a574` | Primary arrows, titles, borders, cluster containers |\n| Accent dim | `#c9a96e` | Muted gold borders, secondary accents, cluster labels |\n| Accent bright | `#e8c49a` | Highlights, selected state stroke |\n| Text primary | `#f5f0eb` | Main labels (warm near-white) |\n| Text secondary | `#a39787` | Sub-labels, descriptions |\n| Text muted | `#6b5f53` | Annotations, fine print |\n\n## Typography\n\n```\nTitle / Section label: Georgia, 'Times New Roman', serif\n font-size: 21px (diagram title), 14px (section labels)\n font-weight: 700\n fill: #f5f0eb / #c9a96e (gold for section headers)\n\nNode name: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif\n font-size: 13-14px, font-weight: 600, fill: \n\nSub-label / detail: sans-serif, font-size: 10-11px, fill: #a39787 or #6b5f53\n\nArrow label / legend: sans-serif, font-size: 10-11px, fill: #a39787\n\nCode / path text: 'Cascadia Code', 'SF Mono', 'Courier New', monospace\n font-size: 10-11px, fill: #a39787\n```\n\n**Rule**: Georgia serif is used ONLY for diagram titles and cluster/section labels (≥14px).\nAll node names, arrow labels, and fine-print use sans-serif. This prevents CJK readability issues\nat small sizes while preserving the luxury editorial hook where it's most visible.\n\n## Node Semantic Color Buckets\n\nSix buckets cover the full color wheel — no two adjacent bucket colors are similar:\n\n| Bucket | Border Color | Use For |\n|--------|-------------|---------|\n| Code / Logic | `#5a9e6f` (sage green) | functions, classes, modules, algorithms |\n| Service / API | `#a78bfa` (soft violet) | services, endpoints, APIs, gateways |\n| Data / Storage | `#38bdf8` (sky blue) | databases, tables, files, caches |\n| Concept / Domain | `#f87171` (soft rose) | concepts, domains, entities, topics |\n| Infra / Config | `#fbbf24` (amber yellow) | infrastructure, config, scripts, pipelines |\n| Meta / Doc | `#94a3b8` (cool gray) | documents, schemas, resources, sources |\n\nAll nodes share: `rx=\"6\"` rounded rect, `fill=\"#111111\"`, `stroke-width=\"1.5\"`, stroke color matches bucket.\n\n### SVG node example (Code / Logic):\n\n```xml\n\nMyComponent\nReact component · state management\n```\n\n## Arrow System\n\n| Flow Type | Color | Stroke | Dash | Marker |\n|-----------|-------|--------|------|--------|\n| Primary / structural | `#d4a574` (gold) | 2px solid | none | gold arrowhead |\n| Data flow | `#6ee7b7` (mint) | 1.5px solid | none | mint arrowhead |\n| Control / trigger | `#fdba74` (amber-orange) | 1.5px solid | none | orange arrowhead |\n| Reference / semantic | `#a39787` (warm muted) | 1px dashed | `4,3` | muted arrowhead |\n| Dependency | `#a78bfa` (violet) | 1px dashed | `6,3` | violet arrowhead |\n| Feedback / loop | `#d4a574` (gold) | 1.5px curved | — | gold arrowhead |\n\n### SVG arrow markers (add to ``):\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n```\n\n### Arrow label placement\n\nUse **offset-first**: place label 6–8px above horizontal arrows (not centered on the line).\nAdd background rect (`fill=\"#0a0a0a\" opacity=\"0.9\"`) only when the label still collides with another element.\n\n## Container / Cluster Style\n\n```xml\n\n\n\n\nLAYER NAME\n```\n\n## Background Treatment\n\nNo gradient needed — depth comes from contrast levels:\n\n1. Canvas `#0a0a0a` — absolute black floor\n2. Node surface `#111111` — first elevation (+1 stop)\n3. Panel/sub-header `#1a1a1a` — second elevation (+2 stops)\n4. Gold `#d4a574` — the only warmth; draws the eye to structure\n\nOptional: subtle ambient radial glow around the central cluster\n```xml\n\n \n \n\n\n```\n\n## Full `\n```\n\n## ViewBox Recommendations\n\n| Diagram | ViewBox |\n|---------|---------|\n| Standard architecture | `0 0 960 600` |\n| Tall pipeline / flow | `0 0 960 820` |\n| Wide multi-layer | `0 0 1200 600` |\n\n## Comparable Styles\n\n| Style | Background | Accent | Typography |\n|-------|-----------|--------|-----------|\n| Style 2 Dark Terminal | `#0f0f1a` (blue-black) | `#00ff88` (neon green) | monospace throughout |\n| **Style 8 Dark Luxury** | `#0a0a0a` (pure black) | `#d4a574` (champagne gold) | serif titles + sans body |\n| Style 3 Blueprint | `#0a1628` (navy) | `#4fc3f7` (cyan) | sans-serif |\n\n**When to choose Style 8**: architecture/pipeline docs where you want editorial gravitas —\nREADME hero images, conference slides, knowledge-base diagrams, premium product docs.\n","skills/fireworks-tech-graph/references/style-9-c4-review-canvas.md":"# Style 9: C4 Review Canvas\n\nA review-room canvas for C4 context, container, and component diagrams. The\nwarm paper surface and deterministic pencil echoes make design discussion feel\nhuman while the underlying geometry remains exact.\n\n## Best fit\n\n- Architecture Decision Records and design reviews\n- C4 context, container, or component views\n- Responsibility and dependency reviews\n- Diagrams that need annotations without looking like a slide template\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#f7f2e8` |\n| Card | `#fffdf7` |\n| Primary text | `#24312f` |\n| Boundary | `#8c7d68`, dashed |\n| Primary relationship | `#365f56` |\n| State change | `#a44a3f` |\n| Data/read | `#356a8a` |\n| Asynchronous | `#7a5c99` |\n\nUse Avenir/system sans-serif. Keep type labels uppercase and small; keep\ndescriptions sentence-like and technologies terse.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"c4-review\"` and provide:\n\n- `diagram_type: \"c4\"`\n- one `c4_level`: `context`, `container`, or `component`\n- `scope`, `title`, integer `rough_seed`, and a legend\n- every node: `c4_type`, `label`, and `description`\n- container/component nodes: `technology` and a card at least `170×96`\n- every relationship: short `label` and explicit `protocol`\n\nDo not mix a deeper C4 element into a higher-level view. The runtime rejects a\ncomponent in a container view and rejects unknown boundary parents.\n\n## Roughness without geometry drift\n\nThe `rough_seed` creates stable decorative second strokes. Decorations use\n`data-graph-role=\"decoration\"`; the ordinary orthogonal path remains the only\nsemantic edge. A seed must reproduce byte-identical SVG across runs.\n\nNever jitter:\n\n- node bounds or port anchors\n- the semantic route or arrowhead\n- label bounds\n- container gutters\n\n## Composition rules\n\n- One abstraction level per canvas\n- At least `40px` between nodes and `20px` inside boundaries\n- Zero undeclared crossings and zero bridge crossings for official samples\n- At most two bends per relationship; prefer aligned straight paths\n- Put external people/systems outside the system boundary with a clear gutter\n- Keep labels short enough to sit in whitespace, not on top of cards\n- Wrap responsibility copy to at most two lines; keep technology in the lower-right safe area\n\n## Signature checklist\n\n- Top-right dashed review stamp showing the C4 level and review state\n- Uppercase C4 type, responsibility copy, and a separate technology footer on each card\n- Dashed external-system cards and deterministic pencil echoes that never alter geometry\n- Two-line relationship badges: action first, protocol in brackets below\n\n## Prompt cues\n\n- English: `C4 review board`, `ADR review canvas`, `container responsibility review`\n- 中文：`C4 评审画布`、`ADR 评审图`、`职责边界评审图`\n- Copyable cue: `Use Style 9 C4 Review Canvas; show one C4 level, responsibilities, technologies, review state, and relationship protocols.`\n\n## Do not blend with\n\nDo not add Region/VPC ownership bands, event-metro stations, or golden-signal\nmetric chips. If those facts dominate the request, route to Style 10, 11, or\n12 instead of turning the C4 review into a mixed abstraction canvas.\n\n## Fixture\n\n`fixtures/c4-review-canvas-style9.json` demonstrates a checkout container\nreview with a deterministic seed and a 100-point showcase composition score.\n","skills/fireworks-tech-graph/references/style-diagram-matrix.md":"# Style-to-Diagram-Type Adaptation Guide\n\nNot all styles work equally well for every diagram type. Use this guide to pick the best style.\n\n## Engineering-first styles (9–12)\n\nStyles 9–12 pair a visual language with an executable semantic contract. They\nare deliberately specialized rather than universal skins.\n\n| Style | Required evidence | Visual fingerprint | Prompt cues | Fallback | Never blend with |\n|---|---|---|---|---|---|\n| 9 C4 Review Canvas | One declared C4 level, responsibilities, technology, labeled protocols | Warm review board, C4 type headers, dashed review stamp, deterministic pencil echo | `C4 review board`, `C4 评审画布`, `ADR 评审图` | Styles 1–7 generic architecture | Region/VPC bands, event stations, live metric chips |\n| 10 Cloud Fabric | Region/network/workload ownership and named cross-boundary mechanisms | Cloud grid, nested ownership spines, neutral manifest glyphs, deployment-mode stamp | `deployment topology`, `多区域部署图`, `Region/VPC 归属图` | Styles 1–7 when deployment facts are absent | C4 abstraction labels, station numbering, golden-signal cards |\n| 11 Event Transit | Topics, ordered processors, consumer groups, junctions, DLQ/state | Thin metro rails, numbered stations, fixed arrowheads, role-specific terminals | `event metro map`, `事件地铁图`, `Kafka 拓扑图` | Generic flow style when stream evidence is absent | Cloud nesting, C4 cards, SRE dashboards |\n| 12 Ops Pulse | Fixed window, four golden signals, statuses, one critical path and trace | Live stamp, status rails, metric windows, numbered hops, trace ruler | `reliability pulse`, `事故排查视图`, `黄金信号追踪图` | Generic architecture when measured evidence is absent | Deployment ownership, event rail metaphor, C4 review marks |\n\nAll four official fixtures use the `showcase` composition contract: at least\n40px node spacing, 20px container gutter, zero bridge crossings, at most two\nbends per edge, and no semantic edge duplicated for visual effects.\n\n## Architecture Diagram\n| Style | Suitability | Notes |\n|-------|----------|\n| 1 Flat Icon | Excellent | Default choice; colorful node fills, clear layering |\n| 2 Dark Terminal | Excellent | Popular for dev blogs; use colored borders on dark bg |\n| 3 Blueprint | Excellent | Perfect for formal architecture docs |\n| 4 Notion Clean | Good | Minimal, works for inline docs |\n| 5 Glassmorphism | Good | Striking for presentations and product pages |\n| 6 Claude Official | Good | Warm aesthetic, Anthropic-style presentations |\n| 7 OpenAI Official | Good | Clean, precise; minimal borders, brand green accents |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Premium editorial; gold-on-black layers stand out for architecture docs |\n\n## Class Diagram / ER Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colored headers per class category |\n| 2 Dark Terminal | Good | High contrast for code-like diagrams |\n| 3 Blueprint | Excellent | Best for formal UML documentation |\n| 4 Notion Clean | Excellent | Clean, minimal; ideal for Notion-embedded diagrams |\n| 5 Glassmorphism | Poor | Glass effects distract from structural content |\n| 6 Claude Official | Excellent | Warm, readable; good for documentation |\n| 7 OpenAI Official | Excellent | Minimal aesthetic matches UML precision |\n| 8 Dark Luxury *(AI-authored)* | Fair | Non-standard dark bg for UML; use only for premium editorial contexts |\n\n## Sequence Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Clear lifelines; activation boxes visible |\n| 2 Dark Terminal | Good | Good for dev articles; dashed lifelines visible |\n| 3 Blueprint | Excellent | Formal, technical documentation |\n| 4 Notion Clean | Excellent | Best for Notion-embedded sequence diagrams |\n| 5 Glassmorphism | Poor | Glass effects make lifelines hard to read |\n| 6 Claude Official | Excellent | Ward contrast |\n| 7 OpenAI Official | Excellent | Minimal, precise; ideal for API docs |\n| 8 Dark Luxury *(AI-authored)* | Good | Dramatic contrast; dark lifelines suit developer blogs and premium tech docs |\n\n## Flowchart / Process Flow\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Default; colorful decision diamonds |\n| 2 Dark Terminal | Good | Works well for dev workflow diagrams |\n| 3 Blueprint | Good | Formal process documentation |\n| 4 Notion Clean | Good | Clean for SOPs and inline docs |\n| 5 Glassmorphism | Good | Striking for product demos |\n| 6 Claude Official | Good | Warm aesthetic for presentations |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Good | Striking for premium process documentation |\n\n## Mind Map / Concept Map\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent branches, engaging |\n| 2 Dark Terminal | Good | Neon-like branches on dark bg |\n| 3 Blueprint | Poor | Blueprint grid conflicts with radial layout |\n| 4 Notion Clean | Excellent | Ideal for n brainstorming |\n| 5 Glassmorphism | Excellent | Stunning visual for presentations |\n| 6 Claude Official | Good | Warm, readable |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Gold accent branches on black; radial layouts stand out in presentations |\n\n## Data Flow Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded arrows by data type |\n| 2 Dark Terminal | Excellent | Glowing data paths on dark bg |\n| 3 Blueprint | Excellent | Formal data flow documentation |\n| 4 Notion Clean | Good | Minimal, clean |\n| 5 Glassmorphism | Poor | Distracts from flow semantics |\n| 6 Claude Official | Good | Readable |\n| 7 OpenAI Official | Good | Precise, minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Color-coded data paths shine against deep black; ideal for data engineering docs |\n\n## Use Case Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colorful use case ellipses |\n| 2 Dark Terminal | Poor | Stick figures less visible on dark bg |\n| 3 rint | Excellent | Classic UML aesthetic |\n| 4 Notion Clean | Excellent | Perfect for product requirement docs |\n| 5 Glassmorphism | Poor | Unnecessary visual noise |\n| 6 Claude Official | Excellent | Warm, professional |\n| 7 OpenAI Official | Excellent | Clean, precise UML |\n| 8 Dark Luxury *(AI-authored)* | Fair | Stick figures less visible on deep black; use cautiously |\n\n## State Machine Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\nFlat Icon | Good | Colorful states |\n| 2 Dark Terminal | Good | Glowing states and transitions |\n| 3 Blueprint | Excellent | Best for formal UML state machines |\n| 4 Notion Clean | Excellent | Clean for documentation |\n| 5 Glassmorphism | Poor | Distracts from state transitions |\n| 6 Claude Official | Excellent | Readable |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Good | High contrast for state transitions; editorial quality |\n\n## Network Topology\n| Style | Suitabili |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful device icons |\n| 2 Dark Terminal | Excellent | Cyberpunk-style network maps |\n| 3 Blueprint | Excellent | Ideal for infrastructure docs |\n| 4 Notion Clean | Good | Clean for IT documentation |\n| 5 Glassmorphism | Good | Striking for presentations |\n| 6 Claude Official | Good | Professional network diagrams |\n| 7 OpenAI Official | Good | Clean infrastructure diagrams |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Deep black classic for infrastructure docs; gold topology lines pop |\n\n## Comparison / Feature Matrix\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded checkmarks |\n| 2 Dark Terminal | Good | Works for dev tool comparisons |\n| 3 Blor | Grid conflicts with table layout |\n| 4 Notion Clean | Excellent | Perfect for Notion-embedded tables |\n| 5 Glassmorphism | Poor | Distabular data |\n| 6 Claude Official | Excellent | Clean, warm |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Fair | Dark bg non-standard for comparison tables; use cautiously |\n\n## Timeline / Gantt\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful bars by category |\n| 2 Dark Terminal | Good | Works for dev roadmaps |\n| 3 Blueprint | Good | Formal project plans |\n| 4 Notion Clean | Excellent | Ideal for Notion project docs |\n| 5 Glassmorphism | Good | Striking for keynote presentations |\n| 6 Claude Official | Good | Warm, professional |\n| 7 OpenAI Official | Good | Clean timeline |\n| 8 Dark Luxury *(AI-authored)* | Good | Premium project roadmaps and keynote presentations |\n\n## Agent / Memory Architecture\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful layers, engaging |\n| 2 Dark Terminal | Excellent | Popular for AI/ML blog posts |\n| 3 Blueprint | Good | Formal AI system documentation |\n| 4 Notion Clean | Good | Clean for AI research notes |\n| 5 Glassmorphism | Excellent | Stunning for AI product presentations |\n| 6 Claude Official | Excellent | Anthropic AI aesthetic |\n| 7 OpenAI Official | Excellent | OpenAI AI aesthetic |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Best for premium AI system docs; champagne gold on deep black |\n","skills/fireworks-tech-graph/references/svg-layout-best-practices.md":"# SVG Technical Diagram Layout Best Practices\n\n## Universal Layout Rules (Apply to All Styles)\n\n### 1. Component Spacing\n- **Minimum clearance between components**: 80px (edge to edge)\n- **Minimum clearance for arrow paths**: 60px from component edges\n- **Layer vertical spacing**: 120px between horizontal layers\n- **Same-layer horizontal spacing**: 100-120px between components\n\n### 2. Arrow Routing & Connection Points\n\n#### Connection Point Rules\n- **Never connect arrows to component corners** - use midpoints of edges\n- **Entry/exit points**:\n - Top edge: `cx ± offset` where offset = 0 for single arrow, ±30px for multiple\n - Bottom edge: same rule\n - Left/right edges: `cy ± offset`\n- **Clearance from corners**: minimum 20px\n\n#### Arrow Path Routing\n- **Avoid diagonal lines crossing components** - use orthogonal routing (L-shaped paths)\n- **For curved arrows**:\n - Control point should be at least 40px away from any component edge\n - Use intermediate waypoints for complex routing: `M x1,y1 L x2,y2 Q cx,cy x3,y3`\n- **Multiple arrows between same layers**: stagger Y-coordinates by 15-20px to avoid overlap\n\n#### Arrow Overlap Prevention\n```svg\n\n\n\n\n\n\n\n\n\n```\n\n### 3. Arrow Label Placement\n- **Position**: midpoint of arrow path, offset by 5-10px perpendicular to arrow direction\n- **Offset first**: move the label 5-10px perpendicular to the arrow so it does not sit on the stroke\n- **Background rect fallback**: include only when offsetting cannot avoid another visual element, with:\n - Padding: 4px horizontal, 2px vertical\n - Fill: match background color\n - Opacity: 0.9-0.95\n- **Safety distance**: 15px minimum from any component edge\n- **Multiple converging arrows**: stagger label positions vertically by 20px\n\n### 4. Component Overlap Detection\nBefore finalizing SVG, check:\n- No component bounding boxes overlap (8px safety margin)\n- No arrow paths pass through component interiors (except intentional tunneling with dashed style)\n- No text labels overlap with components or other labels\n\n### 5. Z-Index Layering (SVG render order)\n```svg\n\n1. Background rect\n2. Grouping containers (dashed rects)\n3. Arrow paths\n4. Arrow label background rects when collision fallback is needed\n5. Components (boxes, cylinders, etc.)\n6. Component text\n7. Arrow label text\n8. Legend\n```\n\n## Style-Specific Enhancements\n\n### Style-1: Flat Icon Clean\n- **Perfect alignment**: snap all coordinates to 8px grid\n- **Sharp corners**: rx=\"8\" ry=\"8\" for rounded rects (consistent)\n- **Arrows**: thin (1.5-2px), filled polygon markers\n- **No shadows**: flat design principle\n\n### Style-6: Claude Official Warm\n- **Soft shadows**: ``\n- **Rounded corners**: rx=\"12\" ry=\"12\" (more rounded than Style-1)\n- **Arrows**: medium weight (2px), subtle markers\n\n## Validation Checklist\n\nBefore exporting PNG, verify:\n- [ ] No arrow-component overlaps (visual inspection)\n- [ ] Arrow labels are offset from lines; fallback background rects are used only where needed\n- [ ] Minimum 60px clearance for all arrow paths\n- [ ] Component spacing ≥ 80px\n- [ ] Arrow connection points avoid corners (≥20px from corner)\n- [ ] Multiple arrows between layers are staggered\n- [ ] Legend is readable and doesn't overlap content\n- [ ] SVG renders cleanly via `cairosvg` (or `rsvg-convert` as fallback)\n\n## Common Anti-Patterns to Avoid\n\n| Anti-Pattern | Fix |\n|--------------|-----|\n| Arrow crosses component | Use orthogonal routing, increase control point distance |\n| Label overlaps component | Increase offset; add a matching-background rect if the collision remains |\n| Components too close | Increase spacing to 80px minimum |\n| Arrow connects to corner | Move connection point to edge midpoint offset |\n| No z-index planning | Follow render order: arrows -> components -> text |\n","skills/fireworks-tech-graph/references/visual-quality.md":"# Visual quality and exact text\n\n## Readability\n\nThe generator retains each style's palette, material, radius, stroke and motion\nsignature. `scripts/style_quality.py` strengthens supporting text on its default\nopaque canvas toward a 4.5:1 contrast target. This is a token-level measurement,\nnot certification for custom fills, translucent glass, font size or every pixel.\nInspect the final raster at the intended reading size.\n\n- Flat Icon / Notion / OpenAI: keep quiet white space, make captions and section\n labels readable instead of using nearly invisible gray.\n- Dark Terminal / Ops Pulse: retain accent-coded routes and dark surfaces; lift\n auxiliary text, not glow intensity. Keep status identifiable by text as well as color.\n- Blueprint: preserve the engineering grid, cyan linework and registration details.\n- Glassmorphism: keep the panel translucency; test text on the composited panel.\n- Claude: retain warm paper and brown hierarchy with readable secondary text.\n- C4 Review Canvas: preserve responsibilities and protocols; use both description\n lines for Chinese as well as spaced words. Never hide an essential responsibility.\n- Cloud Fabric: preserve region/VPC nesting; strengthen ownership labels without\n introducing competing connector colors.\n- Event Transit: preserve route directions, station ordering and the distinct DLQ.\n- Dark Luxury: keep the AI-authored restrained gold/serif composition; exact text,\n geometry and visual checks apply just as they do to generated styles.\n\n## Text completeness\n\n`layout.json.typography` reports visible truncation, full source copy and a recovery\nhint. `data-full-text` preserves provenance but does not make hidden text visible.\nUse `text_policy: \"strict\"` to reject truncation. Widen the card, use an approved\nshort label, or split views. CJK descriptions wrap at character boundaries rather\nthan discarding the second line. Font width estimates remain heuristic; Noto Sans\nCJK SC is included as a cross-platform fallback, not bundled or auto-installed.\n\n## Export and verification\n\nPrefer the unified `export-png` command, 1920px by default. Its root-canvas parser\nsupports viewBox-only SVG, decimal/physical dimensions and nonzero SVG origins;\nthe JSON layout generator itself uses origin 0 0. Export rejects oversized images\nand active/external SVG content. Confirm PNG dimensions and inspect actual text.\n\nUse the public style fixtures for identity, the shared quality-baseline fixtures\nfor comparison, and long-text fixtures/tests for readability. Adding metadata or\npassing XML checks alone never proves a visually successful diagram.\n","skills/fireworks-tech-graph/schemas/architecture-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/architecture-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"architecture\" } } }\n ]\n}\n","skills/fireworks-tech-graph/schemas/diagram-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/diagram-v1.schema.json\",\n \"title\": \"Fireworks Tech Graph Diagram v1\",\n \"type\": \"object\",\n \"required\": [\"schema_version\", \"mode\", \"nodes\", \"arrows\"],\n \"properties\": {\n \"schema_version\": { \"const\": 1 },\n \"mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"style\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"visual_theme\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"diagram_type\": { \"type\": \"string\", \"minLength\": 1 },\n \"semantic_profile\": {\n \"enum\": [\"generic\", \"c4-review\", \"cloud-fabric\", \"event-transit\", \"ops-pulse\"]\n },\n \"c4_level\": { \"enum\": [\"context\", \"container\", \"component\"] },\n \"review_state\": { \"type\": \"string\", \"minLength\": 1 },\n \"rough_seed\": { \"type\": \"integer\" },\n \"scope\": { \"type\": \"string\", \"minLength\": 1 },\n \"platform_profile\": { \"enum\": [\"provider-neutral\", \"aws\", \"azure\", \"gcp\", \"kubernetes\"] },\n \"deployment_mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_manifest_version\": { \"type\": \"string\", \"minLength\": 1 },\n \"line_code\": { \"type\": \"string\", \"minLength\": 1 },\n \"observation_window\": { \"type\": \"string\", \"minLength\": 1 },\n \"critical_path\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"uniqueItems\": true,\n \"items\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"topics\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"maxItems\": 4,\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"color\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"color\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"additionalProperties\": true\n }\n },\n \"text_policy\": { \"enum\": [\"report\", \"strict\"] },\n \"viewBox\": { \"type\": \"string\", \"description\": \"Four finite numbers, origin 0 0 and positive width and height; validated by the CLI.\" },\n \"quality_profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"composition\": {\n \"type\": \"object\",\n \"properties\": {\n \"profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"max_bends_per_edge\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_total_bends\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_route_stretch\": { \"type\": \"number\", \"minimum\": 0 },\n \"max_bridged_crossings\": { \"type\": \"integer\", \"minimum\": 0 },\n \"min_node_gap\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_container_gutter\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_label_clearance\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_segment_length\": { \"type\": \"number\", \"minimum\": 0 }\n },\n \"additionalProperties\": false\n },\n \"legend_orientation\": { \"enum\": [\"vertical\", \"horizontal\"] },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"containers\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"x\", \"y\", \"width\", \"height\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"nodes\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"c4_type\": { \"enum\": [\"person\", \"software_system\", \"external_system\", \"container\", \"component\"] },\n \"description\": { \"type\": \"string\" },\n \"technology\": { \"type\": \"string\" },\n \"deployment_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"transit_role\": { \"enum\": [\"producer\", \"station\", \"junction\", \"consumer\", \"dlq\", \"state_store\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"station_order\": { \"type\": \"integer\", \"minimum\": 0 },\n \"consumer_group\": { \"type\": \"string\", \"minLength\": 1 },\n \"ops_role\": { \"enum\": [\"service\", \"collector\", \"trace_span\"] },\n \"span_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent_span\": { \"type\": \"string\", \"minLength\": 1 },\n \"start_ms\": { \"type\": \"number\", \"minimum\": 0 },\n \"duration_ms\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"signals\": {\n \"type\": \"object\",\n \"required\": [\"latency\", \"traffic\", \"errors\", \"saturation\"],\n \"properties\": {\n \"latency\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"traffic\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"errors\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"saturation\": { \"$ref\": \"#/$defs/goldenSignal\" }\n },\n \"additionalProperties\": false\n },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"arrows\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"source\": { \"type\": \"string\" },\n \"target\": { \"type\": \"string\" },\n \"edge_kind\": { \"enum\": [\"business\", \"telemetry\"] },\n \"transit_type\": { \"enum\": [\"rail\", \"publish\", \"branch\", \"consume\", \"retry\", \"state\", \"dead_letter\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"protocol\": { \"type\": \"string\", \"minLength\": 1 },\n \"via\": { \"type\": \"string\", \"minLength\": 1 },\n \"route_points\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"array\",\n \"prefixItems\": [{ \"type\": \"number\" }, { \"type\": \"number\" }],\n \"items\": false,\n \"minItems\": 2,\n \"maxItems\": 2\n }\n }\n },\n \"additionalProperties\": true\n }\n }\n },\n \"$defs\": {\n \"goldenSignal\": {\n \"type\": \"object\",\n \"required\": [\"value\", \"unit\", \"window\", \"status\"],\n \"properties\": {\n \"value\": { \"type\": [\"string\", \"number\"] },\n \"unit\": { \"type\": \"string\", \"minLength\": 1 },\n \"window\": { \"type\": \"string\", \"minLength\": 1 },\n \"status\": { \"enum\": [\"ok\", \"warn\", \"critical\", \"unknown\"] }\n },\n \"additionalProperties\": false\n }\n },\n \"additionalProperties\": true\n}\n","skills/fireworks-tech-graph/schemas/sequence-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/sequence-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"sequence\" } } }\n ]\n}\n","skills/fireworks-tech-graph/schemas/workflow-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/workflow-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"enum\": [\"flowchart\", \"agent\", \"state-machine\"] } } }\n ]\n}\n","skills/fireworks-tech-graph/scripts/README.md":"# Fireworks Tech Graph - Scripts\n\n辅助脚本集合，用于提高 SVG 图表生成的稳定性和效率。\n\n## 脚本列表\n\n### 1. validate-svg.sh\n\nSVG 验证脚本，检查 SVG 语法并报告详细错误。\n\n**用法：**\n```bash\n./validate-svg.sh \n```\n\n**检查项目：**\n- XML 结构、属性语法和实体转义（使用 XML parser，避免把 `top_k=5` 之类的文本误判为属性）\n- `marker-start` / `marker-mid` / `marker-end` 引用完整性\n- 箭头与组件碰撞（支持绝对/相对 `M/L/H/V/Q/C/S/T` 路径，曲线路径采样检测）\n- 渲染验证（cairosvg 优先，rsvg-convert 兜底）\n\n**示例：**\n```bash\n./validate-svg.sh /path/to/diagram.svg\n```\n\n### 2. generate-diagram.sh\n\nSVG 图表生成脚本，提供自动验证和 PNG 导出。\n\n**用法：**\n```bash\n./generate-diagram.sh [OPTIONS]\n```\n\n**选项：**\n- `-t, --type TYPE` - 图表类型（见脚本帮助）\n- `-s, --style STYLE` - 风格编号（1-12，默认：1）\n- `-o, --output PATH` - 输出路径（默认：当前目录）\n- `-w, --width WIDTH` - PNG 宽度（像素，默认：1920）\n- `--no-validate` - 跳过验证\n- `-h, --help` - 显示帮助\n\n**示例：**\n```bash\n# 生成架构图（Style 1）\n./generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg\n\n# 生成流程图（Style 2，2400px 宽）\n./generate-diagram.sh -t flowchart -s 2 -w 2400\n```\n\n**注意：** SVG 内容需要先准备好；这个脚本只负责验证与导出。\n\n### 3. generate-from-template.py\n\n基于风格配置和 JSON 数据生成 SVG。当前版本不再只是简单塞入 `nodes/arrows`，\n而是会执行 style guide 中的部分可计算规则，例如：\n\n- `style` - 风格编号（1-12）或规范风格名\n- `semantic_profile` - 可选语义契约；Style 9-12 默认分别启用 C4、云部署、事件流和可观测性契约\n- `containers` - 泳道 / 分组容器\n- `containers[].header_prefix` / `containers[].header_text` - 工程编号式分区标题\n- `containers[].side_label` - 左侧 layer label\n- `nodes[].kind` - 语义组件类型，例如 `double_rect`、`cylinder`、`document`、`terminal`、`circle_cluster`\n- `arrows[].flow` - 语义箭头类型，例如 `control`、`write`、`read`、`data`\n- `source_port` / `target_port` - 指定端口锚点\n- `route_points` / `corridor_x` / `corridor_y` - 控制复杂图的走线质量\n- `style_overrides` - 对现有 style 做局部覆盖\n- `window_controls` / `meta_*` - 顶部终端 chrome\n- `blueprint_title_block` - 工程蓝图右下角 title block\n\n**用法：**\n```bash\npython3 ./generate-from-template.py architecture ./output/arch.svg '{\"style\":1,\"title\":\"My Diagram\",\"containers\":[],\"nodes\":[],\"arrows\":[]}'\n```\n\n**示例：**\n```bash\npython3 ./generate-from-template.py memory ./output/mem0.svg '{\n \"style\": 1,\n \"title\": \"Mem0 Memory Architecture\",\n \"containers\": [\n {\"x\":30,\"y\":90,\"width\":900,\"height\":90,\"label\":\"Input Layer\",\"header_prefix\":\"01\"}\n ],\n \"nodes\": [\n {\"id\":\"manager\",\"kind\":\"double_rect\",\"x\":360,\"y\":220,\"width\":300,\"height\":72,\"label\":\"Memory Manager\"},\n {\"id\":\"vector\",\"kind\":\"cylinder\",\"x\":90,\"y\":360,\"width\":140,\"height\":110,\"label\":\"Vector Store\"}\n ],\n \"arrows\": [\n {\"source\":\"manager\",\"target\":\"vector\",\"flow\":\"write\",\"dashed\":true}\n ]\n}'\n```\n\n### 4. test-all-styles.sh\n\n批量测试脚本覆盖 12 种风格。Style 1-7 与 9-12 从 JSON fixture 生成，AI 手绘的 Style 8 使用静态 SVG fixture；任何风格缺少回归 fixture 都会使批测失败。\n\n**用法：**\n```bash\n./test-all-styles.sh\n```\n\n**功能：**\n- 检查所有风格的参考文件\n- 渲染 `fixtures/*.json` 回归样例\n- 验证生成出的 SVG 文件\n- 导出 PNG 文件到 `test-output/` 目录\n- 生成测试报告\n\n**输出：**\n- 测试摘要（通过/失败统计）\n- PNG 文件（带时间戳）\n- 详细的验证错误信息\n\n**示例：**\n```bash\n./test-all-styles.sh\n```\n\n## 依赖\n\n所有脚本需要至少一个 PNG 渲染器（推荐 cairosvg）：\n\n- **cairosvg**（推荐）- SVG 转 PNG，CSS 支持最好\n ```bash\n python3 -m pip install cairosvg\n ```\n\n- **rsvg-convert**（备选）- 系统包；复杂 SVG 可能丢失 CSS / ``\n ```bash\n brew install librsvg # macOS\n sudo apt install librsvg2-bin # Ubuntu/Debian\n ```\n\n`generate-diagram.sh` 会优先调用 cairosvg，缺失时自动回退到 rsvg-convert。完整对比见 [PNG 导出参考](../references/png-export.md)。\n\n聚焦后的语义动效由 `fireworks.py animate`、`motion.py` 和 `svg2gif.js` 协作完成，只接收带有 12 套已验收 role/stage/order 契约之一的生成器语义 SVG。精确源文件字节不锁定，但任意同风格拓扑不会自动套用动效。媒体输出只允许经过验证的 GIF，默认还会生成同名 `.motion.json` 报告。运行时需要 FFmpeg/FFprobe、Chrome/Chromium，以及 Skill 安装位置可解析到的 `puppeteer` 或 `puppeteer-core`；当前工作目录中的同名模块不会被隐式执行。依赖安装与最简命令：\n\n```bash\nfor SKILL_ROOT in \\\n \"$HOME/.agents/skills/fireworks-tech-graph\" \\\n \"$HOME/.claude/skills/fireworks-tech-graph\"\ndo\n [ -d \"$SKILL_ROOT\" ] || continue\n npm install --prefix \"$SKILL_ROOT\" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0\ndone\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" animate diagram.svg diagram.gif\n```\n\n默认自动识别风格，输出 5.75 秒、20fps、960px 宽、115 帧无限循环 GIF。第 1–36 帧保持既有 draw-on，第 36–38 帧淡入运行流，第 38–109 帧为完整稳定数据流，第 110–114 帧按 `[1,.7575,.515,.2725,.03]` reset。Style 1–12 的 signature、速度、路径、几何和构建合同均为 `user-approved`，包括 `persistent-data-flow-head`、`terminal-evidence-stream`、`blueprint-registration-bead`、14×10 `notion-memory-card`、`glass-task-capsule`、`policy-seal`、`token-train`、`gem-tracer`、`review-cursor`、region chevrons、event train 与 ops scanner；共享 `+2s-settled-flow` 时间修订也已于 2026-07-17 验收，默认新包的 `review_status` 为 `user-approved`。显式 3.75 秒/75 帧和 2.75 秒/55 帧继续支持。75 帧及以下要求全部 raster 唯一；更长时间线允许非相邻重复出现在 full-opacity 区间，frame 110 是 reset opacity 为 1.00 的唯一例外并分类为 `intentional_reset_boundary_repeat`，frame 111–114 必须全局不同；至少保留 75 个唯一 raster 且相邻重复数为零。75-vs-115 gate 分开统计 binary / decoded-RGBA / guarded-antialias 三类；guarded 等价要求 AE ≤ 128、normalized RMSE ≤ 0.001、component 宽或高不超过 2px 且只落在 edge/node border，DOM 和 signature geometry 仍 strict-exact。完整约束见 [动效参考](../references/motion-effects.md)。\n\n- **grep, sed, awk** - 文本处理（macOS 自带）\n\n## 目录结构\n\n```\nfireworks-tech-graph/\n├── SKILL.md # Skill 主文档\n├── references/ # 风格参考文件\n│ ├── style-1-flat-icon.md\n│ ├── style-2-dark-terminal.md\n│ └── ...\n├── fixtures/ # 回归测试样例（JSON）\n│ ├── mem0-style1.json\n│ ├── tool-call-style2.json\n│ └── ...\n├── scripts/ # 辅助脚本（本目录）\n│ ├── README.md # 本文档\n│ ├── validate-svg.sh # SVG 验证\n│ ├── generate-diagram.sh # SVG 验证与 PNG 导出\n│ ├── generate-from-template.py # 模板化生成 SVG\n│ ├── motion.py # SVG 转 GIF 校验、编码与原子报告\n│ ├── svg2gif.js # Chromium 手动时间轴逐帧渲染\n│ └── test-all-styles.sh # 批量测试\n└── test-output/ # 测试输出目录（自动创建）\n```\n\n## 使用场景\n\n### 场景 1：验证现有 SVG\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/validate-svg.sh\" /path/to/your-diagram.svg\n```\n\n### 场景 2：生成并验证图表\n\n1. 使用 Codex 或 Claude Code 生成 SVG 内容\n2. 运行验证和导出：\n ```bash\n SKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n # SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n \"$SKILL_ROOT/scripts/generate-diagram.sh\" -t architecture -s 1 -o ./output/arch.svg\n ```\n\n### 场景 3：批量测试所有风格\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/test-all-styles.sh\"\n```\n\n测试脚本会自动：\n1. 读取 `../fixtures/*.json`\n2. 按 `template_type + style` 调用 `generate-from-template.py`\n3. 运行 `validate-svg.sh`\n4. 导出 PNG 到 `../test-output/`\n\n### 场景 4：validator 单元测试\n\n```bash\npython3 -m unittest discover -s tests -p 'test_validate_svg.py' -v\n```\n\n覆盖 marker 双端引用、文本等号、`H/V` 路径、曲线路径、虚线组件和容器排除等正反例。\n\n对启发式难以区分的形状，可显式添加 `data-graph-role=\"node|container|legend|decoration|label|background\"`。`node` 会强制纳入障碍物检测，其余角色会从组件障碍物中排除；`legend` 组内的示例箭头也不会被当作业务流。\n\n查看测试输出：\n```bash\nls -lh ../test-output/\n```\n\n## 故障排除\n\n### 问题：找不到 PNG 渲染器\n\n**解决方案（任选其一，推荐 cairosvg）：**\n```bash\npython3 -m pip install cairosvg # 推荐\nbrew install librsvg # macOS 系统包\nsudo apt install librsvg2-bin # Ubuntu/Debian\n```\n\n### 问题：rsvg-convert 渲染缺框/缺文字\n\n**原因：** rsvg-convert 对 ``、CSS `filter`、复杂 `` — no external `@import` (cairosvg / rsvg-convert cannot fetch external URLs)\n- ``: arrow markers, gradients, filters, clip paths\n- Text: minimum 12px, prefer 13-14px labels, 11px sub-labels, 16-18px titles\n- All arrows: `` with `markerEnd`, sized `markerWidth=\"10\" markerHeight=\"7\"`\n- Drop shadows: `` in ``, apply sparingly (key nodes only)\n- Curved paths: use `M x1,y1 C cx1,cy1 cx2,cy2 x2,y2` cubic bezier for loops/feedback arrows\n- Clip content: use `` if text might overflow a node box\n- Z-order (drawing order): SVG uses painter's model — later elements cover earlier ones. Recommended layer order (bottom → top): ① canvas background ② dashed containers / region backgrounds ③ arrows and connection lines ④ node shapes (rects, circles) ⑤ text labels and annotations ⑥ legends and overlays. When arrows pass near text, draw arrows BEFORE text so text stays readable. Adjust per diagram needs — this is guidance, not rigid.\n\n## SVG Generation & Error Prevention\n\n**Example: Python List Method.** Use a maintainable SVG/XML generator that passes the same geometry, text and export checks:\n```python\npython3 << 'EOF'\nlines = []\nlines.append('')\nlines.append(' ')\n# ... each line separately\nlines.append('')\n\nwith open('/path/to/output.svg', 'w') as f:\n f.write('\\n'.join(lines))\nprint(\"SVG generated successfully\")\nEOF\n```\n\n**Why mandatory**: Prevents character truncation, typos, and syntax errors. Each line is independent and easy to verify.\n\n**Pre-Tool-Call Checklist** (CRITICAL - use EVERY time):\n1. ✅ Can I write out the COMPLETE command/content right now?\n2. ✅ Do I have ALL required parameters ready?\n3. ✅ Have I checked for syntax errors in my prepared content?\n\n**If ANY answer is NO**: STOP. Do NOT call the tool. Prepare the content first.\n\n**Error Recovery Protocol**:\n- **First error**: Analyze root cause, apply targeted fix\n- **Second error**: Switch method entirely (Python list → chunked generation)\n- **Third error**: STOP and report to user - do NOT loop endlessly\n- **Never**: Retry the same failing command or call tools with empty parameters\n\n**Validation** (run after generation):\n```bash\npython3 -c \"import xml.etree.ElementTree as ET; ET.parse('file.svg')\" && echo \"✓ Valid XML\"\n# Or use cairosvg as a render-time check:\npython3 -c \"import cairosvg; cairosvg.svg2png(url='file.svg', write_to='/tmp/test.png')\" && echo \"✓ Renders\" && rm /tmp/test.png\n```\n\n**If using `generate-from-template.py`**:\n- Prefer `source` / `target` node ids in arrow JSON so the generator can snap to node edges\n- Keep `x1,y1,x2,y2` as hints or fallback coordinates, not the main routing primitive\n- Let the generator choose orthogonal routes; avoid hardcoding center-to-center straight lines unless the path is guaranteed clear\n\n**Common Syntax Errors to Avoid**:\n- ❌ `yt-anchor` → ✅ `y=\"60\" text-anchor=\"middle\"`\n- ❌ `x=\"390` (missing y) → ✅ `x=\"390\" y=\"250\"`\n- ❌ `fill=#fff` → ✅ `fill=\"#ffffff\"`\n- ❌ `marker-end=` → ✅ `marker-end=\"url(#arrow)\"`\n- ❌ `L 29450` → ✅ `L 290,220`\n- ❌ Missing `` at end\n- ❌ Element with `filter` near viewBox edge — filter region extends 20% (default) or more beyond bbox; if that region exceeds viewBox, Chrome/cairosvg clip the filter rendering AND can drop the element's own stroke on that side. Keep filtered elements at least `max(20% of element size, shadow blur radius × 3)` away from viewBox edges, or omit the filter.\n\n## Output\n\n- **Default**: `./[derived-name].svg` and `./[derived-name].png` in current directory\n- **Custom**: user specifies path with `--output /path/` or `输出到 /path/`\n- **PNG / motion export**: see **SVG → PNG Conversion** below and `$SKILL_ROOT/references/motion-effects.md`\n\n## SVG → PNG Conversion\n\nUse `$SKILL_ROOT/scripts/generate-diagram.sh` by default. Load `$SKILL_ROOT/references/png-export.md` only when selecting a renderer manually, handling CJK/emoji fallback, converting browser-generated SVG, or using the bundled Puppeteer converter.\n\n## Styles\n\n| # | Name | Background | Best For |\n|---|------|-----------|----------|\n| 1 | **Flat Icon** (default) | White | Blogs, docs, presentations |\n| 2 | **Dark Terminal** | `#0f0f1a` | GitHub, dev articles |\n| 3 | **Blueprint** | `#0a1628` | Architecture docs |\n| 4 | **Notion Clean** | White, minimal | Notion, Confluence, wikis |\n| 5 | **Glassmorphism** | Dark gradient | Product sites, keynotes |\n| 6 | **Claude Official** | Warm cream `#f8f6f3` | Anthropic-style diagrams |\n| 7 | **OpenAI Official** | Pure white `#ffffff` | OpenAI-style diagrams |\n| 8 | **Dark Luxury** *(AI-authored)* | `#0a0a0a` deep black | Architecture docs, premium editorial — hand-craft SVG from `$SKILL_ROOT/references/style-8-dark-luxury.md` |\n| 9 | **C4 Review Canvas** | Warm paper `#f7f2e8` | C4 reviews and ADRs; enforces one abstraction level |\n| 10 | **Cloud Fabric** | Cloud blue `#edf5fb` | Region/network/workload deployment ownership |\n| 11 | **Event Transit** | Transit paper `#fbf7ee` | Topics, processors, consumer groups, DLQ, state |\n| 12 | **Ops Pulse** | Ops navy `#07111f` | Golden signals, critical paths, correlated traces |\n\nLoad the matching `$SKILL_ROOT/references/style-N-*.md` for exact color tokens and SVG patterns.\n\n## Style Selection\n\n**Default**: Style 1 (Flat Icon) for most diagrams. Load `$SKILL_ROOT/references/style-diagram-matrix.md` for detailed style-to-diagram-type recommendations.\n\nPrompt fingerprints: `C4评审画布/C4 review board` → 9; `多区域云部署/deployment topology` → 10; `事件地铁图/event metro map` → 11; `可靠性脉冲/golden signals trace` → 12; `让这张图动起来/生成 GIF/制作 GIF/animate this diagram/Generate a GIF` → auto motion.\nAuto-select these only with matching domain evidence; otherwise use Styles 1–7 or `semantic_profile: \"generic\"`, and split mixed C4/deployment/event/ops views.\n\nThese patterns appear frequently — internalize them:\n\n**RAG Pipeline**: Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response\n**Agentic RAG**: adds Agent loop with Tool use between Query and LLM\n**Agentic Search**: Query → Planner → [Search Tool / Calculator / Code] → Synthesizer → Response\n**Mem0 / Memory Layer**: Input → Memory Manager → [Write: VectorDB + GraphDB] / [Read: Retrieve+Rank] → Context\n**Agent Memory Types**: Sensory (raw input) → Working (context window) → Episodic (past interactions) → Semantic (facts) → Procedural (skills)\n**Multi-Agent**: Orchestrator → [SubAgent A / SubAgent B / SubAgent C] → Aggregator → Output\n**Tool Call Flow**: LLM → Tool Selector → Tool Execution → Result Parser → LLM (loop)\n","skills/fireworks-tech-graph/references/icons.md":"# Icon Reference\n\n## Rules for Renderer Compatibility (cairosvg / rsvg-convert)\n\n**Never use** `@import url()` for icon fonts — neither cairosvg nor rsvg-convert fetches external resources.\n**Always use** inline SVG ``, ``, ``, `` combinations.\n**Font fallback**: embed font-family in `\n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-10-cloud-fabric.md":"# Style 10: Cloud Fabric\n\nA deployment-topology view for regions, VPCs/networks, compute, data stores,\nand cross-boundary traffic. It answers “where does this run?” without turning\nthe diagram into a vendor icon poster.\n\n## Best fit\n\n- Multi-region and disaster-recovery reviews\n- Cloud deployment and network ownership maps\n- Kubernetes cluster/namespace placement\n- Migration plans and platform boundary discussions\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#edf5fb` with a restrained blue grid |\n| Card | `#ffffff` |\n| Primary text | `#102a43` |\n| Boundary | `#7fa3c2` |\n| Traffic | `#2563eb` |\n| Write | `#ea580c` |\n| Data | `#059669` |\n| Cross-region | `#7c3aed`, dashed |\n\nNested boundaries carry a small `GLOBAL`, `REGION`, or `NETWORK` badge. Nodes\nuse a manifest-backed neutral glyph plus provider metadata. A colored ownership\nspine makes each nested deployment boundary readable even in grayscale.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"cloud-fabric\"` and provide:\n\n- `diagram_type: \"deployment\"`\n- `platform_profile`: `provider-neutral`, `aws`, `azure`, `gcp`, or `kubernetes`\n- `icon_manifest_version: \"2026.07-neutral.1\"`\n- at least one `deployment_kind: \"region\"` boundary\n- every node: `deployment_id` and a manifest-backed `icon_id`\n- every cross-deployment edge: a non-empty `via`\n\nBoundary parents must form an acyclic tree, nesting depth is capped at four,\nchild boundaries stay at least `16px` inside their parent, and nodes stay at\nleast `20px` inside their assigned deployment.\n\n## Icon policy\n\nThe bundled manifest contains provider-neutral geometric glyphs. It records\nofficial AWS, Azure, and Google Cloud asset URLs as adapter metadata; it does\nnot redistribute vendor trademarks. If a user supplies an official icon pack,\npreserve its license and version outside this repository and map it through the\nmanifest boundary.\n\nNever invent a vendor service logo. Unknown `icon_id` values fail validation.\n\n## Composition rules\n\n- Show deployment ownership through nesting, not background color alone\n- Use a shallow `global → region → network` hierarchy where possible\n- Keep ingress paths vertical and regional data paths aligned\n- Name cross-boundary mechanisms (`peering`, `transit gateway`, `service mesh`)\n- Zero crossings in official samples; use no more than two bends per edge\n- Do not encode both logical service architecture and every subnet in one view\n- Reserve the icon/provider area before fitting text; no title or subtitle may cross a card edge\n- Place ingress mechanism labels in inter-boundary whitespace, clear of Region and Network headers\n\n## Signature checklist\n\n- Pale cloud grid and explicit `global → region → network` nesting\n- Ownership spines plus `GLOBAL`, `REGION`, and `NETWORK` boundary badges\n- Manifest-backed globe, compute, database, gateway, stream, or observe glyphs\n- Top-right platform/region/deployment-mode stamp and named cross-boundary mechanisms\n\n## Prompt cues\n\n- English: `multi-region deployment map`, `cloud landing zone map`, `region/VPC ownership map`\n- 中文：`多区域部署图`、`云部署拓扑`、`Region/VPC 归属图`\n- Copyable cue: `Use Style 10 Cloud Fabric; show global ingress, Region and VPC ownership, neutral cloud glyphs, deployment mode, and every cross-boundary mechanism.`\n\n## Do not blend with\n\nDo not use C4 abstraction labels, transit-map station numbering, or live SRE\nmetric cards. When deployment evidence is absent, fall back to a generic Style\n1–7 architecture view instead of inventing cloud ownership.\n\n## Fixture\n\n`fixtures/cloud-fabric-style10.json` demonstrates active-active checkout\ndeployment with two regions, explicit VPC ownership, and neutral glyphs.\n","skills/fireworks-tech-graph/references/style-11-event-transit.md":"# Style 11: Event Transit\n\nA transit-map metaphor for event-driven systems. Topics are rails, processing\nsteps are stations, declared junctions are branch points, and dead letters get\na visibly separate route.\n\n## Best fit\n\n- Kafka/Pulsar/NATS topology reviews\n- Event choreography and consumer-group discussions\n- Stream processing, retry, and DLQ runbooks\n- Schema evolution and materialized-view pipelines\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#fbf7ee` with transit dots |\n| Card | `#fffdf8` |\n| Primary rail | `#e4475b` |\n| State projection | `#00897b` |\n| Read/consumer | `#2563eb` |\n| DLQ | `#c62828`, dashed |\n| Text | `#17213c` |\n\nThe dark casing beneath a rail is decoration. The colored path with\n`data-graph-role=\"edge\"` remains the ordinary semantic connector. Semantic\nrails use a maximum `2.8px` stroke and fixed user-space arrowheads so markers do\nnot grow with line width.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"event-transit\"` and provide:\n\n- `diagram_type: \"event_stream\"`\n- one to four topics, each with unique `id` and `color`\n- every node: `transit_role` and optional/required topic metadata\n- stations/junctions: `operation`\n- consumers: `consumer_group`\n- rail stations: unique integer `station_order`\n- rail edges: `transit_type: \"rail\"`, topic id, `right → left` ports\n\nA rail edge must connect consecutive station orders on one horizontal\ncenterline with at least `64px` clearance. A dead-letter edge must target a\nreal `dlq` node. Multiple rail departures are only valid from a `junction`.\n\n## Composition rules\n\n- One horizontal centerline per topic rail\n- Use branches only where the node is declared as a junction\n- Put DLQ and state-store terminals below their owning station\n- Reserve dashed red for dead-letter/retry semantics\n- Show partition, lag, or schema facts as short badges\n- Zero bridge crossings and no duplicated rail overlay in official samples\n- Keep at least `64px` clear rail between adjacent station cards\n- Use compact user-space arrowheads and a subtle casing; the semantic rail stays at or below `2.8px`\n\n## Signature checklist\n\n- Dark top-right `EVENT METRO` line stamp and a signed topic-line count\n- Numbered station medallions, compact midpoint chevrons, and one rail centerline per topic\n- Distinct junction dot, dashed DLQ terminal with `×`, and state-store terminal with a square glyph\n- Partition, schema, latency, fan-out, lag, replay, and state badges attached to stations\n\n## Prompt cues\n\n- English: `event metro map`, `topic rail map`, `Kafka topology`, `stream choreography map`\n- 中文：`事件地铁图`、`事件轨道图`、`Topic 线路图`、`Kafka 拓扑图`\n- Copyable cue: `Use Style 11 Event Transit; render topics as thin metro rails, processors as numbered stations, declared junctions, consumer groups, DLQ, and state projections.`\n\n## Do not blend with\n\nDo not nest Region/VPC deployment boundaries, label cards as C4 containers, or\nattach golden-signal dashboards to every station. A request/response flow with\nno topic, consumer-group, or stream evidence should use a generic flow style.\n\n## Fixture\n\n`fixtures/event-transit-style11.json` shows a checkout event line with schema\nvalidation, fraud enrichment, a declared junction, DLQ, and materialized state.\n","skills/fireworks-tech-graph/references/style-12-ops-pulse.md":"# Style 12: Ops Pulse\n\nAn operational review surface that combines service topology, the four golden\nsignals, one critical request path, and a correlated trace waterfall. It is\nfor incident and reliability work, not a screenshot of a live dashboard.\n\n## Best fit\n\n- Incident reviews and production-readiness reviews\n- SLO/error-budget discussions\n- Latency and dependency investigations\n- Runbooks that connect topology to one representative trace\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#07111f` with a restrained ops grid |\n| Service card | `#0d1b2a` |\n| Border | `#29435d` |\n| Healthy | `#22c55e` |\n| Warning | `#f59e0b` |\n| Critical | `#f43f5e` |\n| Telemetry | `#22d3ee`, dashed |\n| Trace | `#38bdf8` |\n\n## Required semantic contract\n\nSelect `semantic_profile: \"ops-pulse\"` and provide:\n\n- `diagram_type: \"observability\"`\n- one to twelve nodes with `ops_role: \"service\"`\n- each service: exactly `latency`, `traffic`, `errors`, and `saturation`\n- every signal: `value`, `unit`, `window`, and `status`\n- service cards at least `180×108` and a visible `status_label`\n- a non-empty ordered `critical_path` of business edge ids\n- business and telemetry edges using different `flow` tokens\n- trace spans with positive duration and valid parent coverage\n\nThe critical path must be contiguous and may not include telemetry edges. A\ntrace waterfall has exactly one root when spans are present.\n\n## Composition rules\n\n- Keep service health cards in one aligned band\n- Show only one highlighted critical path per view\n- Telemetry export is dashed and visually subordinate\n- Put the trace waterfall in its own boundary below topology\n- Do not duplicate a critical edge to create glow; glow is decoration owned by\n the single semantic path\n- Use a fixed observation window and display units on every signal\n- Zero bridge crossings and no more than two bends per edge\n\n## Signature checklist\n\n- Top-right `LIVE` investigation stamp with observation window and worst status\n- Status rail on every service card and four metric chips carrying explicit windows\n- Numbered critical-hop markers on the single highlighted business path\n- Dedicated trace boundary with a 0–100% ruler and one correlated waterfall\n\n## Prompt cues\n\n- English: `reliability pulse`, `incident investigation view`, `golden signals trace`, `SRE trace review`\n- 中文：`可靠性脉冲`、`事故排查视图`、`黄金信号追踪图`、`SRE Trace 评审`\n- Copyable cue: `Use Style 12 Ops Pulse; show a fixed observation window, four golden signals per service, one numbered critical path, telemetry export, and one correlated trace waterfall.`\n\n## Do not blend with\n\nDo not turn the service band into a Region/VPC deployment map, an event-metro\nrail, or a C4 responsibility review. If the prompt lacks measured signals,\nstatus, time window, and trace evidence, use a generic architecture style.\n\n## Fixture\n\n`fixtures/ops-pulse-style12.json` demonstrates a degraded checkout path with\nfour service cards, an OTel collector, and a correlated four-span trace.\n","skills/fireworks-tech-graph/references/style-2-dark-terminal.md":"# Style 2: Dark Terminal\n\nNeon-on-dark hacker aesthetic. Matches CLAUDE.md standard tech diagram style.\n\n## Colors\n\n```\nBackground: #0f0f1a (near-black)\nPanel fill: #0f172a (slate-950)\nPanel stroke: #334155 (slate-700)\nBox radius: 6px\n\nText primary: #e2e8f0 (slate-200)\nText secondary: #94a3b8 (slate-400)\nText muted: #475569 (slate-600)\n\nAccent palette (use per theme/layer):\n Purple: #7c3aed / #a855f7\n Orange: #ea580c / #f97316\n Blue: #1d4ed8 / #3b82f6\n Green: #059669 / #10b981\n Gold: #eab308\n Red: #dc2626 / #ef4444\n\nArrow colors: match accent of the source node's theme\n```\n\n## Background Gradient\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Typography\n\n```\nfont-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 11px sub-labels, 15px titles\nfont-weight: 400 normal, 700 bold for section headers\nletter-spacing: 0.02em for labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n\n```\n\n## Glow Effect (optional, for key nodes)\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-3-blueprint.md":"# Style 3: Blueprint\n\nEngineering blueprint aesthetic with grid background and technical annotation style.\n\n## Colors\n\n```\nBackground: #0a1628\nGrid color: #112240 (subtle grid lines)\nPanel fill: #0d1f3c\nPanel stroke: #00b4d8 (cyan/teal)\nBox radius: 2px (sharp corners for technical feel)\n\nText primary: #caf0f8 (light cyan)\nText secondary: #90e0ef\nText label: #00b4d8\nText muted: #48cae4 at 60% opacity\n\nAccent colors:\n Cyan: #00b4d8 / #48cae4\n White: #ffffff (key labels)\n Orange: #f77f00 (warnings/alerts)\n Green: #06d6a0 (success/active)\n```\n\n## Background with Grid\n\n```xml\n\n \n \n \n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Courier New', 'Lucida Console', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 10px annotations, 16px title\nfont-weight: 400; titles use 700\ntext-transform: uppercase for section headers\nletter-spacing: 0.05em\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n```\n\n## Arrows & Annotations\n\n```xml\n\n \n \n \n\n\n\n\n\nHTTP/REST\n```\n\n## Title Block (bottom-right)\n\n```xml\n\n\n\nSYSTEM ARCHITECTURE\nDIAGRAM TITLE\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-4-notion-clean.md":"# Style 4: Notion Clean\n\nMinimal, documentation-friendly. Designed to embed in Notion, Confluence, or GitHub wikis.\n\n## Colors\n\n```\nBackground: #ffffff\nBox fill: #f9fafb (gray-50) or #ffffff\nBox stroke: #e5e7eb (gray-200)\nBox radius: 4px\n\nText primary: #111827 (gray-900)\nText secondary: #374151 (gray-700)\nText muted: #9ca3af (gray-400)\nText label: #6b7280 (gray-500), uppercase, 11px\n\nAccent (subtle, used sparingly):\n Blue: #3b82f6 (arrows only)\n Gray: #d1d5db (dividers)\n```\n\n## Design Principles\n\n- **No decorative icons** — use geometric shapes only (rect, circle, diamond)\n- **Generous whitespace** — 24px+ padding between elements\n- **Single arrow color** — blue (#3b82f6) for all connections\n- **Labels in ALL CAPS** — section headers and node type labels\n- **No drop shadows** — flat only\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei',\n 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 11px uppercase type labels, 18px title\nfont-weight: 400 normal, 500 medium for node labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\nDATABASE\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n\n## Sizing Guide\n\n- Node box: min 120×40px, prefer 160×48px for readability\n- Title: top-left, 18px, gray-900, margin 32px from edges\n- Spacing: 80px minimum between nodes horizontally, 60px vertically\n","skills/fireworks-tech-graph/references/style-5-glassmorphism.md":"# Style 5: Glassmorphism\n\nFrosted glass cards on dark gradient. Designed for product sites, keynotes, and hero sections.\n\n## Colors\n\n```\nBackground gradient: #0d1117 → #161b22 → #0d1117 (diagonal)\n\nGlass card:\n fill: rgba(255,255,255,0.05)\n stroke: rgba(255,255,255,0.15)\n backdrop-filter: blur(12px) [SVG: use feGaussianBlur]\n box-radius: 12px\n\nText primary: #f0f6fc (near-white)\nText secondary: #8b949e (muted)\nText gradient: use linearGradient on text fill for hero labels\n\nAccent glows (one per layer):\n Blue glow: #58a6ff / rgba(88,166,255,0.3)\n Purple glow: #bc8cff / rgba(188,140,255,0.3)\n Green glow: #3fb950 / rgba(63,185,80,0.3)\n Orange glow: #f78166 / rgba(247,129,102,0.3)\n```\n\n## Background\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n```\n\n## Glass Card Effect\n\nSVG cannot do real backdrop-filter, so simulate with:\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 12px sublabels, 20px hero title\nfont-weight: 400 normal, 600 semi-bold, 700 bold titles\n```\n\n## Gradient Text (for hero labels)\n\n```xml\n\n \n \n \n \n\n\n AI Pipeline\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n","skills/fireworks-tech-graph/references/style-6-claude-official.md":"# Style 6: Claude Official\n\nInspired by Anthropic's Claude blog technical diagrams — warm, approachable, professional.\n\n```\nBackground: #f8f6f3 (warm cream)\nBox fill:\n - Blue tint: #a8c5e6 (alert/input nodes)\n - Green tint: #9dd4c7 (agent nodes)\n - Beige: #f4e4c1 (infrastructure/bus)\n - Gray tint: #e8e6e3 (storage/state)\nBox stroke: #4a4a4a (dark gray)\nBox radius: 12px\nText primary: #1a1a1a (near black)\nText secondary: #6a6a6a (medium gray)\nText labels: #5a5a5a (arrow labels)\n\nSemantic colors:\n Input/Source: #a8c5e6 (soft blue)\n Agent/Process: #9dd4c7 (soft teal-green)\n Infrastructure: #f4e4c1 (warm beige)\n Storage/State: #e8e6e3 (light gray)\n\nArrow color: #5a5a5a (consistent dark gray)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',\n Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 14px descriptions, 13px arrow labels\nfont-weight: 600 for node labels, 400 for descriptions, 700 for titles\n```\n\n## Box Shapes\n\n```xml\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n```\n\n## Arrow Semantics\n\nUse different arrow styles to convey meaning:\n\n| Flow Type | Color | Stroke | Dash | Usage |\n|-----------|-------|--------|------|-------|\n| Primary data flow | #5a5a5a | 2px solid | none | Main request/response path |\n| Memory write | #5a5a5a | 2px | `5,3` | Write/store operations |\n| Memory read | #5a5a5a | 2px solid | none | Retrieval from store |\n| Control/trigger | #5a5a5a | 1.5px | `3,2` | Event triggers |\n\n```xml\n\n\n\n\n\n```\n\n## Arrow Labels\n\nArrow labels should be **technical and specific**, positioned mid-arrow:\n\n```xml\n\n store(embedding)\n\n```\n\nGood labels: `query(text)`, `retrieve(top_k=5)`, `embed(768d)`, `POST /api/search`\nAvoid vague labels: \"Process\", \"Send\", \"Get\"\n\n## Node Content Guidelines\n\nNode content should include **technical details**, not just concepts:\n\n**Good examples:**\n- \"Vector Store\" → \"Vector Store\" + \"• 768-dim embeddings\" + \"• Cosine similarity\"\n- \"LLM\" → \"GPT-4\" + \"• 8K context\" + \"• Temperature: 0.7\"\n- \"Memory\" → \"Redis Cache\" + \"• TTL: 5min\" + \"• Max: 4K tokens\"\n\n**Avoid vague descriptions:**\n- \"Process data\" → specify what processing\n- \"Store information\" → specify storage type and format\n- \"Handle requests\" → specify request type and method\n\nUse 2-3 lines per node:\n1. Component name (bold, 16px)\n2. Technical detail or implementation (14px)\n3. Key parameter or constraint (14px, optional)\n\n## Layer Labels\n\nFor multi-layer architectures, add layer labels on the left side:\n\n```xml\nInput\nProcessing\nStorage\n```\n\nPosition at the vertical center of each layer.\n\n## Legend Requirement\n\nWhen using 2+ arrow types or colors, include a legend in the bottom-right corner:\n\n```xml\n\nLegend\n\n\n\nRead operation\n\n\nWrite operation\n```\n\nPosition: bottom-right, 20px margin from edges.\n\n## Layout Principles\n\n- **Generous spacing**: Minimum 80px between node edges\n- **Horizontal alignment**: Same-layer nodes align perfectly\n- **Vertical flow**: Top-to-bottom preferred\n- **Symmetry**: Balanced composition\n- **Clean lines**: Orthogonal routing — vertical then horizontal, or vice versa\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n \n Agent name\n\n \n \n Publish\n\n```\n\n## Design Philosophy\n\nClaude's official style emphasizes:\n- **Warmth**: Cream background, soft fills\n- **Clarity**: High contrast text, generous spacing\n- **Professionalism**: Consistent stroke weights, aligned elements\n- **Approachability**: Rounded corners, friendly colors\n\nAvoid:\n- Harsh shadows or gradients\n- Overly saturated colors\n- Thin stroke weights (< 2px)\n- Cluttered layouts\n","skills/fireworks-tech-graph/references/style-7-openai.md":"# Style 7: OpenAI Official\n\nClean, modern aesthetic matching OpenAI's documentation and research diagrams — minimal but precise.\n\n## Color Palette\n\n```\nBackground: #ffffff (pure white)\nPrimary text: #0d0d0d (near black)\nSecondary text: #6e6e80 (muted gray)\nBorder: #e5e5e5 (light gray)\n\nAccent colors (reserved):\nGreen accent: #10a37f (OpenAI brand green)\nBlue accent: #1d4ed8 (links, actions)\nOrange accent: #f97316 (highlights, warnings)\nGray accent: #71717a (secondary elements)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 13px descriptions, 12px arrow labels\nfont-weight: 600 for titles, 500 for labels, 400 for descriptions\nletter-spacing: 0\n```\n\nNo custom fonts. System font stack only for maximum compatibility.\n\n## Node Boxes\n\nClean, minimal boxes with subtle borders:\n\n```xml\n\n\n\n\n\n\n```\n\n**Key techniques:**\n1. White fill with light gray border (no shadows)\n2. Optional colored left-border accent strip (4px wide)\n3. `rx=\"8\"` for subtle rounding\n4. `stroke-width: 1.5` — thin, precise borders\n5. No gradients, no shadows, no decorative elements\n\n## Arrows\n\nThin, precise arrows with subtle colors:\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n\n\n\n\n\n\n```\n\n**Arrow guidelines:**\n- Prefer straight lines (orthogonal routing with right angles)\n- `stroke-width: 1.5` — thin and precise\n- Filled polygon arrowheads (not stroke-based)\n- Gray for default, green for primary/accent flows\n- Dashed (`stroke-dasharray=\"4,3\"`) for optional/async flows\n\n## Arrow Labels\n\nMinimal, small labels:\n\n```xml\n\n label\n\n```\n\nLabels should be:\n- 12px, gray color (`#6e6e80`)\n- No background rect by default (white background is usually sufficient); add a white fallback rect only when offsetting cannot prevent a collision\n- Short, technical language\n- Midpoint of arrow\n\n## Database Shapes\n\nClean cylinders with thin borders:\n\n```xml\n\n\n\n```\n\n## Grouping Containers\n\nDashed rect containers for logical grouping:\n\n```xml\n\n\n Group Label\n\n```\n\n## Node Content\n\nClean, minimal text layout:\n\n```xml\n\n\n Component Name\n\n\n Brief description\n\n```\n\n**Content guidelines:**\n- 1-2 lines per box\n- Main label: 16px, font-weight: 600, near-black\n- Description: 13px, font-weight: 400, gray\n- Center-aligned text within boxes\n\n## Layout Principles\n\n**Precise, grid-aligned layout:**\n- Snap all coordinates to 8px grid\n- Consistent 100px horizontal spacing\n- Consistent 120px vertical spacing\n- Generous whitespace (40px+ margins)\n- No decorative elements\n\n**OpenAI minimalism:**\n- Only use color when semantically meaningful (brand green for primary flow)\n- White boxes on white background — differentiation through border and label only\n- Avoid: shadows, gradients, patterns, icons, decorative elements\n- Prefer: straight lines, orthogonal routing, thin strokes\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n Component\n Description\n\n \n \n label\n\n```\n\n## Design Philosophy\n\nOpenAI Official style emphasizes:\n- **Minimalism**: White on white, only essential visual elements\n- **Precision**: Thin strokes, sharp corners (rx=8), grid-aligned\n- **Clarity**: Content-first, no visual noise\n- **Brand consistency**: `#10a37f` green used sparingly for primary flows\n\nAvoid:\n- Shadows and gradients\n- Colorful fills (white fill only)\n- Thick borders (>2px)\n- Decorative elements (icons, patterns, textures)\n- Custom fonts (system stack only)\n","skills/fireworks-tech-graph/references/style-8-dark-luxury.md":"# Style 8 — Dark Luxury\n\nInspired by the `dark-gold` theme from [Understand-Anything](https://github.com/nicholasgasior/understand-anything).\nDeep black canvas with warm champagne-gold accents and hybrid serif/sans typography.\nUniquely warm among all dark styles — closest peer is style-2 (Dark Terminal) but with a premium editorial feel.\n\n## Color Tokens\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| Background | `#0a0a0a` | Canvas fill (deepest black, no blue tint) |\n| Surface | `#111111` | Node / panel fill |\n| Elevated | `#1a1a1a` | Secondary panels, sub-headers |\n| Accent gold | `#d4a574` | Primary arrows, titles, borders, cluster containers |\n| Accent dim | `#c9a96e` | Muted gold borders, secondary accents, cluster labels |\n| Accent bright | `#e8c49a` | Highlights, selected state stroke |\n| Text primary | `#f5f0eb` | Main labels (warm near-white) |\n| Text secondary | `#a39787` | Sub-labels, descriptions |\n| Text muted | `#6b5f53` | Annotations, fine print |\n\n## Typography\n\n```\nTitle / Section label: Georgia, 'Times New Roman', serif\n font-size: 21px (diagram title), 14px (section labels)\n font-weight: 700\n fill: #f5f0eb / #c9a96e (gold for section headers)\n\nNode name: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif\n font-size: 13-14px, font-weight: 600, fill: \n\nSub-label / detail: sans-serif, font-size: 10-11px, fill: #a39787 or #6b5f53\n\nArrow label / legend: sans-serif, font-size: 10-11px, fill: #a39787\n\nCode / path text: 'Cascadia Code', 'SF Mono', 'Courier New', monospace\n font-size: 10-11px, fill: #a39787\n```\n\n**Rule**: Georgia serif is used ONLY for diagram titles and cluster/section labels (≥14px).\nAll node names, arrow labels, and fine-print use sans-serif. This prevents CJK readability issues\nat small sizes while preserving the luxury editorial hook where it's most visible.\n\n## Node Semantic Color Buckets\n\nSix buckets cover the full color wheel — no two adjacent bucket colors are similar:\n\n| Bucket | Border Color | Use For |\n|--------|-------------|---------|\n| Code / Logic | `#5a9e6f` (sage green) | functions, classes, modules, algorithms |\n| Service / API | `#a78bfa` (soft violet) | services, endpoints, APIs, gateways |\n| Data / Storage | `#38bdf8` (sky blue) | databases, tables, files, caches |\n| Concept / Domain | `#f87171` (soft rose) | concepts, domains, entities, topics |\n| Infra / Config | `#fbbf24` (amber yellow) | infrastructure, config, scripts, pipelines |\n| Meta / Doc | `#94a3b8` (cool gray) | documents, schemas, resources, sources |\n\nAll nodes share: `rx=\"6\"` rounded rect, `fill=\"#111111\"`, `stroke-width=\"1.5\"`, stroke color matches bucket.\n\n### SVG node example (Code / Logic):\n\n```xml\n\nMyComponent\nReact component · state management\n```\n\n## Arrow System\n\n| Flow Type | Color | Stroke | Dash | Marker |\n|-----------|-------|--------|------|--------|\n| Primary / structural | `#d4a574` (gold) | 2px solid | none | gold arrowhead |\n| Data flow | `#6ee7b7` (mint) | 1.5px solid | none | mint arrowhead |\n| Control / trigger | `#fdba74` (amber-orange) | 1.5px solid | none | orange arrowhead |\n| Reference / semantic | `#a39787` (warm muted) | 1px dashed | `4,3` | muted arrowhead |\n| Dependency | `#a78bfa` (violet) | 1px dashed | `6,3` | violet arrowhead |\n| Feedback / loop | `#d4a574` (gold) | 1.5px curved | — | gold arrowhead |\n\n### SVG arrow markers (add to ``):\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n```\n\n### Arrow label placement\n\nUse **offset-first**: place label 6–8px above horizontal arrows (not centered on the line).\nAdd background rect (`fill=\"#0a0a0a\" opacity=\"0.9\"`) only when the label still collides with another element.\n\n## Container / Cluster Style\n\n```xml\n\n\n\n\nLAYER NAME\n```\n\n## Background Treatment\n\nNo gradient needed — depth comes from contrast levels:\n\n1. Canvas `#0a0a0a` — absolute black floor\n2. Node surface `#111111` — first elevation (+1 stop)\n3. Panel/sub-header `#1a1a1a` — second elevation (+2 stops)\n4. Gold `#d4a574` — the only warmth; draws the eye to structure\n\nOptional: subtle ambient radial glow around the central cluster\n```xml\n\n \n \n\n\n```\n\n## Full `\n```\n\n## ViewBox Recommendations\n\n| Diagram | ViewBox |\n|---------|---------|\n| Standard architecture | `0 0 960 600` |\n| Tall pipeline / flow | `0 0 960 820` |\n| Wide multi-layer | `0 0 1200 600` |\n\n## Comparable Styles\n\n| Style | Background | Accent | Typography |\n|-------|-----------|--------|-----------|\n| Style 2 Dark Terminal | `#0f0f1a` (blue-black) | `#00ff88` (neon green) | monospace throughout |\n| **Style 8 Dark Luxury** | `#0a0a0a` (pure black) | `#d4a574` (champagne gold) | serif titles + sans body |\n| Style 3 Blueprint | `#0a1628` (navy) | `#4fc3f7` (cyan) | sans-serif |\n\n**When to choose Style 8**: architecture/pipeline docs where you want editorial gravitas —\nREADME hero images, conference slides, knowledge-base diagrams, premium product docs.\n","skills/fireworks-tech-graph/references/style-9-c4-review-canvas.md":"# Style 9: C4 Review Canvas\n\nA review-room canvas for C4 context, container, and component diagrams. The\nwarm paper surface and deterministic pencil echoes make design discussion feel\nhuman while the underlying geometry remains exact.\n\n## Best fit\n\n- Architecture Decision Records and design reviews\n- C4 context, container, or component views\n- Responsibility and dependency reviews\n- Diagrams that need annotations without looking like a slide template\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#f7f2e8` |\n| Card | `#fffdf7` |\n| Primary text | `#24312f` |\n| Boundary | `#8c7d68`, dashed |\n| Primary relationship | `#365f56` |\n| State change | `#a44a3f` |\n| Data/read | `#356a8a` |\n| Asynchronous | `#7a5c99` |\n\nUse Avenir/system sans-serif. Keep type labels uppercase and small; keep\ndescriptions sentence-like and technologies terse.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"c4-review\"` and provide:\n\n- `diagram_type: \"c4\"`\n- one `c4_level`: `context`, `container`, or `component`\n- `scope`, `title`, integer `rough_seed`, and a legend\n- every node: `c4_type`, `label`, and `description`\n- container/component nodes: `technology` and a card at least `170×96`\n- every relationship: short `label` and explicit `protocol`\n\nDo not mix a deeper C4 element into a higher-level view. The runtime rejects a\ncomponent in a container view and rejects unknown boundary parents.\n\n## Roughness without geometry drift\n\nThe `rough_seed` creates stable decorative second strokes. Decorations use\n`data-graph-role=\"decoration\"`; the ordinary orthogonal path remains the only\nsemantic edge. A seed must reproduce byte-identical SVG across runs.\n\nNever jitter:\n\n- node bounds or port anchors\n- the semantic route or arrowhead\n- label bounds\n- container gutters\n\n## Composition rules\n\n- One abstraction level per canvas\n- At least `40px` between nodes and `20px` inside boundaries\n- Zero undeclared crossings and zero bridge crossings for official samples\n- At most two bends per relationship; prefer aligned straight paths\n- Put external people/systems outside the system boundary with a clear gutter\n- Keep labels short enough to sit in whitespace, not on top of cards\n- Wrap responsibility copy to at most two lines; keep technology in the lower-right safe area\n\n## Signature checklist\n\n- Top-right dashed review stamp showing the C4 level and review state\n- Uppercase C4 type, responsibility copy, and a separate technology footer on each card\n- Dashed external-system cards and deterministic pencil echoes that never alter geometry\n- Two-line relationship badges: action first, protocol in brackets below\n\n## Prompt cues\n\n- English: `C4 review board`, `ADR review canvas`, `container responsibility review`\n- 中文：`C4 评审画布`、`ADR 评审图`、`职责边界评审图`\n- Copyable cue: `Use Style 9 C4 Review Canvas; show one C4 level, responsibilities, technologies, review state, and relationship protocols.`\n\n## Do not blend with\n\nDo not add Region/VPC ownership bands, event-metro stations, or golden-signal\nmetric chips. If those facts dominate the request, route to Style 10, 11, or\n12 instead of turning the C4 review into a mixed abstraction canvas.\n\n## Fixture\n\n`fixtures/c4-review-canvas-style9.json` demonstrates a checkout container\nreview with a deterministic seed and a 100-point showcase composition score.\n","skills/fireworks-tech-graph/references/style-diagram-matrix.md":"# Style-to-Diagram-Type Adaptation Guide\n\nNot all styles work equally well for every diagram type. Use this guide to pick the best style.\n\n## Engineering-first styles (9–12)\n\nStyles 9–12 pair a visual language with an executable semantic contract. They\nare deliberately specialized rather than universal skins.\n\n| Style | Required evidence | Visual fingerprint | Prompt cues | Fallback | Never blend with |\n|---|---|---|---|---|---|\n| 9 C4 Review Canvas | One declared C4 level, responsibilities, technology, labeled protocols | Warm review board, C4 type headers, dashed review stamp, deterministic pencil echo | `C4 review board`, `C4 评审画布`, `ADR 评审图` | Styles 1–7 generic architecture | Region/VPC bands, event stations, live metric chips |\n| 10 Cloud Fabric | Region/network/workload ownership and named cross-boundary mechanisms | Cloud grid, nested ownership spines, neutral manifest glyphs, deployment-mode stamp | `deployment topology`, `多区域部署图`, `Region/VPC 归属图` | Styles 1–7 when deployment facts are absent | C4 abstraction labels, station numbering, golden-signal cards |\n| 11 Event Transit | Topics, ordered processors, consumer groups, junctions, DLQ/state | Thin metro rails, numbered stations, fixed arrowheads, role-specific terminals | `event metro map`, `事件地铁图`, `Kafka 拓扑图` | Generic flow style when stream evidence is absent | Cloud nesting, C4 cards, SRE dashboards |\n| 12 Ops Pulse | Fixed window, four golden signals, statuses, one critical path and trace | Live stamp, status rails, metric windows, numbered hops, trace ruler | `reliability pulse`, `事故排查视图`, `黄金信号追踪图` | Generic architecture when measured evidence is absent | Deployment ownership, event rail metaphor, C4 review marks |\n\nAll four official fixtures use the `showcase` composition contract: at least\n40px node spacing, 20px container gutter, zero bridge crossings, at most two\nbends per edge, and no semantic edge duplicated for visual effects.\n\n## Architecture Diagram\n| Style | Suitability | Notes |\n|-------|----------|\n| 1 Flat Icon | Excellent | Default choice; colorful node fills, clear layering |\n| 2 Dark Terminal | Excellent | Popular for dev blogs; use colored borders on dark bg |\n| 3 Blueprint | Excellent | Perfect for formal architecture docs |\n| 4 Notion Clean | Good | Minimal, works for inline docs |\n| 5 Glassmorphism | Good | Striking for presentations and product pages |\n| 6 Claude Official | Good | Warm aesthetic, Anthropic-style presentations |\n| 7 OpenAI Official | Good | Clean, precise; minimal borders, brand green accents |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Premium editorial; gold-on-black layers stand out for architecture docs |\n\n## Class Diagram / ER Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colored headers per class category |\n| 2 Dark Terminal | Good | High contrast for code-like diagrams |\n| 3 Blueprint | Excellent | Best for formal UML documentation |\n| 4 Notion Clean | Excellent | Clean, minimal; ideal for Notion-embedded diagrams |\n| 5 Glassmorphism | Poor | Glass effects distract from structural content |\n| 6 Claude Official | Excellent | Warm, readable; good for documentation |\n| 7 OpenAI Official | Excellent | Minimal aesthetic matches UML precision |\n| 8 Dark Luxury *(AI-authored)* | Fair | Non-standard dark bg for UML; use only for premium editorial contexts |\n\n## Sequence Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Clear lifelines; activation boxes visible |\n| 2 Dark Terminal | Good | Good for dev articles; dashed lifelines visible |\n| 3 Blueprint | Excellent | Formal, technical documentation |\n| 4 Notion Clean | Excellent | Best for Notion-embedded sequence diagrams |\n| 5 Glassmorphism | Poor | Glass effects make lifelines hard to read |\n| 6 Claude Official | Excellent | Ward contrast |\n| 7 OpenAI Official | Excellent | Minimal, precise; ideal for API docs |\n| 8 Dark Luxury *(AI-authored)* | Good | Dramatic contrast; dark lifelines suit developer blogs and premium tech docs |\n\n## Flowchart / Process Flow\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Default; colorful decision diamonds |\n| 2 Dark Terminal | Good | Works well for dev workflow diagrams |\n| 3 Blueprint | Good | Formal process documentation |\n| 4 Notion Clean | Good | Clean for SOPs and inline docs |\n| 5 Glassmorphism | Good | Striking for product demos |\n| 6 Claude Official | Good | Warm aesthetic for presentations |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Good | Striking for premium process documentation |\n\n## Mind Map / Concept Map\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent branches, engaging |\n| 2 Dark Terminal | Good | Neon-like branches on dark bg |\n| 3 Blueprint | Poor | Blueprint grid conflicts with radial layout |\n| 4 Notion Clean | Excellent | Ideal for n brainstorming |\n| 5 Glassmorphism | Excellent | Stunning visual for presentations |\n| 6 Claude Official | Good | Warm, readable |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Gold accent branches on black; radial layouts stand out in presentations |\n\n## Data Flow Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded arrows by data type |\n| 2 Dark Terminal | Excellent | Glowing data paths on dark bg |\n| 3 Blueprint | Excellent | Formal data flow documentation |\n| 4 Notion Clean | Good | Minimal, clean |\n| 5 Glassmorphism | Poor | Distracts from flow semantics |\n| 6 Claude Official | Good | Readable |\n| 7 OpenAI Official | Good | Precise, minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Color-coded data paths shine against deep black; ideal for data engineering docs |\n\n## Use Case Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colorful use case ellipses |\n| 2 Dark Terminal | Poor | Stick figures less visible on dark bg |\n| 3 rint | Excellent | Classic UML aesthetic |\n| 4 Notion Clean | Excellent | Perfect for product requirement docs |\n| 5 Glassmorphism | Poor | Unnecessary visual noise |\n| 6 Claude Official | Excellent | Warm, professional |\n| 7 OpenAI Official | Excellent | Clean, precise UML |\n| 8 Dark Luxury *(AI-authored)* | Fair | Stick figures less visible on deep black; use cautiously |\n\n## State Machine Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\nFlat Icon | Good | Colorful states |\n| 2 Dark Terminal | Good | Glowing states and transitions |\n| 3 Blueprint | Excellent | Best for formal UML state machines |\n| 4 Notion Clean | Excellent | Clean for documentation |\n| 5 Glassmorphism | Poor | Distracts from state transitions |\n| 6 Claude Official | Excellent | Readable |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Good | High contrast for state transitions; editorial quality |\n\n## Network Topology\n| Style | Suitabili |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful device icons |\n| 2 Dark Terminal | Excellent | Cyberpunk-style network maps |\n| 3 Blueprint | Excellent | Ideal for infrastructure docs |\n| 4 Notion Clean | Good | Clean for IT documentation |\n| 5 Glassmorphism | Good | Striking for presentations |\n| 6 Claude Official | Good | Professional network diagrams |\n| 7 OpenAI Official | Good | Clean infrastructure diagrams |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Deep black classic for infrastructure docs; gold topology lines pop |\n\n## Comparison / Feature Matrix\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded checkmarks |\n| 2 Dark Terminal | Good | Works for dev tool comparisons |\n| 3 Blor | Grid conflicts with table layout |\n| 4 Notion Clean | Excellent | Perfect for Notion-embedded tables |\n| 5 Glassmorphism | Poor | Distabular data |\n| 6 Claude Official | Excellent | Clean, warm |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Fair | Dark bg non-standard for comparison tables; use cautiously |\n\n## Timeline / Gantt\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful bars by category |\n| 2 Dark Terminal | Good | Works for dev roadmaps |\n| 3 Blueprint | Good | Formal project plans |\n| 4 Notion Clean | Excellent | Ideal for Notion project docs |\n| 5 Glassmorphism | Good | Striking for keynote presentations |\n| 6 Claude Official | Good | Warm, professional |\n| 7 OpenAI Official | Good | Clean timeline |\n| 8 Dark Luxury *(AI-authored)* | Good | Premium project roadmaps and keynote presentations |\n\n## Agent / Memory Architecture\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful layers, engaging |\n| 2 Dark Terminal | Excellent | Popular for AI/ML blog posts |\n| 3 Blueprint | Good | Formal AI system documentation |\n| 4 Notion Clean | Good | Clean for AI research notes |\n| 5 Glassmorphism | Excellent | Stunning for AI product presentations |\n| 6 Claude Official | Excellent | Anthropic AI aesthetic |\n| 7 OpenAI Official | Excellent | OpenAI AI aesthetic |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Best for premium AI system docs; champagne gold on deep black |\n","skills/fireworks-tech-graph/references/svg-layout-best-practices.md":"# SVG Technical Diagram Layout Best Practices\n\n## Universal Layout Rules (Apply to All Styles)\n\n### 1. Component Spacing\n- **Minimum clearance between components**: 80px (edge to edge)\n- **Minimum clearance for arrow paths**: 60px from component edges\n- **Layer vertical spacing**: 120px between horizontal layers\n- **Same-layer horizontal spacing**: 100-120px between components\n\n### 2. Arrow Routing & Connection Points\n\n#### Connection Point Rules\n- **Never connect arrows to component corners** - use midpoints of edges\n- **Entry/exit points**:\n - Top edge: `cx ± offset` where offset = 0 for single arrow, ±30px for multiple\n - Bottom edge: same rule\n - Left/right edges: `cy ± offset`\n- **Clearance from corners**: minimum 20px\n\n#### Arrow Path Routing\n- **Avoid diagonal lines crossing components** - use orthogonal routing (L-shaped paths)\n- **For curved arrows**:\n - Control point should be at least 40px away from any component edge\n - Use intermediate waypoints for complex routing: `M x1,y1 L x2,y2 Q cx,cy x3,y3`\n- **Multiple arrows between same layers**: stagger Y-coordinates by 15-20px to avoid overlap\n\n#### Arrow Overlap Prevention\n```svg\n\n\n\n\n\n\n\n\n\n```\n\n### 3. Arrow Label Placement\n- **Position**: midpoint of arrow path, offset by 5-10px perpendicular to arrow direction\n- **Offset first**: move the label 5-10px perpendicular to the arrow so it does not sit on the stroke\n- **Background rect fallback**: include only when offsetting cannot avoid another visual element, with:\n - Padding: 4px horizontal, 2px vertical\n - Fill: match background color\n - Opacity: 0.9-0.95\n- **Safety distance**: 15px minimum from any component edge\n- **Multiple converging arrows**: stagger label positions vertically by 20px\n\n### 4. Component Overlap Detection\nBefore finalizing SVG, check:\n- No component bounding boxes overlap (8px safety margin)\n- No arrow paths pass through component interiors (except intentional tunneling with dashed style)\n- No text labels overlap with components or other labels\n\n### 5. Z-Index Layering (SVG render order)\n```svg\n\n1. Background rect\n2. Grouping containers (dashed rects)\n3. Arrow paths\n4. Arrow label background rects when collision fallback is needed\n5. Components (boxes, cylinders, etc.)\n6. Component text\n7. Arrow label text\n8. Legend\n```\n\n## Style-Specific Enhancements\n\n### Style-1: Flat Icon Clean\n- **Perfect alignment**: snap all coordinates to 8px grid\n- **Sharp corners**: rx=\"8\" ry=\"8\" for rounded rects (consistent)\n- **Arrows**: thin (1.5-2px), filled polygon markers\n- **No shadows**: flat design principle\n\n### Style-6: Claude Official Warm\n- **Soft shadows**: ``\n- **Rounded corners**: rx=\"12\" ry=\"12\" (more rounded than Style-1)\n- **Arrows**: medium weight (2px), subtle markers\n\n## Validation Checklist\n\nBefore exporting PNG, verify:\n- [ ] No arrow-component overlaps (visual inspection)\n- [ ] Arrow labels are offset from lines; fallback background rects are used only where needed\n- [ ] Minimum 60px clearance for all arrow paths\n- [ ] Component spacing ≥ 80px\n- [ ] Arrow connection points avoid corners (≥20px from corner)\n- [ ] Multiple arrows between layers are staggered\n- [ ] Legend is readable and doesn't overlap content\n- [ ] SVG renders cleanly via `cairosvg` (or `rsvg-convert` as fallback)\n\n## Common Anti-Patterns to Avoid\n\n| Anti-Pattern | Fix |\n|--------------|-----|\n| Arrow crosses component | Use orthogonal routing, increase control point distance |\n| Label overlaps component | Increase offset; add a matching-background rect if the collision remains |\n| Components too close | Increase spacing to 80px minimum |\n| Arrow connects to corner | Move connection point to edge midpoint offset |\n| No z-index planning | Follow render order: arrows -> components -> text |\n","skills/fireworks-tech-graph/references/visual-quality.md":"# Visual quality and exact text\n\n## Readability\n\nThe generator retains each style's palette, material, radius, stroke and motion\nsignature. `scripts/style_quality.py` strengthens supporting text on its default\nopaque canvas toward a 4.5:1 contrast target. This is a token-level measurement,\nnot certification for custom fills, translucent glass, font size or every pixel.\nInspect the final raster at the intended reading size.\n\n- Flat Icon / Notion / OpenAI: keep quiet white space, make captions and section\n labels readable instead of using nearly invisible gray.\n- Dark Terminal / Ops Pulse: retain accent-coded routes and dark surfaces; lift\n auxiliary text, not glow intensity. Keep status identifiable by text as well as color.\n- Blueprint: preserve the engineering grid, cyan linework and registration details.\n- Glassmorphism: keep the panel translucency; test text on the composited panel.\n- Claude: retain warm paper and brown hierarchy with readable secondary text.\n- C4 Review Canvas: preserve responsibilities and protocols; use both description\n lines for Chinese as well as spaced words. Never hide an essential responsibility.\n- Cloud Fabric: preserve region/VPC nesting; strengthen ownership labels without\n introducing competing connector colors.\n- Event Transit: preserve route directions, station ordering and the distinct DLQ.\n- Dark Luxury: keep the AI-authored restrained gold/serif composition; exact text,\n geometry and visual checks apply just as they do to generated styles.\n\n## Text completeness\n\n`layout.json.typography` reports visible truncation, full source copy and a recovery\nhint. `data-full-text` preserves provenance but does not make hidden text visible.\nUse `text_policy: \"strict\"` to reject truncation. Widen the card, use an approved\nshort label, or split views. CJK descriptions wrap at character boundaries rather\nthan discarding the second line. Font width estimates remain heuristic; Noto Sans\nCJK SC is included as a cross-platform fallback, not bundled or auto-installed.\n\n## Export and verification\n\nPrefer the unified `export-png` command, 1920px by default. Its root-canvas parser\nsupports viewBox-only SVG, decimal/physical dimensions and nonzero SVG origins;\nthe JSON layout generator itself uses origin 0 0. Export rejects oversized images\nand active/external SVG content. Confirm PNG dimensions and inspect actual text.\n\nUse the public style fixtures for identity, the shared quality-baseline fixtures\nfor comparison, and long-text fixtures/tests for readability. Adding metadata or\npassing XML checks alone never proves a visually successful diagram.\n","skills/fireworks-tech-graph/schemas/architecture-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/architecture-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"architecture\" } } }\n ]\n}\n","skills/fireworks-tech-graph/schemas/diagram-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/diagram-v1.schema.json\",\n \"title\": \"Fireworks Tech Graph Diagram v1\",\n \"type\": \"object\",\n \"required\": [\"schema_version\", \"mode\", \"nodes\", \"arrows\"],\n \"properties\": {\n \"schema_version\": { \"const\": 1 },\n \"mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"style\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"visual_theme\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"diagram_type\": { \"type\": \"string\", \"minLength\": 1 },\n \"semantic_profile\": {\n \"enum\": [\"generic\", \"c4-review\", \"cloud-fabric\", \"event-transit\", \"ops-pulse\"]\n },\n \"c4_level\": { \"enum\": [\"context\", \"container\", \"component\"] },\n \"review_state\": { \"type\": \"string\", \"minLength\": 1 },\n \"rough_seed\": { \"type\": \"integer\" },\n \"scope\": { \"type\": \"string\", \"minLength\": 1 },\n \"platform_profile\": { \"enum\": [\"provider-neutral\", \"aws\", \"azure\", \"gcp\", \"kubernetes\"] },\n \"deployment_mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_manifest_version\": { \"type\": \"string\", \"minLength\": 1 },\n \"line_code\": { \"type\": \"string\", \"minLength\": 1 },\n \"observation_window\": { \"type\": \"string\", \"minLength\": 1 },\n \"critical_path\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"uniqueItems\": true,\n \"items\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"topics\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"maxItems\": 4,\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"color\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"color\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"additionalProperties\": true\n }\n },\n \"text_policy\": { \"enum\": [\"report\", \"strict\"] },\n \"viewBox\": { \"type\": \"string\", \"description\": \"Four finite numbers, origin 0 0 and positive width and height; validated by the CLI.\" },\n \"quality_profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"composition\": {\n \"type\": \"object\",\n \"properties\": {\n \"profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"max_bends_per_edge\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_total_bends\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_route_stretch\": { \"type\": \"number\", \"minimum\": 0 },\n \"max_bridged_crossings\": { \"type\": \"integer\", \"minimum\": 0 },\n \"min_node_gap\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_container_gutter\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_label_clearance\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_segment_length\": { \"type\": \"number\", \"minimum\": 0 }\n },\n \"additionalProperties\": false\n },\n \"legend_orientation\": { \"enum\": [\"vertical\", \"horizontal\"] },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"containers\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"x\", \"y\", \"width\", \"height\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"nodes\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"c4_type\": { \"enum\": [\"person\", \"software_system\", \"external_system\", \"container\", \"component\"] },\n \"description\": { \"type\": \"string\" },\n \"technology\": { \"type\": \"string\" },\n \"deployment_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"transit_role\": { \"enum\": [\"producer\", \"station\", \"junction\", \"consumer\", \"dlq\", \"state_store\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"station_order\": { \"type\": \"integer\", \"minimum\": 0 },\n \"consumer_group\": { \"type\": \"string\", \"minLength\": 1 },\n \"ops_role\": { \"enum\": [\"service\", \"collector\", \"trace_span\"] },\n \"span_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent_span\": { \"type\": \"string\", \"minLength\": 1 },\n \"start_ms\": { \"type\": \"number\", \"minimum\": 0 },\n \"duration_ms\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"signals\": {\n \"type\": \"object\",\n \"required\": [\"latency\", \"traffic\", \"errors\", \"saturation\"],\n \"properties\": {\n \"latency\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"traffic\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"errors\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"saturation\": { \"$ref\": \"#/$defs/goldenSignal\" }\n },\n \"additionalProperties\": false\n },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"arrows\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"source\": { \"type\": \"string\" },\n \"target\": { \"type\": \"string\" },\n \"edge_kind\": { \"enum\": [\"business\", \"telemetry\"] },\n \"transit_type\": { \"enum\": [\"rail\", \"publish\", \"branch\", \"consume\", \"retry\", \"state\", \"dead_letter\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"protocol\": { \"type\": \"string\", \"minLength\": 1 },\n \"via\": { \"type\": \"string\", \"minLength\": 1 },\n \"route_points\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"array\",\n \"prefixItems\": [{ \"type\": \"number\" }, { \"type\": \"number\" }],\n \"items\": false,\n \"minItems\": 2,\n \"maxItems\": 2\n }\n }\n },\n \"additionalProperties\": true\n }\n }\n },\n \"$defs\": {\n \"goldenSignal\": {\n \"type\": \"object\",\n \"required\": [\"value\", \"unit\", \"window\", \"status\"],\n \"properties\": {\n \"value\": { \"type\": [\"string\", \"number\"] },\n \"unit\": { \"type\": \"string\", \"minLength\": 1 },\n \"window\": { \"type\": \"string\", \"minLength\": 1 },\n \"status\": { \"enum\": [\"ok\", \"warn\", \"critical\", \"unknown\"] }\n },\n \"additionalProperties\": false\n }\n },\n \"additionalProperties\": true\n}\n","skills/fireworks-tech-graph/schemas/sequence-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/sequence-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"sequence\" } } }\n ]\n}\n","skills/fireworks-tech-graph/schemas/workflow-v1.schema.json":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/workflow-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"enum\": [\"flowchart\", \"agent\", \"state-machine\"] } } }\n ]\n}\n","skills/fireworks-tech-graph/scripts/README.md":"# Fireworks Tech Graph - Scripts\n\n辅助脚本集合，用于提高 SVG 图表生成的稳定性和效率。\n\n## 脚本列表\n\n### 1. validate-svg.sh\n\nSVG 验证脚本，检查 SVG 语法并报告详细错误。\n\n**用法：**\n```bash\n./validate-svg.sh \n```\n\n**检查项目：**\n- XML 结构、属性语法和实体转义（使用 XML parser，避免把 `top_k=5` 之类的文本误判为属性）\n- `marker-start` / `marker-mid` / `marker-end` 引用完整性\n- 箭头与组件碰撞（支持绝对/相对 `M/L/H/V/Q/C/S/T` 路径，曲线路径采样检测）\n- 渲染验证（cairosvg 优先，rsvg-convert 兜底）\n\n**示例：**\n```bash\n./validate-svg.sh /path/to/diagram.svg\n```\n\n### 2. generate-diagram.sh\n\nSVG 图表生成脚本，提供自动验证和 PNG 导出。\n\n**用法：**\n```bash\n./generate-diagram.sh [OPTIONS]\n```\n\n**选项：**\n- `-t, --type TYPE` - 图表类型（见脚本帮助）\n- `-s, --style STYLE` - 风格编号（1-12，默认：1）\n- `-o, --output PATH` - 输出路径（默认：当前目录）\n- `-w, --width WIDTH` - PNG 宽度（像素，默认：1920）\n- `--no-validate` - 跳过验证\n- `-h, --help` - 显示帮助\n\n**示例：**\n```bash\n# 生成架构图（Style 1）\n./generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg\n\n# 生成流程图（Style 2，2400px 宽）\n./generate-diagram.sh -t flowchart -s 2 -w 2400\n```\n\n**注意：** SVG 内容需要先准备好；这个脚本只负责验证与导出。\n\n### 3. generate-from-template.py\n\n基于风格配置和 JSON 数据生成 SVG。当前版本不再只是简单塞入 `nodes/arrows`，\n而是会执行 style guide 中的部分可计算规则，例如：\n\n- `style` - 风格编号（1-12）或规范风格名\n- `semantic_profile` - 可选语义契约；Style 9-12 默认分别启用 C4、云部署、事件流和可观测性契约\n- `containers` - 泳道 / 分组容器\n- `containers[].header_prefix` / `containers[].header_text` - 工程编号式分区标题\n- `containers[].side_label` - 左侧 layer label\n- `nodes[].kind` - 语义组件类型，例如 `double_rect`、`cylinder`、`document`、`terminal`、`circle_cluster`\n- `arrows[].flow` - 语义箭头类型，例如 `control`、`write`、`read`、`data`\n- `source_port` / `target_port` - 指定端口锚点\n- `route_points` / `corridor_x` / `corridor_y` - 控制复杂图的走线质量\n- `style_overrides` - 对现有 style 做局部覆盖\n- `window_controls` / `meta_*` - 顶部终端 chrome\n- `blueprint_title_block` - 工程蓝图右下角 title block\n\n**用法：**\n```bash\npython3 ./generate-from-template.py architecture ./output/arch.svg '{\"style\":1,\"title\":\"My Diagram\",\"containers\":[],\"nodes\":[],\"arrows\":[]}'\n```\n\n**示例：**\n```bash\npython3 ./generate-from-template.py memory ./output/mem0.svg '{\n \"style\": 1,\n \"title\": \"Mem0 Memory Architecture\",\n \"containers\": [\n {\"x\":30,\"y\":90,\"width\":900,\"height\":90,\"label\":\"Input Layer\",\"header_prefix\":\"01\"}\n ],\n \"nodes\": [\n {\"id\":\"manager\",\"kind\":\"double_rect\",\"x\":360,\"y\":220,\"width\":300,\"height\":72,\"label\":\"Memory Manager\"},\n {\"id\":\"vector\",\"kind\":\"cylinder\",\"x\":90,\"y\":360,\"width\":140,\"height\":110,\"label\":\"Vector Store\"}\n ],\n \"arrows\": [\n {\"source\":\"manager\",\"target\":\"vector\",\"flow\":\"write\",\"dashed\":true}\n ]\n}'\n```\n\n### 4. test-all-styles.sh\n\n批量测试脚本覆盖 12 种风格。Style 1-7 与 9-12 从 JSON fixture 生成，AI 手绘的 Style 8 使用静态 SVG fixture；任何风格缺少回归 fixture 都会使批测失败。\n\n**用法：**\n```bash\n./test-all-styles.sh\n```\n\n**功能：**\n- 检查所有风格的参考文件\n- 渲染 `fixtures/*.json` 回归样例\n- 验证生成出的 SVG 文件\n- 导出 PNG 文件到 `test-output/` 目录\n- 生成测试报告\n\n**输出：**\n- 测试摘要（通过/失败统计）\n- PNG 文件（带时间戳）\n- 详细的验证错误信息\n\n**示例：**\n```bash\n./test-all-styles.sh\n```\n\n## 依赖\n\n所有脚本需要至少一个 PNG 渲染器（推荐 cairosvg）：\n\n- **cairosvg**（推荐）- SVG 转 PNG，CSS 支持最好\n ```bash\n python3 -m pip install cairosvg\n ```\n\n- **rsvg-convert**（备选）- 系统包；复杂 SVG 可能丢失 CSS / ``\n ```bash\n brew install librsvg # macOS\n sudo apt install librsvg2-bin # Ubuntu/Debian\n ```\n\n`generate-diagram.sh` 会优先调用 cairosvg，缺失时自动回退到 rsvg-convert。完整对比见 [PNG 导出参考](../references/png-export.md)。\n\n聚焦后的语义动效由 `fireworks.py animate`、`motion.py` 和 `svg2gif.js` 协作完成，只接收带有 12 套已验收 role/stage/order 契约之一的生成器语义 SVG。精确源文件字节不锁定，但任意同风格拓扑不会自动套用动效。媒体输出只允许经过验证的 GIF，默认还会生成同名 `.motion.json` 报告。运行时需要 FFmpeg/FFprobe、Chrome/Chromium，以及 Skill 安装位置可解析到的 `puppeteer` 或 `puppeteer-core`；当前工作目录中的同名模块不会被隐式执行。依赖安装与最简命令：\n\n```bash\nfor SKILL_ROOT in \\\n \"$HOME/.agents/skills/fireworks-tech-graph\" \\\n \"$HOME/.claude/skills/fireworks-tech-graph\"\ndo\n [ -d \"$SKILL_ROOT\" ] || continue\n npm install --prefix \"$SKILL_ROOT\" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0\ndone\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" animate diagram.svg diagram.gif\n```\n\n默认自动识别风格，输出 5.75 秒、20fps、960px 宽、115 帧无限循环 GIF。第 1–36 帧保持既有 draw-on，第 36–38 帧淡入运行流，第 38–109 帧为完整稳定数据流，第 110–114 帧按 `[1,.7575,.515,.2725,.03]` reset。Style 1–12 的 signature、速度、路径、几何和构建合同均为 `user-approved`，包括 `persistent-data-flow-head`、`terminal-evidence-stream`、`blueprint-registration-bead`、14×10 `notion-memory-card`、`glass-task-capsule`、`policy-seal`、`token-train`、`gem-tracer`、`review-cursor`、region chevrons、event train 与 ops scanner；共享 `+2s-settled-flow` 时间修订也已于 2026-07-17 验收，默认新包的 `review_status` 为 `user-approved`。显式 3.75 秒/75 帧和 2.75 秒/55 帧继续支持。75 帧及以下要求全部 raster 唯一；更长时间线允许非相邻重复出现在 full-opacity 区间，frame 110 是 reset opacity 为 1.00 的唯一例外并分类为 `intentional_reset_boundary_repeat`，frame 111–114 必须全局不同；至少保留 75 个唯一 raster 且相邻重复数为零。75-vs-115 gate 分开统计 binary / decoded-RGBA / guarded-antialias 三类；guarded 等价要求 AE ≤ 128、normalized RMSE ≤ 0.001、component 宽或高不超过 2px 且只落在 edge/node border，DOM 和 signature geometry 仍 strict-exact。完整约束见 [动效参考](../references/motion-effects.md)。\n\n- **grep, sed, awk** - 文本处理（macOS 自带）\n\n## 目录结构\n\n```\nfireworks-tech-graph/\n├── SKILL.md # Skill 主文档\n├── references/ # 风格参考文件\n│ ├── style-1-flat-icon.md\n│ ├── style-2-dark-terminal.md\n│ └── ...\n├── fixtures/ # 回归测试样例（JSON）\n│ ├── mem0-style1.json\n│ ├── tool-call-style2.json\n│ └── ...\n├── scripts/ # 辅助脚本（本目录）\n│ ├── README.md # 本文档\n│ ├── validate-svg.sh # SVG 验证\n│ ├── generate-diagram.sh # SVG 验证与 PNG 导出\n│ ├── generate-from-template.py # 模板化生成 SVG\n│ ├── motion.py # SVG 转 GIF 校验、编码与原子报告\n│ ├── svg2gif.js # Chromium 手动时间轴逐帧渲染\n│ └── test-all-styles.sh # 批量测试\n└── test-output/ # 测试输出目录（自动创建）\n```\n\n## 使用场景\n\n### 场景 1：验证现有 SVG\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/validate-svg.sh\" /path/to/your-diagram.svg\n```\n\n### 场景 2：生成并验证图表\n\n1. 使用 Codex 或 Claude Code 生成 SVG 内容\n2. 运行验证和导出：\n ```bash\n SKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n # SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n \"$SKILL_ROOT/scripts/generate-diagram.sh\" -t architecture -s 1 -o ./output/arch.svg\n ```\n\n### 场景 3：批量测试所有风格\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/test-all-styles.sh\"\n```\n\n测试脚本会自动：\n1. 读取 `../fixtures/*.json`\n2. 按 `template_type + style` 调用 `generate-from-template.py`\n3. 运行 `validate-svg.sh`\n4. 导出 PNG 到 `../test-output/`\n\n### 场景 4：validator 单元测试\n\n```bash\npython3 -m unittest discover -s tests -p 'test_validate_svg.py' -v\n```\n\n覆盖 marker 双端引用、文本等号、`H/V` 路径、曲线路径、虚线组件和容器排除等正反例。\n\n对启发式难以区分的形状，可显式添加 `data-graph-role=\"node|container|legend|decoration|label|background\"`。`node` 会强制纳入障碍物检测，其余角色会从组件障碍物中排除；`legend` 组内的示例箭头也不会被当作业务流。\n\n查看测试输出：\n```bash\nls -lh ../test-output/\n```\n\n## 故障排除\n\n### 问题：找不到 PNG 渲染器\n\n**解决方案（任选其一，推荐 cairosvg）：**\n```bash\npython3 -m pip install cairosvg # 推荐\nbrew install librsvg # macOS 系统包\nsudo apt install librsvg2-bin # Ubuntu/Debian\n```\n\n### 问题：rsvg-convert 渲染缺框/缺文字\n\n**原因：** rsvg-convert 对 ``、CSS `filter`、复杂 `` — no external `@import` (cairosvg / rsvg-convert cannot fetch external URLs)\n- ``: arrow markers, gradients, filters, clip paths\n- Text: minimum 12px, prefer 13-14px labels, 11px sub-labels, 16-18px titles\n- All arrows: `` with `markerEnd`, sized `markerWidth=\"10\" markerHeight=\"7\"`\n- Drop shadows: `` in ``, apply sparingly (key nodes only)\n- Curved paths: use `M x1,y1 C cx1,cy1 cx2,cy2 x2,y2` cubic bezier for loops/feedback arrows\n- Clip content: use `` if text might overflow a node box\n- Z-order (drawing order): SVG uses painter's model — later elements cover earlier ones. Recommended layer order (bottom → top): ① canvas background ② dashed containers / region backgrounds ③ arrows and connection lines ④ node shapes (rects, circles) ⑤ text labels and annotations ⑥ legends and overlays. When arrows pass near text, draw arrows BEFORE text so text stays readable. Adjust per diagram needs — this is guidance, not rigid.\n\n## SVG Generation & Error Prevention\n\n**Example: Python List Method.** Use a maintainable SVG/XML generator that passes the same geometry, text and export checks:\n```python\npython3 << 'EOF'\nlines = []\nlines.append('')\nlines.append(' ')\n# ... each line separately\nlines.append('')\n\nwith open('/path/to/output.svg', 'w') as f:\n f.write('\\n'.join(lines))\nprint(\"SVG generated successfully\")\nEOF\n```\n\n**Why mandatory**: Prevents character truncation, typos, and syntax errors. Each line is independent and easy to verify.\n\n**Pre-Tool-Call Checklist** (CRITICAL - use EVERY time):\n1. ✅ Can I write out the COMPLETE command/content right now?\n2. ✅ Do I have ALL required parameters ready?\n3. ✅ Have I checked for syntax errors in my prepared content?\n\n**If ANY answer is NO**: STOP. Do NOT call the tool. Prepare the content first.\n\n**Error Recovery Protocol**:\n- **First error**: Analyze root cause, apply targeted fix\n- **Second error**: Switch method entirely (Python list → chunked generation)\n- **Third error**: STOP and report to user - do NOT loop endlessly\n- **Never**: Retry the same failing command or call tools with empty parameters\n\n**Validation** (run after generation):\n```bash\npython3 -c \"import xml.etree.ElementTree as ET; ET.parse('file.svg')\" && echo \"✓ Valid XML\"\n# Or use cairosvg as a render-time check:\npython3 -c \"import cairosvg; cairosvg.svg2png(url='file.svg', write_to='/tmp/test.png')\" && echo \"✓ Renders\" && rm /tmp/test.png\n```\n\n**If using `generate-from-template.py`**:\n- Prefer `source` / `target` node ids in arrow JSON so the generator can snap to node edges\n- Keep `x1,y1,x2,y2` as hints or fallback coordinates, not the main routing primitive\n- Let the generator choose orthogonal routes; avoid hardcoding center-to-center straight lines unless the path is guaranteed clear\n\n**Common Syntax Errors to Avoid**:\n- ❌ `yt-anchor` → ✅ `y=\"60\" text-anchor=\"middle\"`\n- ❌ `x=\"390` (missing y) → ✅ `x=\"390\" y=\"250\"`\n- ❌ `fill=#fff` → ✅ `fill=\"#ffffff\"`\n- ❌ `marker-end=` → ✅ `marker-end=\"url(#arrow)\"`\n- ❌ `L 29450` → ✅ `L 290,220`\n- ❌ Missing `` at end\n- ❌ Element with `filter` near viewBox edge — filter region extends 20% (default) or more beyond bbox; if that region exceeds viewBox, Chrome/cairosvg clip the filter rendering AND can drop the element's own stroke on that side. Keep filtered elements at least `max(20% of element size, shadow blur radius × 3)` away from viewBox edges, or omit the filter.\n\n## Output\n\n- **Default**: `./[derived-name].svg` and `./[derived-name].png` in current directory\n- **Custom**: user specifies path with `--output /path/` or `输出到 /path/`\n- **PNG / motion export**: see **SVG → PNG Conversion** below and `$SKILL_ROOT/references/motion-effects.md`\n\n## SVG → PNG Conversion\n\nUse `$SKILL_ROOT/scripts/generate-diagram.sh` by default. Load `$SKILL_ROOT/references/png-export.md` only when selecting a renderer manually, handling CJK/emoji fallback, converting browser-generated SVG, or using the bundled Puppeteer converter.\n\n## Styles\n\n| # | Name | Background | Best For |\n|---|------|-----------|----------|\n| 1 | **Flat Icon** (default) | White | Blogs, docs, presentations |\n| 2 | **Dark Terminal** | `#0f0f1a` | GitHub, dev articles |\n| 3 | **Blueprint** | `#0a1628` | Architecture docs |\n| 4 | **Notion Clean** | White, minimal | Notion, Confluence, wikis |\n| 5 | **Glassmorphism** | Dark gradient | Product sites, keynotes |\n| 6 | **Claude Official** | Warm cream `#f8f6f3` | Anthropic-style diagrams |\n| 7 | **OpenAI Official** | Pure white `#ffffff` | OpenAI-style diagrams |\n| 8 | **Dark Luxury** *(AI-authored)* | `#0a0a0a` deep black | Architecture docs, premium editorial — hand-craft SVG from `$SKILL_ROOT/references/style-8-dark-luxury.md` |\n| 9 | **C4 Review Canvas** | Warm paper `#f7f2e8` | C4 reviews and ADRs; enforces one abstraction level |\n| 10 | **Cloud Fabric** | Cloud blue `#edf5fb` | Region/network/workload deployment ownership |\n| 11 | **Event Transit** | Transit paper `#fbf7ee` | Topics, processors, consumer groups, DLQ, state |\n| 12 | **Ops Pulse** | Ops navy `#07111f` | Golden signals, critical paths, correlated traces |\n\nLoad the matching `$SKILL_ROOT/references/style-N-*.md` for exact color tokens and SVG patterns.\n\n## Style Selection\n\n**Default**: Style 1 (Flat Icon) for most diagrams. Load `$SKILL_ROOT/references/style-diagram-matrix.md` for detailed style-to-diagram-type recommendations.\n\nPrompt fingerprints: `C4评审画布/C4 review board` → 9; `多区域云部署/deployment topology` → 10; `事件地铁图/event metro map` → 11; `可靠性脉冲/golden signals trace` → 12; `让这张图动起来/生成 GIF/制作 GIF/animate this diagram/Generate a GIF` → auto motion.\nAuto-select these only with matching domain evidence; otherwise use Styles 1–7 or `semantic_profile: \"generic\"`, and split mixed C4/deployment/event/ops views.\n\nThese patterns appear frequently — internalize them:\n\n**RAG Pipeline**: Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response\n**Agentic RAG**: adds Agent loop with Tool use between Query and LLM\n**Agentic Search**: Query → Planner → [Search Tool / Calculator / Code] → Synthesizer → Response\n**Mem0 / Memory Layer**: Input → Memory Manager → [Write: VectorDB + GraphDB] / [Read: Retrieve+Rank] → Context\n**Agent Memory Types**: Sensory (raw input) → Working (context window) → Episodic (past interactions) → Semantic (facts) → Procedural (skills)\n**Multi-Agent**: Orchestrator → [SubAgent A / SubAgent B / SubAgent C] → Aggregator → Output\n**Tool Call Flow**: LLM → Tool Selector → Tool Execution → Result Parser → LLM (loop)\n","isInternal":false,"tokens":6032,"sizeBytes":24453},{"name":"icons.md","path":"skills/fireworks-tech-graph/references/icons.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/icons.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Icon Reference\n\n## Rules for Renderer Compatibility (cairosvg / rsvg-convert)\n\n**Never use** `@import url()` for icon fonts — neither cairosvg nor rsvg-convert fetches external resources.\n**Always use** inline SVG ``, ``, ``, `` combinations.\n**Font fallback**: embed font-family in `\n \n \n \n \n \n \n \n \n \n \n\n```\n","isInternal":false,"tokens":1043,"sizeBytes":3120},{"name":"style-10-cloud-fabric.md","path":"skills/fireworks-tech-graph/references/style-10-cloud-fabric.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-10-cloud-fabric.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 10: Cloud Fabric\n\nA deployment-topology view for regions, VPCs/networks, compute, data stores,\nand cross-boundary traffic. It answers “where does this run?” without turning\nthe diagram into a vendor icon poster.\n\n## Best fit\n\n- Multi-region and disaster-recovery reviews\n- Cloud deployment and network ownership maps\n- Kubernetes cluster/namespace placement\n- Migration plans and platform boundary discussions\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#edf5fb` with a restrained blue grid |\n| Card | `#ffffff` |\n| Primary text | `#102a43` |\n| Boundary | `#7fa3c2` |\n| Traffic | `#2563eb` |\n| Write | `#ea580c` |\n| Data | `#059669` |\n| Cross-region | `#7c3aed`, dashed |\n\nNested boundaries carry a small `GLOBAL`, `REGION`, or `NETWORK` badge. Nodes\nuse a manifest-backed neutral glyph plus provider metadata. A colored ownership\nspine makes each nested deployment boundary readable even in grayscale.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"cloud-fabric\"` and provide:\n\n- `diagram_type: \"deployment\"`\n- `platform_profile`: `provider-neutral`, `aws`, `azure`, `gcp`, or `kubernetes`\n- `icon_manifest_version: \"2026.07-neutral.1\"`\n- at least one `deployment_kind: \"region\"` boundary\n- every node: `deployment_id` and a manifest-backed `icon_id`\n- every cross-deployment edge: a non-empty `via`\n\nBoundary parents must form an acyclic tree, nesting depth is capped at four,\nchild boundaries stay at least `16px` inside their parent, and nodes stay at\nleast `20px` inside their assigned deployment.\n\n## Icon policy\n\nThe bundled manifest contains provider-neutral geometric glyphs. It records\nofficial AWS, Azure, and Google Cloud asset URLs as adapter metadata; it does\nnot redistribute vendor trademarks. If a user supplies an official icon pack,\npreserve its license and version outside this repository and map it through the\nmanifest boundary.\n\nNever invent a vendor service logo. Unknown `icon_id` values fail validation.\n\n## Composition rules\n\n- Show deployment ownership through nesting, not background color alone\n- Use a shallow `global → region → network` hierarchy where possible\n- Keep ingress paths vertical and regional data paths aligned\n- Name cross-boundary mechanisms (`peering`, `transit gateway`, `service mesh`)\n- Zero crossings in official samples; use no more than two bends per edge\n- Do not encode both logical service architecture and every subnet in one view\n- Reserve the icon/provider area before fitting text; no title or subtitle may cross a card edge\n- Place ingress mechanism labels in inter-boundary whitespace, clear of Region and Network headers\n\n## Signature checklist\n\n- Pale cloud grid and explicit `global → region → network` nesting\n- Ownership spines plus `GLOBAL`, `REGION`, and `NETWORK` boundary badges\n- Manifest-backed globe, compute, database, gateway, stream, or observe glyphs\n- Top-right platform/region/deployment-mode stamp and named cross-boundary mechanisms\n\n## Prompt cues\n\n- English: `multi-region deployment map`, `cloud landing zone map`, `region/VPC ownership map`\n- 中文：`多区域部署图`、`云部署拓扑`、`Region/VPC 归属图`\n- Copyable cue: `Use Style 10 Cloud Fabric; show global ingress, Region and VPC ownership, neutral cloud glyphs, deployment mode, and every cross-boundary mechanism.`\n\n## Do not blend with\n\nDo not use C4 abstraction labels, transit-map station numbering, or live SRE\nmetric cards. When deployment evidence is absent, fall back to a generic Style\n1–7 architecture view instead of inventing cloud ownership.\n\n## Fixture\n\n`fixtures/cloud-fabric-style10.json` demonstrates active-active checkout\ndeployment with two regions, explicit VPC ownership, and neutral glyphs.\n","isInternal":false,"tokens":853,"sizeBytes":3719},{"name":"style-11-event-transit.md","path":"skills/fireworks-tech-graph/references/style-11-event-transit.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-11-event-transit.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 11: Event Transit\n\nA transit-map metaphor for event-driven systems. Topics are rails, processing\nsteps are stations, declared junctions are branch points, and dead letters get\na visibly separate route.\n\n## Best fit\n\n- Kafka/Pulsar/NATS topology reviews\n- Event choreography and consumer-group discussions\n- Stream processing, retry, and DLQ runbooks\n- Schema evolution and materialized-view pipelines\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#fbf7ee` with transit dots |\n| Card | `#fffdf8` |\n| Primary rail | `#e4475b` |\n| State projection | `#00897b` |\n| Read/consumer | `#2563eb` |\n| DLQ | `#c62828`, dashed |\n| Text | `#17213c` |\n\nThe dark casing beneath a rail is decoration. The colored path with\n`data-graph-role=\"edge\"` remains the ordinary semantic connector. Semantic\nrails use a maximum `2.8px` stroke and fixed user-space arrowheads so markers do\nnot grow with line width.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"event-transit\"` and provide:\n\n- `diagram_type: \"event_stream\"`\n- one to four topics, each with unique `id` and `color`\n- every node: `transit_role` and optional/required topic metadata\n- stations/junctions: `operation`\n- consumers: `consumer_group`\n- rail stations: unique integer `station_order`\n- rail edges: `transit_type: \"rail\"`, topic id, `right → left` ports\n\nA rail edge must connect consecutive station orders on one horizontal\ncenterline with at least `64px` clearance. A dead-letter edge must target a\nreal `dlq` node. Multiple rail departures are only valid from a `junction`.\n\n## Composition rules\n\n- One horizontal centerline per topic rail\n- Use branches only where the node is declared as a junction\n- Put DLQ and state-store terminals below their owning station\n- Reserve dashed red for dead-letter/retry semantics\n- Show partition, lag, or schema facts as short badges\n- Zero bridge crossings and no duplicated rail overlay in official samples\n- Keep at least `64px` clear rail between adjacent station cards\n- Use compact user-space arrowheads and a subtle casing; the semantic rail stays at or below `2.8px`\n\n## Signature checklist\n\n- Dark top-right `EVENT METRO` line stamp and a signed topic-line count\n- Numbered station medallions, compact midpoint chevrons, and one rail centerline per topic\n- Distinct junction dot, dashed DLQ terminal with `×`, and state-store terminal with a square glyph\n- Partition, schema, latency, fan-out, lag, replay, and state badges attached to stations\n\n## Prompt cues\n\n- English: `event metro map`, `topic rail map`, `Kafka topology`, `stream choreography map`\n- 中文：`事件地铁图`、`事件轨道图`、`Topic 线路图`、`Kafka 拓扑图`\n- Copyable cue: `Use Style 11 Event Transit; render topics as thin metro rails, processors as numbered stations, declared junctions, consumer groups, DLQ, and state projections.`\n\n## Do not blend with\n\nDo not nest Region/VPC deployment boundaries, label cards as C4 containers, or\nattach golden-signal dashboards to every station. A request/response flow with\nno topic, consumer-group, or stream evidence should use a generic flow style.\n\n## Fixture\n\n`fixtures/event-transit-style11.json` shows a checkout event line with schema\nvalidation, fraud enrichment, a declared junction, DLQ, and materialized state.\n","isInternal":false,"tokens":802,"sizeBytes":3286},{"name":"style-12-ops-pulse.md","path":"skills/fireworks-tech-graph/references/style-12-ops-pulse.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-12-ops-pulse.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 12: Ops Pulse\n\nAn operational review surface that combines service topology, the four golden\nsignals, one critical request path, and a correlated trace waterfall. It is\nfor incident and reliability work, not a screenshot of a live dashboard.\n\n## Best fit\n\n- Incident reviews and production-readiness reviews\n- SLO/error-budget discussions\n- Latency and dependency investigations\n- Runbooks that connect topology to one representative trace\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#07111f` with a restrained ops grid |\n| Service card | `#0d1b2a` |\n| Border | `#29435d` |\n| Healthy | `#22c55e` |\n| Warning | `#f59e0b` |\n| Critical | `#f43f5e` |\n| Telemetry | `#22d3ee`, dashed |\n| Trace | `#38bdf8` |\n\n## Required semantic contract\n\nSelect `semantic_profile: \"ops-pulse\"` and provide:\n\n- `diagram_type: \"observability\"`\n- one to twelve nodes with `ops_role: \"service\"`\n- each service: exactly `latency`, `traffic`, `errors`, and `saturation`\n- every signal: `value`, `unit`, `window`, and `status`\n- service cards at least `180×108` and a visible `status_label`\n- a non-empty ordered `critical_path` of business edge ids\n- business and telemetry edges using different `flow` tokens\n- trace spans with positive duration and valid parent coverage\n\nThe critical path must be contiguous and may not include telemetry edges. A\ntrace waterfall has exactly one root when spans are present.\n\n## Composition rules\n\n- Keep service health cards in one aligned band\n- Show only one highlighted critical path per view\n- Telemetry export is dashed and visually subordinate\n- Put the trace waterfall in its own boundary below topology\n- Do not duplicate a critical edge to create glow; glow is decoration owned by\n the single semantic path\n- Use a fixed observation window and display units on every signal\n- Zero bridge crossings and no more than two bends per edge\n\n## Signature checklist\n\n- Top-right `LIVE` investigation stamp with observation window and worst status\n- Status rail on every service card and four metric chips carrying explicit windows\n- Numbered critical-hop markers on the single highlighted business path\n- Dedicated trace boundary with a 0–100% ruler and one correlated waterfall\n\n## Prompt cues\n\n- English: `reliability pulse`, `incident investigation view`, `golden signals trace`, `SRE trace review`\n- 中文：`可靠性脉冲`、`事故排查视图`、`黄金信号追踪图`、`SRE Trace 评审`\n- Copyable cue: `Use Style 12 Ops Pulse; show a fixed observation window, four golden signals per service, one numbered critical path, telemetry export, and one correlated trace waterfall.`\n\n## Do not blend with\n\nDo not turn the service band into a Region/VPC deployment map, an event-metro\nrail, or a C4 responsibility review. If the prompt lacks measured signals,\nstatus, time window, and trace evidence, use a generic architecture style.\n\n## Fixture\n\n`fixtures/ops-pulse-style12.json` demonstrates a degraded checkout path with\nfour service cards, an OTel collector, and a correlated four-span trace.\n","isInternal":false,"tokens":728,"sizeBytes":3044},{"name":"style-2-dark-terminal.md","path":"skills/fireworks-tech-graph/references/style-2-dark-terminal.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-2-dark-terminal.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 2: Dark Terminal\n\nNeon-on-dark hacker aesthetic. Matches CLAUDE.md standard tech diagram style.\n\n## Colors\n\n```\nBackground: #0f0f1a (near-black)\nPanel fill: #0f172a (slate-950)\nPanel stroke: #334155 (slate-700)\nBox radius: 6px\n\nText primary: #e2e8f0 (slate-200)\nText secondary: #94a3b8 (slate-400)\nText muted: #475569 (slate-600)\n\nAccent palette (use per theme/layer):\n Purple: #7c3aed / #a855f7\n Orange: #ea580c / #f97316\n Blue: #1d4ed8 / #3b82f6\n Green: #059669 / #10b981\n Gold: #eab308\n Red: #dc2626 / #ef4444\n\nArrow colors: match accent of the source node's theme\n```\n\n## Background Gradient\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Typography\n\n```\nfont-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 11px sub-labels, 15px titles\nfont-weight: 400 normal, 700 bold for section headers\nletter-spacing: 0.02em for labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n\n```\n\n## Glow Effect (optional, for key nodes)\n\n```xml\n\n \n \n \n \n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n","isInternal":false,"tokens":1000,"sizeBytes":2878},{"name":"style-3-blueprint.md","path":"skills/fireworks-tech-graph/references/style-3-blueprint.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-3-blueprint.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 3: Blueprint\n\nEngineering blueprint aesthetic with grid background and technical annotation style.\n\n## Colors\n\n```\nBackground: #0a1628\nGrid color: #112240 (subtle grid lines)\nPanel fill: #0d1f3c\nPanel stroke: #00b4d8 (cyan/teal)\nBox radius: 2px (sharp corners for technical feel)\n\nText primary: #caf0f8 (light cyan)\nText secondary: #90e0ef\nText label: #00b4d8\nText muted: #48cae4 at 60% opacity\n\nAccent colors:\n Cyan: #00b4d8 / #48cae4\n White: #ffffff (key labels)\n Orange: #f77f00 (warnings/alerts)\n Green: #06d6a0 (success/active)\n```\n\n## Background with Grid\n\n```xml\n\n \n \n \n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Courier New', 'Lucida Console', 'Microsoft YaHei', 'SimHei', monospace\nfont-size: 13px labels, 10px annotations, 16px title\nfont-weight: 400; titles use 700\ntext-transform: uppercase for section headers\nletter-spacing: 0.05em\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\n\n\n\n```\n\n## Arrows & Annotations\n\n```xml\n\n \n \n \n\n\n\n\n\nHTTP/REST\n```\n\n## Title Block (bottom-right)\n\n```xml\n\n\n\nSYSTEM ARCHITECTURE\nDIAGRAM TITLE\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n\n```\n","isInternal":false,"tokens":1072,"sizeBytes":3238},{"name":"style-4-notion-clean.md","path":"skills/fireworks-tech-graph/references/style-4-notion-clean.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-4-notion-clean.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 4: Notion Clean\n\nMinimal, documentation-friendly. Designed to embed in Notion, Confluence, or GitHub wikis.\n\n## Colors\n\n```\nBackground: #ffffff\nBox fill: #f9fafb (gray-50) or #ffffff\nBox stroke: #e5e7eb (gray-200)\nBox radius: 4px\n\nText primary: #111827 (gray-900)\nText secondary: #374151 (gray-700)\nText muted: #9ca3af (gray-400)\nText label: #6b7280 (gray-500), uppercase, 11px\n\nAccent (subtle, used sparingly):\n Blue: #3b82f6 (arrows only)\n Gray: #d1d5db (dividers)\n```\n\n## Design Principles\n\n- **No decorative icons** — use geometric shapes only (rect, circle, diamond)\n- **Generous whitespace** — 24px+ padding between elements\n- **Single arrow color** — blue (#3b82f6) for all connections\n- **Labels in ALL CAPS** — section headers and node type labels\n- **No drop shadows** — flat only\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei',\n 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 11px uppercase type labels, 18px title\nfont-weight: 400 normal, 500 medium for node labels\n```\n\n## Box Styles\n\n```xml\n\n\n\n\n\nDATABASE\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n\n## Sizing Guide\n\n- Node box: min 120×40px, prefer 160×48px for readability\n- Title: top-left, 18px, gray-900, margin 32px from edges\n- Spacing: 80px minimum between nodes horizontally, 60px vertically\n","isInternal":false,"tokens":885,"sizeBytes":2822},{"name":"style-5-glassmorphism.md","path":"skills/fireworks-tech-graph/references/style-5-glassmorphism.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-5-glassmorphism.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 5: Glassmorphism\n\nFrosted glass cards on dark gradient. Designed for product sites, keynotes, and hero sections.\n\n## Colors\n\n```\nBackground gradient: #0d1117 → #161b22 → #0d1117 (diagonal)\n\nGlass card:\n fill: rgba(255,255,255,0.05)\n stroke: rgba(255,255,255,0.15)\n backdrop-filter: blur(12px) [SVG: use feGaussianBlur]\n box-radius: 12px\n\nText primary: #f0f6fc (near-white)\nText secondary: #8b949e (muted)\nText gradient: use linearGradient on text fill for hero labels\n\nAccent glows (one per layer):\n Blue glow: #58a6ff / rgba(88,166,255,0.3)\n Purple glow: #bc8cff / rgba(188,140,255,0.3)\n Green glow: #3fb950 / rgba(63,185,80,0.3)\n Orange glow: #f78166 / rgba(247,129,102,0.3)\n```\n\n## Background\n\n```xml\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n```\n\n## Glass Card Effect\n\nSVG cannot do real backdrop-filter, so simulate with:\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n\n\n```\n\n## Typography\n\n```\nfont-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 14px labels, 12px sublabels, 20px hero title\nfont-weight: 400 normal, 600 semi-bold, 700 bold titles\n```\n\n## Gradient Text (for hero labels)\n\n```xml\n\n \n \n \n \n\n\n AI Pipeline\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n```\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n\n```\n","isInternal":false,"tokens":1247,"sizeBytes":3723},{"name":"style-6-claude-official.md","path":"skills/fireworks-tech-graph/references/style-6-claude-official.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-6-claude-official.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 6: Claude Official\n\nInspired by Anthropic's Claude blog technical diagrams — warm, approachable, professional.\n\n```\nBackground: #f8f6f3 (warm cream)\nBox fill:\n - Blue tint: #a8c5e6 (alert/input nodes)\n - Green tint: #9dd4c7 (agent nodes)\n - Beige: #f4e4c1 (infrastructure/bus)\n - Gray tint: #e8e6e3 (storage/state)\nBox stroke: #4a4a4a (dark gray)\nBox radius: 12px\nText primary: #1a1a1a (near black)\nText secondary: #6a6a6a (medium gray)\nText labels: #5a5a5a (arrow labels)\n\nSemantic colors:\n Input/Source: #a8c5e6 (soft blue)\n Agent/Process: #9dd4c7 (soft teal-green)\n Infrastructure: #f4e4c1 (warm beige)\n Storage/State: #e8e6e3 (light gray)\n\nArrow color: #5a5a5a (consistent dark gray)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',\n Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 14px descriptions, 13px arrow labels\nfont-weight: 600 for node labels, 400 for descriptions, 700 for titles\n```\n\n## Box Shapes\n\n```xml\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## Arrows\n\n```xml\n\n \n \n \n\n\n\n\n\n\n\n```\n\n## Arrow Semantics\n\nUse different arrow styles to convey meaning:\n\n| Flow Type | Color | Stroke | Dash | Usage |\n|-----------|-------|--------|------|-------|\n| Primary data flow | #5a5a5a | 2px solid | none | Main request/response path |\n| Memory write | #5a5a5a | 2px | `5,3` | Write/store operations |\n| Memory read | #5a5a5a | 2px solid | none | Retrieval from store |\n| Control/trigger | #5a5a5a | 1.5px | `3,2` | Event triggers |\n\n```xml\n\n\n\n\n\n```\n\n## Arrow Labels\n\nArrow labels should be **technical and specific**, positioned mid-arrow:\n\n```xml\n\n store(embedding)\n\n```\n\nGood labels: `query(text)`, `retrieve(top_k=5)`, `embed(768d)`, `POST /api/search`\nAvoid vague labels: \"Process\", \"Send\", \"Get\"\n\n## Node Content Guidelines\n\nNode content should include **technical details**, not just concepts:\n\n**Good examples:**\n- \"Vector Store\" → \"Vector Store\" + \"• 768-dim embeddings\" + \"• Cosine similarity\"\n- \"LLM\" → \"GPT-4\" + \"• 8K context\" + \"• Temperature: 0.7\"\n- \"Memory\" → \"Redis Cache\" + \"• TTL: 5min\" + \"• Max: 4K tokens\"\n\n**Avoid vague descriptions:**\n- \"Process data\" → specify what processing\n- \"Store information\" → specify storage type and format\n- \"Handle requests\" → specify request type and method\n\nUse 2-3 lines per node:\n1. Component name (bold, 16px)\n2. Technical detail or implementation (14px)\n3. Key parameter or constraint (14px, optional)\n\n## Layer Labels\n\nFor multi-layer architectures, add layer labels on the left side:\n\n```xml\nInput\nProcessing\nStorage\n```\n\nPosition at the vertical center of each layer.\n\n## Legend Requirement\n\nWhen using 2+ arrow types or colors, include a legend in the bottom-right corner:\n\n```xml\n\nLegend\n\n\n\nRead operation\n\n\nWrite operation\n```\n\nPosition: bottom-right, 20px margin from edges.\n\n## Layout Principles\n\n- **Generous spacing**: Minimum 80px between node edges\n- **Horizontal alignment**: Same-layer nodes align perfectly\n- **Vertical flow**: Top-to-bottom preferred\n- **Symmetry**: Balanced composition\n- **Clean lines**: Orthogonal routing — vertical then horizontal, or vice versa\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n \n Agent name\n\n \n \n Publish\n\n```\n\n## Design Philosophy\n\nClaude's official style emphasizes:\n- **Warmth**: Cream background, soft fills\n- **Clarity**: High contrast text, generous spacing\n- **Professionalism**: Consistent stroke weights, aligned elements\n- **Approachability**: Rounded corners, friendly colors\n\nAvoid:\n- Harsh shadows or gradients\n- Overly saturated colors\n- Thin stroke weights (< 2px)\n- Cluttered layouts\n","isInternal":false,"tokens":2253,"sizeBytes":6941},{"name":"style-7-openai.md","path":"skills/fireworks-tech-graph/references/style-7-openai.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-7-openai.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 7: OpenAI Official\n\nClean, modern aesthetic matching OpenAI's documentation and research diagrams — minimal but precise.\n\n## Color Palette\n\n```\nBackground: #ffffff (pure white)\nPrimary text: #0d0d0d (near black)\nSecondary text: #6e6e80 (muted gray)\nBorder: #e5e5e5 (light gray)\n\nAccent colors (reserved):\nGreen accent: #10a37f (OpenAI brand green)\nBlue accent: #1d4ed8 (links, actions)\nOrange accent: #f97316 (highlights, warnings)\nGray accent: #71717a (secondary elements)\n```\n\n## Typography\n\n```\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif\nfont-size: 16px node labels, 13px descriptions, 12px arrow labels\nfont-weight: 600 for titles, 500 for labels, 400 for descriptions\nletter-spacing: 0\n```\n\nNo custom fonts. System font stack only for maximum compatibility.\n\n## Node Boxes\n\nClean, minimal boxes with subtle borders:\n\n```xml\n\n\n\n\n\n\n```\n\n**Key techniques:**\n1. White fill with light gray border (no shadows)\n2. Optional colored left-border accent strip (4px wide)\n3. `rx=\"8\"` for subtle rounding\n4. `stroke-width: 1.5` — thin, precise borders\n5. No gradients, no shadows, no decorative elements\n\n## Arrows\n\nThin, precise arrows with subtle colors:\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n\n\n\n\n\n\n```\n\n**Arrow guidelines:**\n- Prefer straight lines (orthogonal routing with right angles)\n- `stroke-width: 1.5` — thin and precise\n- Filled polygon arrowheads (not stroke-based)\n- Gray for default, green for primary/accent flows\n- Dashed (`stroke-dasharray=\"4,3\"`) for optional/async flows\n\n## Arrow Labels\n\nMinimal, small labels:\n\n```xml\n\n label\n\n```\n\nLabels should be:\n- 12px, gray color (`#6e6e80`)\n- No background rect by default (white background is usually sufficient); add a white fallback rect only when offsetting cannot prevent a collision\n- Short, technical language\n- Midpoint of arrow\n\n## Database Shapes\n\nClean cylinders with thin borders:\n\n```xml\n\n\n\n```\n\n## Grouping Containers\n\nDashed rect containers for logical grouping:\n\n```xml\n\n\n Group Label\n\n```\n\n## Node Content\n\nClean, minimal text layout:\n\n```xml\n\n\n Component Name\n\n\n Brief description\n\n```\n\n**Content guidelines:**\n- 1-2 lines per box\n- Main label: 16px, font-weight: 600, near-black\n- Description: 13px, font-weight: 400, gray\n- Center-aligned text within boxes\n\n## Layout Principles\n\n**Precise, grid-aligned layout:**\n- Snap all coordinates to 8px grid\n- Consistent 100px horizontal spacing\n- Consistent 120px vertical spacing\n- Generous whitespace (40px+ margins)\n- No decorative elements\n\n**OpenAI minimalism:**\n- Only use color when semantically meaningful (brand green for primary flow)\n- White boxes on white background — differentiation through border and label only\n- Avoid: shadows, gradients, patterns, icons, decorative elements\n- Prefer: straight lines, orthogonal routing, thin strokes\n\n## SVG Template\n\n```xml\n\n \n \n \n \n \n \n \n \n \n\n \n \n\n \n Diagram Title\n\n \n \n Component\n Description\n\n \n \n label\n\n```\n\n## Design Philosophy\n\nOpenAI Official style emphasizes:\n- **Minimalism**: White on white, only essential visual elements\n- **Precision**: Thin strokes, sharp corners (rx=8), grid-aligned\n- **Clarity**: Content-first, no visual noise\n- **Brand consistency**: `#10a37f` green used sparingly for primary flows\n\nAvoid:\n- Shadows and gradients\n- Colorful fills (white fill only)\n- Thick borders (>2px)\n- Decorative elements (icons, patterns, textures)\n- Custom fonts (system stack only)\n","isInternal":false,"tokens":2152,"sizeBytes":6871},{"name":"style-8-dark-luxury.md","path":"skills/fireworks-tech-graph/references/style-8-dark-luxury.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-8-dark-luxury.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 8 — Dark Luxury\n\nInspired by the `dark-gold` theme from [Understand-Anything](https://github.com/nicholasgasior/understand-anything).\nDeep black canvas with warm champagne-gold accents and hybrid serif/sans typography.\nUniquely warm among all dark styles — closest peer is style-2 (Dark Terminal) but with a premium editorial feel.\n\n## Color Tokens\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| Background | `#0a0a0a` | Canvas fill (deepest black, no blue tint) |\n| Surface | `#111111` | Node / panel fill |\n| Elevated | `#1a1a1a` | Secondary panels, sub-headers |\n| Accent gold | `#d4a574` | Primary arrows, titles, borders, cluster containers |\n| Accent dim | `#c9a96e` | Muted gold borders, secondary accents, cluster labels |\n| Accent bright | `#e8c49a` | Highlights, selected state stroke |\n| Text primary | `#f5f0eb` | Main labels (warm near-white) |\n| Text secondary | `#a39787` | Sub-labels, descriptions |\n| Text muted | `#6b5f53` | Annotations, fine print |\n\n## Typography\n\n```\nTitle / Section label: Georgia, 'Times New Roman', serif\n font-size: 21px (diagram title), 14px (section labels)\n font-weight: 700\n fill: #f5f0eb / #c9a96e (gold for section headers)\n\nNode name: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif\n font-size: 13-14px, font-weight: 600, fill: \n\nSub-label / detail: sans-serif, font-size: 10-11px, fill: #a39787 or #6b5f53\n\nArrow label / legend: sans-serif, font-size: 10-11px, fill: #a39787\n\nCode / path text: 'Cascadia Code', 'SF Mono', 'Courier New', monospace\n font-size: 10-11px, fill: #a39787\n```\n\n**Rule**: Georgia serif is used ONLY for diagram titles and cluster/section labels (≥14px).\nAll node names, arrow labels, and fine-print use sans-serif. This prevents CJK readability issues\nat small sizes while preserving the luxury editorial hook where it's most visible.\n\n## Node Semantic Color Buckets\n\nSix buckets cover the full color wheel — no two adjacent bucket colors are similar:\n\n| Bucket | Border Color | Use For |\n|--------|-------------|---------|\n| Code / Logic | `#5a9e6f` (sage green) | functions, classes, modules, algorithms |\n| Service / API | `#a78bfa` (soft violet) | services, endpoints, APIs, gateways |\n| Data / Storage | `#38bdf8` (sky blue) | databases, tables, files, caches |\n| Concept / Domain | `#f87171` (soft rose) | concepts, domains, entities, topics |\n| Infra / Config | `#fbbf24` (amber yellow) | infrastructure, config, scripts, pipelines |\n| Meta / Doc | `#94a3b8` (cool gray) | documents, schemas, resources, sources |\n\nAll nodes share: `rx=\"6\"` rounded rect, `fill=\"#111111\"`, `stroke-width=\"1.5\"`, stroke color matches bucket.\n\n### SVG node example (Code / Logic):\n\n```xml\n\nMyComponent\nReact component · state management\n```\n\n## Arrow System\n\n| Flow Type | Color | Stroke | Dash | Marker |\n|-----------|-------|--------|------|--------|\n| Primary / structural | `#d4a574` (gold) | 2px solid | none | gold arrowhead |\n| Data flow | `#6ee7b7` (mint) | 1.5px solid | none | mint arrowhead |\n| Control / trigger | `#fdba74` (amber-orange) | 1.5px solid | none | orange arrowhead |\n| Reference / semantic | `#a39787` (warm muted) | 1px dashed | `4,3` | muted arrowhead |\n| Dependency | `#a78bfa` (violet) | 1px dashed | `6,3` | violet arrowhead |\n| Feedback / loop | `#d4a574` (gold) | 1.5px curved | — | gold arrowhead |\n\n### SVG arrow markers (add to ``):\n\n```xml\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n```\n\n### Arrow label placement\n\nUse **offset-first**: place label 6–8px above horizontal arrows (not centered on the line).\nAdd background rect (`fill=\"#0a0a0a\" opacity=\"0.9\"`) only when the label still collides with another element.\n\n## Container / Cluster Style\n\n```xml\n\n\n\n\nLAYER NAME\n```\n\n## Background Treatment\n\nNo gradient needed — depth comes from contrast levels:\n\n1. Canvas `#0a0a0a` — absolute black floor\n2. Node surface `#111111` — first elevation (+1 stop)\n3. Panel/sub-header `#1a1a1a` — second elevation (+2 stops)\n4. Gold `#d4a574` — the only warmth; draws the eye to structure\n\nOptional: subtle ambient radial glow around the central cluster\n```xml\n\n \n \n\n\n```\n\n## Full `\n```\n\n## ViewBox Recommendations\n\n| Diagram | ViewBox |\n|---------|---------|\n| Standard architecture | `0 0 960 600` |\n| Tall pipeline / flow | `0 0 960 820` |\n| Wide multi-layer | `0 0 1200 600` |\n\n## Comparable Styles\n\n| Style | Background | Accent | Typography |\n|-------|-----------|--------|-----------|\n| Style 2 Dark Terminal | `#0f0f1a` (blue-black) | `#00ff88` (neon green) | monospace throughout |\n| **Style 8 Dark Luxury** | `#0a0a0a` (pure black) | `#d4a574` (champagne gold) | serif titles + sans body |\n| Style 3 Blueprint | `#0a1628` (navy) | `#4fc3f7` (cyan) | sans-serif |\n\n**When to choose Style 8**: architecture/pipeline docs where you want editorial gravitas —\nREADME hero images, conference slides, knowledge-base diagrams, premium product docs.\n","isInternal":false,"tokens":2341,"sizeBytes":7684},{"name":"style-9-c4-review-canvas.md","path":"skills/fireworks-tech-graph/references/style-9-c4-review-canvas.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-9-c4-review-canvas.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style 9: C4 Review Canvas\n\nA review-room canvas for C4 context, container, and component diagrams. The\nwarm paper surface and deterministic pencil echoes make design discussion feel\nhuman while the underlying geometry remains exact.\n\n## Best fit\n\n- Architecture Decision Records and design reviews\n- C4 context, container, or component views\n- Responsibility and dependency reviews\n- Diagrams that need annotations without looking like a slide template\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#f7f2e8` |\n| Card | `#fffdf7` |\n| Primary text | `#24312f` |\n| Boundary | `#8c7d68`, dashed |\n| Primary relationship | `#365f56` |\n| State change | `#a44a3f` |\n| Data/read | `#356a8a` |\n| Asynchronous | `#7a5c99` |\n\nUse Avenir/system sans-serif. Keep type labels uppercase and small; keep\ndescriptions sentence-like and technologies terse.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"c4-review\"` and provide:\n\n- `diagram_type: \"c4\"`\n- one `c4_level`: `context`, `container`, or `component`\n- `scope`, `title`, integer `rough_seed`, and a legend\n- every node: `c4_type`, `label`, and `description`\n- container/component nodes: `technology` and a card at least `170×96`\n- every relationship: short `label` and explicit `protocol`\n\nDo not mix a deeper C4 element into a higher-level view. The runtime rejects a\ncomponent in a container view and rejects unknown boundary parents.\n\n## Roughness without geometry drift\n\nThe `rough_seed` creates stable decorative second strokes. Decorations use\n`data-graph-role=\"decoration\"`; the ordinary orthogonal path remains the only\nsemantic edge. A seed must reproduce byte-identical SVG across runs.\n\nNever jitter:\n\n- node bounds or port anchors\n- the semantic route or arrowhead\n- label bounds\n- container gutters\n\n## Composition rules\n\n- One abstraction level per canvas\n- At least `40px` between nodes and `20px` inside boundaries\n- Zero undeclared crossings and zero bridge crossings for official samples\n- At most two bends per relationship; prefer aligned straight paths\n- Put external people/systems outside the system boundary with a clear gutter\n- Keep labels short enough to sit in whitespace, not on top of cards\n- Wrap responsibility copy to at most two lines; keep technology in the lower-right safe area\n\n## Signature checklist\n\n- Top-right dashed review stamp showing the C4 level and review state\n- Uppercase C4 type, responsibility copy, and a separate technology footer on each card\n- Dashed external-system cards and deterministic pencil echoes that never alter geometry\n- Two-line relationship badges: action first, protocol in brackets below\n\n## Prompt cues\n\n- English: `C4 review board`, `ADR review canvas`, `container responsibility review`\n- 中文：`C4 评审画布`、`ADR 评审图`、`职责边界评审图`\n- Copyable cue: `Use Style 9 C4 Review Canvas; show one C4 level, responsibilities, technologies, review state, and relationship protocols.`\n\n## Do not blend with\n\nDo not add Region/VPC ownership bands, event-metro stations, or golden-signal\nmetric chips. If those facts dominate the request, route to Style 10, 11, or\n12 instead of turning the C4 review into a mixed abstraction canvas.\n\n## Fixture\n\n`fixtures/c4-review-canvas-style9.json` demonstrates a checkout container\nreview with a deterministic seed and a 100-point showcase composition score.\n","isInternal":false,"tokens":797,"sizeBytes":3356},{"name":"style-diagram-matrix.md","path":"skills/fireworks-tech-graph/references/style-diagram-matrix.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/style-diagram-matrix.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Style-to-Diagram-Type Adaptation Guide\n\nNot all styles work equally well for every diagram type. Use this guide to pick the best style.\n\n## Engineering-first styles (9–12)\n\nStyles 9–12 pair a visual language with an executable semantic contract. They\nare deliberately specialized rather than universal skins.\n\n| Style | Required evidence | Visual fingerprint | Prompt cues | Fallback | Never blend with |\n|---|---|---|---|---|---|\n| 9 C4 Review Canvas | One declared C4 level, responsibilities, technology, labeled protocols | Warm review board, C4 type headers, dashed review stamp, deterministic pencil echo | `C4 review board`, `C4 评审画布`, `ADR 评审图` | Styles 1–7 generic architecture | Region/VPC bands, event stations, live metric chips |\n| 10 Cloud Fabric | Region/network/workload ownership and named cross-boundary mechanisms | Cloud grid, nested ownership spines, neutral manifest glyphs, deployment-mode stamp | `deployment topology`, `多区域部署图`, `Region/VPC 归属图` | Styles 1–7 when deployment facts are absent | C4 abstraction labels, station numbering, golden-signal cards |\n| 11 Event Transit | Topics, ordered processors, consumer groups, junctions, DLQ/state | Thin metro rails, numbered stations, fixed arrowheads, role-specific terminals | `event metro map`, `事件地铁图`, `Kafka 拓扑图` | Generic flow style when stream evidence is absent | Cloud nesting, C4 cards, SRE dashboards |\n| 12 Ops Pulse | Fixed window, four golden signals, statuses, one critical path and trace | Live stamp, status rails, metric windows, numbered hops, trace ruler | `reliability pulse`, `事故排查视图`, `黄金信号追踪图` | Generic architecture when measured evidence is absent | Deployment ownership, event rail metaphor, C4 review marks |\n\nAll four official fixtures use the `showcase` composition contract: at least\n40px node spacing, 20px container gutter, zero bridge crossings, at most two\nbends per edge, and no semantic edge duplicated for visual effects.\n\n## Architecture Diagram\n| Style | Suitability | Notes |\n|-------|----------|\n| 1 Flat Icon | Excellent | Default choice; colorful node fills, clear layering |\n| 2 Dark Terminal | Excellent | Popular for dev blogs; use colored borders on dark bg |\n| 3 Blueprint | Excellent | Perfect for formal architecture docs |\n| 4 Notion Clean | Good | Minimal, works for inline docs |\n| 5 Glassmorphism | Good | Striking for presentations and product pages |\n| 6 Claude Official | Good | Warm aesthetic, Anthropic-style presentations |\n| 7 OpenAI Official | Good | Clean, precise; minimal borders, brand green accents |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Premium editorial; gold-on-black layers stand out for architecture docs |\n\n## Class Diagram / ER Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colored headers per class category |\n| 2 Dark Terminal | Good | High contrast for code-like diagrams |\n| 3 Blueprint | Excellent | Best for formal UML documentation |\n| 4 Notion Clean | Excellent | Clean, minimal; ideal for Notion-embedded diagrams |\n| 5 Glassmorphism | Poor | Glass effects distract from structural content |\n| 6 Claude Official | Excellent | Warm, readable; good for documentation |\n| 7 OpenAI Official | Excellent | Minimal aesthetic matches UML precision |\n| 8 Dark Luxury *(AI-authored)* | Fair | Non-standard dark bg for UML; use only for premium editorial contexts |\n\n## Sequence Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Clear lifelines; activation boxes visible |\n| 2 Dark Terminal | Good | Good for dev articles; dashed lifelines visible |\n| 3 Blueprint | Excellent | Formal, technical documentation |\n| 4 Notion Clean | Excellent | Best for Notion-embedded sequence diagrams |\n| 5 Glassmorphism | Poor | Glass effects make lifelines hard to read |\n| 6 Claude Official | Excellent | Ward contrast |\n| 7 OpenAI Official | Excellent | Minimal, precise; ideal for API docs |\n| 8 Dark Luxury *(AI-authored)* | Good | Dramatic contrast; dark lifelines suit developer blogs and premium tech docs |\n\n## Flowchart / Process Flow\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Default; colorful decision diamonds |\n| 2 Dark Terminal | Good | Works well for dev workflow diagrams |\n| 3 Blueprint | Good | Formal process documentation |\n| 4 Notion Clean | Good | Clean for SOPs and inline docs |\n| 5 Glassmorphism | Good | Striking for product demos |\n| 6 Claude Official | Good | Warm aesthetic for presentations |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Good | Striking for premium process documentation |\n\n## Mind Map / Concept Map\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent branches, engaging |\n| 2 Dark Terminal | Good | Neon-like branches on dark bg |\n| 3 Blueprint | Poor | Blueprint grid conflicts with radial layout |\n| 4 Notion Clean | Excellent | Ideal for n brainstorming |\n| 5 Glassmorphism | Excellent | Stunning visual for presentations |\n| 6 Claude Official | Good | Warm, readable |\n| 7 OpenAI Official | Good | Clean and minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Gold accent branches on black; radial layouts stand out in presentations |\n\n## Data Flow Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded arrows by data type |\n| 2 Dark Terminal | Excellent | Glowing data paths on dark bg |\n| 3 Blueprint | Excellent | Formal data flow documentation |\n| 4 Notion Clean | Good | Minimal, clean |\n| 5 Glassmorphism | Poor | Distracts from flow semantics |\n| 6 Claude Official | Good | Readable |\n| 7 OpenAI Official | Good | Precise, minimal |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Color-coded data paths shine against deep black; ideal for data engineering docs |\n\n## Use Case Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Good | Colorful use case ellipses |\n| 2 Dark Terminal | Poor | Stick figures less visible on dark bg |\n| 3 rint | Excellent | Classic UML aesthetic |\n| 4 Notion Clean | Excellent | Perfect for product requirement docs |\n| 5 Glassmorphism | Poor | Unnecessary visual noise |\n| 6 Claude Official | Excellent | Warm, professional |\n| 7 OpenAI Official | Excellent | Clean, precise UML |\n| 8 Dark Luxury *(AI-authored)* | Fair | Stick figures less visible on deep black; use cautiously |\n\n## State Machine Diagram\n| Style | Suitability | Notes |\n|-------|------------|-------|\nFlat Icon | Good | Colorful states |\n| 2 Dark Terminal | Good | Glowing states and transitions |\n| 3 Blueprint | Excellent | Best for formal UML state machines |\n| 4 Notion Clean | Excellent | Clean for documentation |\n| 5 Glassmorphism | Poor | Distracts from state transitions |\n| 6 Claude Official | Excellent | Readable |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Good | High contrast for state transitions; editorial quality |\n\n## Network Topology\n| Style | Suitabili |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful device icons |\n| 2 Dark Terminal | Excellent | Cyberpunk-style network maps |\n| 3 Blueprint | Excellent | Ideal for infrastructure docs |\n| 4 Notion Clean | Good | Clean for IT documentation |\n| 5 Glassmorphism | Good | Striking for presentations |\n| 6 Claude Official | Good | Professional network diagrams |\n| 7 OpenAI Official | Good | Clean infrastructure diagrams |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Deep black classic for infrastructure docs; gold topology lines pop |\n\n## Comparison / Feature Matrix\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Color-coded checkmarks |\n| 2 Dark Terminal | Good | Works for dev tool comparisons |\n| 3 Blor | Grid conflicts with table layout |\n| 4 Notion Clean | Excellent | Perfect for Notion-embedded tables |\n| 5 Glassmorphism | Poor | Distabular data |\n| 6 Claude Official | Excellent | Clean, warm |\n| 7 OpenAI Official | Excellent | Minimal, precise |\n| 8 Dark Luxury *(AI-authored)* | Fair | Dark bg non-standard for comparison tables; use cautiously |\n\n## Timeline / Gantt\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful bars by category |\n| 2 Dark Terminal | Good | Works for dev roadmaps |\n| 3 Blueprint | Good | Formal project plans |\n| 4 Notion Clean | Excellent | Ideal for Notion project docs |\n| 5 Glassmorphism | Good | Striking for keynote presentations |\n| 6 Claude Official | Good | Warm, professional |\n| 7 OpenAI Official | Good | Clean timeline |\n| 8 Dark Luxury *(AI-authored)* | Good | Premium project roadmaps and keynote presentations |\n\n## Agent / Memory Architecture\n| Style | Suitability | Notes |\n|-------|------------|-------|\n| 1 Flat Icon | Excellent | Colorful layers, engaging |\n| 2 Dark Terminal | Excellent | Popular for AI/ML blog posts |\n| 3 Blueprint | Good | Formal AI system documentation |\n| 4 Notion Clean | Good | Clean for AI research notes |\n| 5 Glassmorphism | Excellent | Stunning for AI product presentations |\n| 6 Claude Official | Excellent | Anthropic AI aesthetic |\n| 7 OpenAI Official | Excellent | OpenAI AI aesthetic |\n| 8 Dark Luxury *(AI-authored)* | Excellent | Best for premium AI system docs; champagne gold on deep black |\n","isInternal":false,"tokens":2211,"sizeBytes":9422},{"name":"svg-layout-best-practices.md","path":"skills/fireworks-tech-graph/references/svg-layout-best-practices.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/svg-layout-best-practices.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# SVG Technical Diagram Layout Best Practices\n\n## Universal Layout Rules (Apply to All Styles)\n\n### 1. Component Spacing\n- **Minimum clearance between components**: 80px (edge to edge)\n- **Minimum clearance for arrow paths**: 60px from component edges\n- **Layer vertical spacing**: 120px between horizontal layers\n- **Same-layer horizontal spacing**: 100-120px between components\n\n### 2. Arrow Routing & Connection Points\n\n#### Connection Point Rules\n- **Never connect arrows to component corners** - use midpoints of edges\n- **Entry/exit points**:\n - Top edge: `cx ± offset` where offset = 0 for single arrow, ±30px for multiple\n - Bottom edge: same rule\n - Left/right edges: `cy ± offset`\n- **Clearance from corners**: minimum 20px\n\n#### Arrow Path Routing\n- **Avoid diagonal lines crossing components** - use orthogonal routing (L-shaped paths)\n- **For curved arrows**:\n - Control point should be at least 40px away from any component edge\n - Use intermediate waypoints for complex routing: `M x1,y1 L x2,y2 Q cx,cy x3,y3`\n- **Multiple arrows between same layers**: stagger Y-coordinates by 15-20px to avoid overlap\n\n#### Arrow Overlap Prevention\n```svg\n\n\n\n\n\n\n\n\n\n```\n\n### 3. Arrow Label Placement\n- **Position**: midpoint of arrow path, offset by 5-10px perpendicular to arrow direction\n- **Offset first**: move the label 5-10px perpendicular to the arrow so it does not sit on the stroke\n- **Background rect fallback**: include only when offsetting cannot avoid another visual element, with:\n - Padding: 4px horizontal, 2px vertical\n - Fill: match background color\n - Opacity: 0.9-0.95\n- **Safety distance**: 15px minimum from any component edge\n- **Multiple converging arrows**: stagger label positions vertically by 20px\n\n### 4. Component Overlap Detection\nBefore finalizing SVG, check:\n- No component bounding boxes overlap (8px safety margin)\n- No arrow paths pass through component interiors (except intentional tunneling with dashed style)\n- No text labels overlap with components or other labels\n\n### 5. Z-Index Layering (SVG render order)\n```svg\n\n1. Background rect\n2. Grouping containers (dashed rects)\n3. Arrow paths\n4. Arrow label background rects when collision fallback is needed\n5. Components (boxes, cylinders, etc.)\n6. Component text\n7. Arrow label text\n8. Legend\n```\n\n## Style-Specific Enhancements\n\n### Style-1: Flat Icon Clean\n- **Perfect alignment**: snap all coordinates to 8px grid\n- **Sharp corners**: rx=\"8\" ry=\"8\" for rounded rects (consistent)\n- **Arrows**: thin (1.5-2px), filled polygon markers\n- **No shadows**: flat design principle\n\n### Style-6: Claude Official Warm\n- **Soft shadows**: ``\n- **Rounded corners**: rx=\"12\" ry=\"12\" (more rounded than Style-1)\n- **Arrows**: medium weight (2px), subtle markers\n\n## Validation Checklist\n\nBefore exporting PNG, verify:\n- [ ] No arrow-component overlaps (visual inspection)\n- [ ] Arrow labels are offset from lines; fallback background rects are used only where needed\n- [ ] Minimum 60px clearance for all arrow paths\n- [ ] Component spacing ≥ 80px\n- [ ] Arrow connection points avoid corners (≥20px from corner)\n- [ ] Multiple arrows between layers are staggered\n- [ ] Legend is readable and doesn't overlap content\n- [ ] SVG renders cleanly via `cairosvg` (or `rsvg-convert` as fallback)\n\n## Common Anti-Patterns to Avoid\n\n| Anti-Pattern | Fix |\n|--------------|-----|\n| Arrow crosses component | Use orthogonal routing, increase control point distance |\n| Label overlaps component | Increase offset; add a matching-background rect if the collision remains |\n| Components too close | Increase spacing to 80px minimum |\n| Arrow connects to corner | Move connection point to edge midpoint offset |\n| No z-index planning | Follow render order: arrows -> components -> text |\n","isInternal":false,"tokens":1043,"sizeBytes":4218},{"name":"visual-quality.md","path":"skills/fireworks-tech-graph/references/visual-quality.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/references/visual-quality.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Visual quality and exact text\n\n## Readability\n\nThe generator retains each style's palette, material, radius, stroke and motion\nsignature. `scripts/style_quality.py` strengthens supporting text on its default\nopaque canvas toward a 4.5:1 contrast target. This is a token-level measurement,\nnot certification for custom fills, translucent glass, font size or every pixel.\nInspect the final raster at the intended reading size.\n\n- Flat Icon / Notion / OpenAI: keep quiet white space, make captions and section\n labels readable instead of using nearly invisible gray.\n- Dark Terminal / Ops Pulse: retain accent-coded routes and dark surfaces; lift\n auxiliary text, not glow intensity. Keep status identifiable by text as well as color.\n- Blueprint: preserve the engineering grid, cyan linework and registration details.\n- Glassmorphism: keep the panel translucency; test text on the composited panel.\n- Claude: retain warm paper and brown hierarchy with readable secondary text.\n- C4 Review Canvas: preserve responsibilities and protocols; use both description\n lines for Chinese as well as spaced words. Never hide an essential responsibility.\n- Cloud Fabric: preserve region/VPC nesting; strengthen ownership labels without\n introducing competing connector colors.\n- Event Transit: preserve route directions, station ordering and the distinct DLQ.\n- Dark Luxury: keep the AI-authored restrained gold/serif composition; exact text,\n geometry and visual checks apply just as they do to generated styles.\n\n## Text completeness\n\n`layout.json.typography` reports visible truncation, full source copy and a recovery\nhint. `data-full-text` preserves provenance but does not make hidden text visible.\nUse `text_policy: \"strict\"` to reject truncation. Widen the card, use an approved\nshort label, or split views. CJK descriptions wrap at character boundaries rather\nthan discarding the second line. Font width estimates remain heuristic; Noto Sans\nCJK SC is included as a cross-platform fallback, not bundled or auto-installed.\n\n## Export and verification\n\nPrefer the unified `export-png` command, 1920px by default. Its root-canvas parser\nsupports viewBox-only SVG, decimal/physical dimensions and nonzero SVG origins;\nthe JSON layout generator itself uses origin 0 0. Export rejects oversized images\nand active/external SVG content. Confirm PNG dimensions and inspect actual text.\n\nUse the public style fixtures for identity, the shared quality-baseline fixtures\nfor comparison, and long-text fixtures/tests for readability. Adding metadata or\npassing XML checks alone never proves a visually successful diagram.\n","isInternal":false,"tokens":530,"sizeBytes":2611},{"name":"architecture-v1.schema.json","path":"skills/fireworks-tech-graph/schemas/architecture-v1.schema.json","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/schemas/architecture-v1.schema.json","title":"Schemas Skill","category":"anthropic-skill","format":"json","content":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/architecture-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"architecture\" } } }\n ]\n}\n","frontmatter":{"$schema":"https://json-schema.org/draft/2020-12/schema","$id":"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/architecture-v1.schema.json","allOf":[{"$ref":"diagram-v1.schema.json"},{"properties":{"mode":{"const":"architecture"}}}]},"isInternal":false,"tokens":91,"sizeBytes":288},{"name":"diagram-v1.schema.json","path":"skills/fireworks-tech-graph/schemas/diagram-v1.schema.json","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/schemas/diagram-v1.schema.json","title":"Schemas Skill","category":"anthropic-skill","format":"json","content":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/diagram-v1.schema.json\",\n \"title\": \"Fireworks Tech Graph Diagram v1\",\n \"type\": \"object\",\n \"required\": [\"schema_version\", \"mode\", \"nodes\", \"arrows\"],\n \"properties\": {\n \"schema_version\": { \"const\": 1 },\n \"mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"style\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"visual_theme\": {\n \"oneOf\": [\n { \"type\": \"integer\", \"minimum\": 1, \"maximum\": 12 },\n { \"type\": \"string\", \"minLength\": 1 }\n ]\n },\n \"diagram_type\": { \"type\": \"string\", \"minLength\": 1 },\n \"semantic_profile\": {\n \"enum\": [\"generic\", \"c4-review\", \"cloud-fabric\", \"event-transit\", \"ops-pulse\"]\n },\n \"c4_level\": { \"enum\": [\"context\", \"container\", \"component\"] },\n \"review_state\": { \"type\": \"string\", \"minLength\": 1 },\n \"rough_seed\": { \"type\": \"integer\" },\n \"scope\": { \"type\": \"string\", \"minLength\": 1 },\n \"platform_profile\": { \"enum\": [\"provider-neutral\", \"aws\", \"azure\", \"gcp\", \"kubernetes\"] },\n \"deployment_mode\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_manifest_version\": { \"type\": \"string\", \"minLength\": 1 },\n \"line_code\": { \"type\": \"string\", \"minLength\": 1 },\n \"observation_window\": { \"type\": \"string\", \"minLength\": 1 },\n \"critical_path\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"uniqueItems\": true,\n \"items\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"topics\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"maxItems\": 4,\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"color\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"color\": { \"type\": \"string\", \"minLength\": 1 }\n },\n \"additionalProperties\": true\n }\n },\n \"text_policy\": { \"enum\": [\"report\", \"strict\"] },\n \"viewBox\": { \"type\": \"string\", \"description\": \"Four finite numbers, origin 0 0 and positive width and height; validated by the CLI.\" },\n \"quality_profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"composition\": {\n \"type\": \"object\",\n \"properties\": {\n \"profile\": { \"enum\": [\"standard\", \"showcase\"] },\n \"max_bends_per_edge\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_total_bends\": { \"type\": \"integer\", \"minimum\": 0 },\n \"max_route_stretch\": { \"type\": \"number\", \"minimum\": 0 },\n \"max_bridged_crossings\": { \"type\": \"integer\", \"minimum\": 0 },\n \"min_node_gap\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_container_gutter\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_label_clearance\": { \"type\": \"number\", \"minimum\": 0 },\n \"min_segment_length\": { \"type\": \"number\", \"minimum\": 0 }\n },\n \"additionalProperties\": false\n },\n \"legend_orientation\": { \"enum\": [\"vertical\", \"horizontal\"] },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"containers\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\", \"x\", \"y\", \"width\", \"height\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"nodes\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"required\": [\"id\"],\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent\": { \"type\": \"string\", \"minLength\": 1 },\n \"c4_type\": { \"enum\": [\"person\", \"software_system\", \"external_system\", \"container\", \"component\"] },\n \"description\": { \"type\": \"string\" },\n \"technology\": { \"type\": \"string\" },\n \"deployment_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"deployment_kind\": { \"type\": \"string\", \"minLength\": 1 },\n \"icon_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"transit_role\": { \"enum\": [\"producer\", \"station\", \"junction\", \"consumer\", \"dlq\", \"state_store\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"station_order\": { \"type\": \"integer\", \"minimum\": 0 },\n \"consumer_group\": { \"type\": \"string\", \"minLength\": 1 },\n \"ops_role\": { \"enum\": [\"service\", \"collector\", \"trace_span\"] },\n \"span_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"parent_span\": { \"type\": \"string\", \"minLength\": 1 },\n \"start_ms\": { \"type\": \"number\", \"minimum\": 0 },\n \"duration_ms\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"signals\": {\n \"type\": \"object\",\n \"required\": [\"latency\", \"traffic\", \"errors\", \"saturation\"],\n \"properties\": {\n \"latency\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"traffic\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"errors\": { \"$ref\": \"#/$defs/goldenSignal\" },\n \"saturation\": { \"$ref\": \"#/$defs/goldenSignal\" }\n },\n \"additionalProperties\": false\n },\n \"x\": { \"type\": \"number\" },\n \"y\": { \"type\": \"number\" },\n \"width\": { \"type\": \"number\", \"exclusiveMinimum\": 0 },\n \"height\": { \"type\": \"number\", \"exclusiveMinimum\": 0 }\n },\n \"additionalProperties\": true\n }\n },\n \"arrows\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"id\": { \"type\": \"string\", \"minLength\": 1 },\n \"source\": { \"type\": \"string\" },\n \"target\": { \"type\": \"string\" },\n \"edge_kind\": { \"enum\": [\"business\", \"telemetry\"] },\n \"transit_type\": { \"enum\": [\"rail\", \"publish\", \"branch\", \"consume\", \"retry\", \"state\", \"dead_letter\"] },\n \"topic_id\": { \"type\": \"string\", \"minLength\": 1 },\n \"protocol\": { \"type\": \"string\", \"minLength\": 1 },\n \"via\": { \"type\": \"string\", \"minLength\": 1 },\n \"route_points\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"array\",\n \"prefixItems\": [{ \"type\": \"number\" }, { \"type\": \"number\" }],\n \"items\": false,\n \"minItems\": 2,\n \"maxItems\": 2\n }\n }\n },\n \"additionalProperties\": true\n }\n }\n },\n \"$defs\": {\n \"goldenSignal\": {\n \"type\": \"object\",\n \"required\": [\"value\", \"unit\", \"window\", \"status\"],\n \"properties\": {\n \"value\": { \"type\": [\"string\", \"number\"] },\n \"unit\": { \"type\": \"string\", \"minLength\": 1 },\n \"window\": { \"type\": \"string\", \"minLength\": 1 },\n \"status\": { \"enum\": [\"ok\", \"warn\", \"critical\", \"unknown\"] }\n },\n \"additionalProperties\": false\n }\n },\n \"additionalProperties\": true\n}\n","frontmatter":{"$schema":"https://json-schema.org/draft/2020-12/schema","$id":"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/diagram-v1.schema.json","title":"Fireworks Tech Graph Diagram v1","type":"object","required":["schema_version","mode","nodes","arrows"],"properties":{"schema_version":{"const":1},"mode":{"type":"string","minLength":1},"style":{"oneOf":[{"type":"integer","minimum":1,"maximum":12},{"type":"string","minLength":1}]},"visual_theme":{"oneOf":[{"type":"integer","minimum":1,"maximum":12},{"type":"string","minLength":1}]},"diagram_type":{"type":"string","minLength":1},"semantic_profile":{"enum":["generic","c4-review","cloud-fabric","event-transit","ops-pulse"]},"c4_level":{"enum":["context","container","component"]},"review_state":{"type":"string","minLength":1},"rough_seed":{"type":"integer"},"scope":{"type":"string","minLength":1},"platform_profile":{"enum":["provider-neutral","aws","azure","gcp","kubernetes"]},"deployment_mode":{"type":"string","minLength":1},"icon_manifest_version":{"type":"string","minLength":1},"line_code":{"type":"string","minLength":1},"observation_window":{"type":"string","minLength":1},"critical_path":{"type":"array","minItems":1,"uniqueItems":true,"items":{"type":"string","minLength":1}},"topics":{"type":"array","minItems":1,"maxItems":4,"items":{"type":"object","required":["id","color"],"properties":{"id":{"type":"string","minLength":1},"color":{"type":"string","minLength":1}},"additionalProperties":true}},"text_policy":{"enum":["report","strict"]},"viewBox":{"type":"string","description":"Four finite numbers, origin 0 0 and positive width and height; validated by the CLI."},"quality_profile":{"enum":["standard","showcase"]},"composition":{"type":"object","properties":{"profile":{"enum":["standard","showcase"]},"max_bends_per_edge":{"type":"integer","minimum":0},"max_total_bends":{"type":"integer","minimum":0},"max_route_stretch":{"type":"number","minimum":0},"max_bridged_crossings":{"type":"integer","minimum":0},"min_node_gap":{"type":"number","minimum":0},"min_container_gutter":{"type":"number","minimum":0},"min_label_clearance":{"type":"number","minimum":0},"min_segment_length":{"type":"number","minimum":0}},"additionalProperties":false},"legend_orientation":{"enum":["vertical","horizontal"]},"width":{"type":"number","exclusiveMinimum":0},"height":{"type":"number","exclusiveMinimum":0},"containers":{"type":"array","items":{"type":"object","required":["id","x","y","width","height"],"properties":{"id":{"type":"string","minLength":1},"parent":{"type":"string","minLength":1},"deployment_kind":{"type":"string","minLength":1},"x":{"type":"number"},"y":{"type":"number"},"width":{"type":"number","exclusiveMinimum":0},"height":{"type":"number","exclusiveMinimum":0}},"additionalProperties":true}},"nodes":{"type":"array","items":{"type":"object","required":["id"],"properties":{"id":{"type":"string","minLength":1},"parent":{"type":"string","minLength":1},"c4_type":{"enum":["person","software_system","external_system","container","component"]},"description":{"type":"string"},"technology":{"type":"string"},"deployment_id":{"type":"string","minLength":1},"deployment_kind":{"type":"string","minLength":1},"icon_id":{"type":"string","minLength":1},"transit_role":{"enum":["producer","station","junction","consumer","dlq","state_store"]},"topic_id":{"type":"string","minLength":1},"station_order":{"type":"integer","minimum":0},"consumer_group":{"type":"string","minLength":1},"ops_role":{"enum":["service","collector","trace_span"]},"span_id":{"type":"string","minLength":1},"parent_span":{"type":"string","minLength":1},"start_ms":{"type":"number","minimum":0},"duration_ms":{"type":"number","exclusiveMinimum":0},"signals":{"type":"object","required":["latency","traffic","errors","saturation"],"properties":{"latency":{"$ref":"#/$defs/goldenSignal"},"traffic":{"$ref":"#/$defs/goldenSignal"},"errors":{"$ref":"#/$defs/goldenSignal"},"saturation":{"$ref":"#/$defs/goldenSignal"}},"additionalProperties":false},"x":{"type":"number"},"y":{"type":"number"},"width":{"type":"number","exclusiveMinimum":0},"height":{"type":"number","exclusiveMinimum":0}},"additionalProperties":true}},"arrows":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string","minLength":1},"source":{"type":"string"},"target":{"type":"string"},"edge_kind":{"enum":["business","telemetry"]},"transit_type":{"enum":["rail","publish","branch","consume","retry","state","dead_letter"]},"topic_id":{"type":"string","minLength":1},"protocol":{"type":"string","minLength":1},"via":{"type":"string","minLength":1},"route_points":{"type":"array","items":{"type":"array","prefixItems":[{"type":"number"},{"type":"number"}],"items":false,"minItems":2,"maxItems":2}}},"additionalProperties":true}}},"$defs":{"goldenSignal":{"type":"object","required":["value","unit","window","status"],"properties":{"value":{"type":["string","number"]},"unit":{"type":"string","minLength":1},"window":{"type":"string","minLength":1},"status":{"enum":["ok","warn","critical","unknown"]}},"additionalProperties":false}},"additionalProperties":true},"isInternal":false,"tokens":2056,"sizeBytes":7110},{"name":"sequence-v1.schema.json","path":"skills/fireworks-tech-graph/schemas/sequence-v1.schema.json","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/schemas/sequence-v1.schema.json","title":"Schemas Skill","category":"anthropic-skill","format":"json","content":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/sequence-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"const\": \"sequence\" } } }\n ]\n}\n","frontmatter":{"$schema":"https://json-schema.org/draft/2020-12/schema","$id":"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/sequence-v1.schema.json","allOf":[{"$ref":"diagram-v1.schema.json"},{"properties":{"mode":{"const":"sequence"}}}]},"isInternal":false,"tokens":91,"sizeBytes":280},{"name":"workflow-v1.schema.json","path":"skills/fireworks-tech-graph/schemas/workflow-v1.schema.json","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/schemas/workflow-v1.schema.json","title":"Schemas Skill","category":"anthropic-skill","format":"json","content":"{\n \"$schema\": \"https://json-schema.org/draft/2020-12/schema\",\n \"$id\": \"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/workflow-v1.schema.json\",\n \"allOf\": [\n { \"$ref\": \"diagram-v1.schema.json\" },\n { \"properties\": { \"mode\": { \"enum\": [\"flowchart\", \"agent\", \"state-machine\"] } } }\n ]\n}\n","frontmatter":{"$schema":"https://json-schema.org/draft/2020-12/schema","$id":"https://yizhiyanhua-ai.github.io/fireworks-tech-graph/schemas/workflow-v1.schema.json","allOf":[{"$ref":"diagram-v1.schema.json"},{"properties":{"mode":{"enum":["flowchart","agent","state-machine"]}}}]},"isInternal":false,"tokens":99,"sizeBytes":308},{"name":"README.md","path":"skills/fireworks-tech-graph/scripts/README.md","rawUrl":"https://raw.githubusercontent.com/yizhiyanhua-ai/fireworks-tech-graph/HEAD/skills/fireworks-tech-graph/scripts/README.md","title":"Scripts Skill","category":"anthropic-skill","format":"markdown","content":"# Fireworks Tech Graph - Scripts\n\n辅助脚本集合，用于提高 SVG 图表生成的稳定性和效率。\n\n## 脚本列表\n\n### 1. validate-svg.sh\n\nSVG 验证脚本，检查 SVG 语法并报告详细错误。\n\n**用法：**\n```bash\n./validate-svg.sh \n```\n\n**检查项目：**\n- XML 结构、属性语法和实体转义（使用 XML parser，避免把 `top_k=5` 之类的文本误判为属性）\n- `marker-start` / `marker-mid` / `marker-end` 引用完整性\n- 箭头与组件碰撞（支持绝对/相对 `M/L/H/V/Q/C/S/T` 路径，曲线路径采样检测）\n- 渲染验证（cairosvg 优先，rsvg-convert 兜底）\n\n**示例：**\n```bash\n./validate-svg.sh /path/to/diagram.svg\n```\n\n### 2. generate-diagram.sh\n\nSVG 图表生成脚本，提供自动验证和 PNG 导出。\n\n**用法：**\n```bash\n./generate-diagram.sh [OPTIONS]\n```\n\n**选项：**\n- `-t, --type TYPE` - 图表类型（见脚本帮助）\n- `-s, --style STYLE` - 风格编号（1-12，默认：1）\n- `-o, --output PATH` - 输出路径（默认：当前目录）\n- `-w, --width WIDTH` - PNG 宽度（像素，默认：1920）\n- `--no-validate` - 跳过验证\n- `-h, --help` - 显示帮助\n\n**示例：**\n```bash\n# 生成架构图（Style 1）\n./generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg\n\n# 生成流程图（Style 2，2400px 宽）\n./generate-diagram.sh -t flowchart -s 2 -w 2400\n```\n\n**注意：** SVG 内容需要先准备好；这个脚本只负责验证与导出。\n\n### 3. generate-from-template.py\n\n基于风格配置和 JSON 数据生成 SVG。当前版本不再只是简单塞入 `nodes/arrows`，\n而是会执行 style guide 中的部分可计算规则，例如：\n\n- `style` - 风格编号（1-12）或规范风格名\n- `semantic_profile` - 可选语义契约；Style 9-12 默认分别启用 C4、云部署、事件流和可观测性契约\n- `containers` - 泳道 / 分组容器\n- `containers[].header_prefix` / `containers[].header_text` - 工程编号式分区标题\n- `containers[].side_label` - 左侧 layer label\n- `nodes[].kind` - 语义组件类型，例如 `double_rect`、`cylinder`、`document`、`terminal`、`circle_cluster`\n- `arrows[].flow` - 语义箭头类型，例如 `control`、`write`、`read`、`data`\n- `source_port` / `target_port` - 指定端口锚点\n- `route_points` / `corridor_x` / `corridor_y` - 控制复杂图的走线质量\n- `style_overrides` - 对现有 style 做局部覆盖\n- `window_controls` / `meta_*` - 顶部终端 chrome\n- `blueprint_title_block` - 工程蓝图右下角 title block\n\n**用法：**\n```bash\npython3 ./generate-from-template.py architecture ./output/arch.svg '{\"style\":1,\"title\":\"My Diagram\",\"containers\":[],\"nodes\":[],\"arrows\":[]}'\n```\n\n**示例：**\n```bash\npython3 ./generate-from-template.py memory ./output/mem0.svg '{\n \"style\": 1,\n \"title\": \"Mem0 Memory Architecture\",\n \"containers\": [\n {\"x\":30,\"y\":90,\"width\":900,\"height\":90,\"label\":\"Input Layer\",\"header_prefix\":\"01\"}\n ],\n \"nodes\": [\n {\"id\":\"manager\",\"kind\":\"double_rect\",\"x\":360,\"y\":220,\"width\":300,\"height\":72,\"label\":\"Memory Manager\"},\n {\"id\":\"vector\",\"kind\":\"cylinder\",\"x\":90,\"y\":360,\"width\":140,\"height\":110,\"label\":\"Vector Store\"}\n ],\n \"arrows\": [\n {\"source\":\"manager\",\"target\":\"vector\",\"flow\":\"write\",\"dashed\":true}\n ]\n}'\n```\n\n### 4. test-all-styles.sh\n\n批量测试脚本覆盖 12 种风格。Style 1-7 与 9-12 从 JSON fixture 生成，AI 手绘的 Style 8 使用静态 SVG fixture；任何风格缺少回归 fixture 都会使批测失败。\n\n**用法：**\n```bash\n./test-all-styles.sh\n```\n\n**功能：**\n- 检查所有风格的参考文件\n- 渲染 `fixtures/*.json` 回归样例\n- 验证生成出的 SVG 文件\n- 导出 PNG 文件到 `test-output/` 目录\n- 生成测试报告\n\n**输出：**\n- 测试摘要（通过/失败统计）\n- PNG 文件（带时间戳）\n- 详细的验证错误信息\n\n**示例：**\n```bash\n./test-all-styles.sh\n```\n\n## 依赖\n\n所有脚本需要至少一个 PNG 渲染器（推荐 cairosvg）：\n\n- **cairosvg**（推荐）- SVG 转 PNG，CSS 支持最好\n ```bash\n python3 -m pip install cairosvg\n ```\n\n- **rsvg-convert**（备选）- 系统包；复杂 SVG 可能丢失 CSS / ``\n ```bash\n brew install librsvg # macOS\n sudo apt install librsvg2-bin # Ubuntu/Debian\n ```\n\n`generate-diagram.sh` 会优先调用 cairosvg，缺失时自动回退到 rsvg-convert。完整对比见 [PNG 导出参考](../references/png-export.md)。\n\n聚焦后的语义动效由 `fireworks.py animate`、`motion.py` 和 `svg2gif.js` 协作完成，只接收带有 12 套已验收 role/stage/order 契约之一的生成器语义 SVG。精确源文件字节不锁定，但任意同风格拓扑不会自动套用动效。媒体输出只允许经过验证的 GIF，默认还会生成同名 `.motion.json` 报告。运行时需要 FFmpeg/FFprobe、Chrome/Chromium，以及 Skill 安装位置可解析到的 `puppeteer` 或 `puppeteer-core`；当前工作目录中的同名模块不会被隐式执行。依赖安装与最简命令：\n\n```bash\nfor SKILL_ROOT in \\\n \"$HOME/.agents/skills/fireworks-tech-graph\" \\\n \"$HOME/.claude/skills/fireworks-tech-graph\"\ndo\n [ -d \"$SKILL_ROOT\" ] || continue\n npm install --prefix \"$SKILL_ROOT\" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0\ndone\nSKILL_ROOT=\"${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}\"\npython3 \"$SKILL_ROOT/scripts/fireworks.py\" animate diagram.svg diagram.gif\n```\n\n默认自动识别风格，输出 5.75 秒、20fps、960px 宽、115 帧无限循环 GIF。第 1–36 帧保持既有 draw-on，第 36–38 帧淡入运行流，第 38–109 帧为完整稳定数据流，第 110–114 帧按 `[1,.7575,.515,.2725,.03]` reset。Style 1–12 的 signature、速度、路径、几何和构建合同均为 `user-approved`，包括 `persistent-data-flow-head`、`terminal-evidence-stream`、`blueprint-registration-bead`、14×10 `notion-memory-card`、`glass-task-capsule`、`policy-seal`、`token-train`、`gem-tracer`、`review-cursor`、region chevrons、event train 与 ops scanner；共享 `+2s-settled-flow` 时间修订也已于 2026-07-17 验收，默认新包的 `review_status` 为 `user-approved`。显式 3.75 秒/75 帧和 2.75 秒/55 帧继续支持。75 帧及以下要求全部 raster 唯一；更长时间线允许非相邻重复出现在 full-opacity 区间，frame 110 是 reset opacity 为 1.00 的唯一例外并分类为 `intentional_reset_boundary_repeat`，frame 111–114 必须全局不同；至少保留 75 个唯一 raster 且相邻重复数为零。75-vs-115 gate 分开统计 binary / decoded-RGBA / guarded-antialias 三类；guarded 等价要求 AE ≤ 128、normalized RMSE ≤ 0.001、component 宽或高不超过 2px 且只落在 edge/node border，DOM 和 signature geometry 仍 strict-exact。完整约束见 [动效参考](../references/motion-effects.md)。\n\n- **grep, sed, awk** - 文本处理（macOS 自带）\n\n## 目录结构\n\n```\nfireworks-tech-graph/\n├── SKILL.md # Skill 主文档\n├── references/ # 风格参考文件\n│ ├── style-1-flat-icon.md\n│ ├── style-2-dark-terminal.md\n│ └── ...\n├── fixtures/ # 回归测试样例（JSON）\n│ ├── mem0-style1.json\n│ ├── tool-call-style2.json\n│ └── ...\n├── scripts/ # 辅助脚本（本目录）\n│ ├── README.md # 本文档\n│ ├── validate-svg.sh # SVG 验证\n│ ├── generate-diagram.sh # SVG 验证与 PNG 导出\n│ ├── generate-from-template.py # 模板化生成 SVG\n│ ├── motion.py # SVG 转 GIF 校验、编码与原子报告\n│ ├── svg2gif.js # Chromium 手动时间轴逐帧渲染\n│ └── test-all-styles.sh # 批量测试\n└── test-output/ # 测试输出目录（自动创建）\n```\n\n## 使用场景\n\n### 场景 1：验证现有 SVG\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/validate-svg.sh\" /path/to/your-diagram.svg\n```\n\n### 场景 2：生成并验证图表\n\n1. 使用 Codex 或 Claude Code 生成 SVG 内容\n2. 运行验证和导出：\n ```bash\n SKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n # SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n \"$SKILL_ROOT/scripts/generate-diagram.sh\" -t architecture -s 1 -o ./output/arch.svg\n ```\n\n### 场景 3：批量测试所有风格\n\n```bash\nSKILL_ROOT=~/.agents/skills/fireworks-tech-graph # Codex\n# SKILL_ROOT=~/.claude/skills/fireworks-tech-graph # Claude Code\n\"$SKILL_ROOT/scripts/test-all-styles.sh\"\n```\n\n测试脚本会自动：\n1. 读取 `../fixtures/*.json`\n2. 按 `template_type + style` 调用 `generate-from-template.py`\n3. 运行 `validate-svg.sh`\n4. 导出 PNG 到 `../test-output/`\n\n### 场景 4：validator 单元测试\n\n```bash\npython3 -m unittest discover -s tests -p 'test_validate_svg.py' -v\n```\n\n覆盖 marker 双端引用、文本等号、`H/V` 路径、曲线路径、虚线组件和容器排除等正反例。\n\n对启发式难以区分的形状，可显式添加 `data-graph-role=\"node|container|legend|decoration|label|background\"`。`node` 会强制纳入障碍物检测，其余角色会从组件障碍物中排除；`legend` 组内的示例箭头也不会被当作业务流。\n\n查看测试输出：\n```bash\nls -lh ../test-output/\n```\n\n## 故障排除\n\n### 问题：找不到 PNG 渲染器\n\n**解决方案（任选其一，推荐 cairosvg）：**\n```bash\npython3 -m pip install cairosvg # 推荐\nbrew install librsvg # macOS 系统包\nsudo apt install librsvg2-bin # Ubuntu/Debian\n```\n\n### 问题：rsvg-convert 渲染缺框/缺文字\n\n**原因：** rsvg-convert 对 ``、CSS `filter`、复杂 `` — no external `@import` (cairosvg / rsvg-convert cannot fetch external URLs)\n- ``: arrow markers, gradients, filters, clip paths\n- Text: minimum 12px, prefer 13-14px labels, 11px sub-labels, 16-18px titles\n- All arrows: `` with `markerEnd`, sized `markerWidth=\"10\" markerHeight=\"7\"`\n- Drop shadows: `` in ``, apply sparingly (key nodes only)\n- Curved paths: use `M x1,y1 C cx1,cy1 cx2,cy2 x2,y2` cubic bezier for loops/feedback arrows\n- Clip content: use `` if text might overflow a node box\n- Z-order (drawing order): SVG uses painter's model — later elements cover earlier ones. Recommended layer order (bottom → top): ① canvas background ② dashed containers / region backgrounds ③ arrows and connection lines ④ node shapes (rects, circles) ⑤ text labels and annotations ⑥ legends and overlays. When arrows pass near text, draw arrows BEFORE text so text stays readable. Adjust per diagram needs — this is guidance, not rigid.\n\n## SVG Generation & Error Prevention\n\n**Example: Python List Method.** Use a maintainable SVG/XML generator that passes the same geometry, text and export checks:\n```python\npython3 << 'EOF'\nlines = []\nlines.append('')\nlines.append(' ')\n# ... each line separately\nlines.append('')\n\nwith open('/path/to/output.svg', 'w') as f:\n f.write('\\n'.join(lines))\nprint(\"SVG generated successfully\")\nEOF\n```\n\n**Why mandatory**: Prevents character truncation, typos, and syntax errors. Each line is independent and easy to verify.\n\n**Pre-Tool-Call Checklist** (CRITICAL - use EVERY time):\n1. ✅ Can I write out the COMPLETE command/content right now?\n2. ✅ Do I have ALL required parameters ready?\n3. ✅ Have I checked for syntax errors in my prepared content?\n\n**If ANY answer is NO**: STOP. Do NOT call the tool. Prepare the content first.\n\n**Error Recovery Protocol**:\n- **First error**: Analyze root cause, apply targeted fix\n- **Second error**: Switch method entirely (Python list → chunked generation)\n- **Third error**: STOP and report to user - do NOT loop endlessly\n- **Never**: Retry the same failing command or call tools with empty parameters\n\n**Validation** (run after generation):\n```bash\npython3 -c \"import xml.etree.ElementTree as ET; ET.parse('file.svg')\" && echo \"✓ Valid XML\"\n# Or use cairosvg as a render-time check:\npython3 -c \"import cairosvg; cairosvg.svg2png(url='file.svg', write_to='/tmp/test.png')\" && echo \"✓ Renders\" && rm /tmp/test.png\n```\n\n**If using `generate-from-template.py`**:\n- Prefer `source` / `target` node ids in arrow JSON so the generator can snap to node edges\n- Keep `x1,y1,x2,y2` as hints or fallback coordinates, not the main routing primitive\n- Let the generator choose orthogonal routes; avoid hardcoding center-to-center straight lines unless the path is guaranteed clear\n\n**Common Syntax Errors to Avoid**:\n- ❌ `yt-anchor` → ✅ `y=\"60\" text-anchor=\"middle\"`\n- ❌ `x=\"390` (missing y) → ✅ `x=\"390\" y=\"250\"`\n- ❌ `fill=#fff` → ✅ `fill=\"#ffffff\"`\n- ❌ `marker-end=` → ✅ `marker-end=\"url(#arrow)\"`\n- ❌ `L 29450` → ✅ `L 290,220`\n- ❌ Missing `` at end\n- ❌ Element with `filter` near viewBox edge — filter region extends 20% (default) or more beyond bbox; if that region exceeds viewBox, Chrome/cairosvg clip the filter rendering AND can drop the element's own stroke on that side. Keep filtered elements at least `max(20% of element size, shadow blur radius × 3)` away from viewBox edges, or omit the filter.\n\n## Output\n\n- **Default**: `./[derived-name].svg` and `./[derived-name].png` in current directory\n- **Custom**: user specifies path with `--output /path/` or `输出到 /path/`\n- **PNG / motion export**: see **SVG → PNG Conversion** below and `$SKILL_ROOT/references/motion-effects.md`\n\n## SVG → PNG Conversion\n\nUse `$SKILL_ROOT/scripts/generate-diagram.sh` by default. Load `$SKILL_ROOT/references/png-export.md` only when selecting a renderer manually, handling CJK/emoji fallback, converting browser-generated SVG, or using the bundled Puppeteer converter.\n\n## Styles\n\n| # | Name | Background | Best For |\n|---|------|-----------|----------|\n| 1 | **Flat Icon** (default) | White | Blogs, docs, presentations |\n| 2 | **Dark Terminal** | `#0f0f1a` | GitHub, dev articles |\n| 3 | **Blueprint** | `#0a1628` | Architecture docs |\n| 4 | **Notion Clean** | White, minimal | Notion, Confluence, wikis |\n| 5 | **Glassmorphism** | Dark gradient | Product sites, keynotes |\n| 6 | **Claude Official** | Warm cream `#f8f6f3` | Anthropic-style diagrams |\n| 7 | **OpenAI Official** | Pure white `#ffffff` | OpenAI-style diagrams |\n| 8 | **Dark Luxury** *(AI-authored)* | `#0a0a0a` deep black | Architecture docs, premium editorial — hand-craft SVG from `$SKILL_ROOT/references/style-8-dark-luxury.md` |\n| 9 | **C4 Review Canvas** | Warm paper `#f7f2e8` | C4 reviews and ADRs; enforces one abstraction level |\n| 10 | **Cloud Fabric** | Cloud blue `#edf5fb` | Region/network/workload deployment ownership |\n| 11 | **Event Transit** | Transit paper `#fbf7ee` | Topics, processors, consumer groups, DLQ, state |\n| 12 | **Ops Pulse** | Ops navy `#07111f` | Golden signals, critical paths, correlated traces |\n\nLoad the matching `$SKILL_ROOT/references/style-N-*.md` for exact color tokens and SVG patterns.\n\n## Style Selection\n\n**Default**: Style 1 (Flat Icon) for most diagrams. Load `$SKILL_ROOT/references/style-diagram-matrix.md` for detailed style-to-diagram-type recommendations.\n\nPrompt fingerprints: `C4评审画布/C4 review board` → 9; `多区域云部署/deployment topology` → 10; `事件地铁图/event metro map` → 11; `可靠性脉冲/golden signals trace` → 12; `让这张图动起来/生成 GIF/制作 GIF/animate this diagram/Generate a GIF` → auto motion.\nAuto-select these only with matching domain evidence; otherwise use Styles 1–7 or `semantic_profile: \"generic\"`, and split mixed C4/deployment/event/ops views.\n\nThese patterns appear frequently — internalize them:\n\n**RAG Pipeline**: Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response\n**Agentic RAG**: adds Agent loop with Tool use between Query and LLM\n**Agentic Search**: Query → Planner → [Search Tool / Calculator / Code] → Synthesizer → Response\n**Mem0 / Memory Layer**: Input → Memory Manager → [Write: VectorDB + GraphDB] / [Read: Retrieve+Rank] → Context\n**Agent Memory Types**: Sensory (raw input) → Working (context window) → Episodic (past interactions) → Semantic (facts) → Procedural (skills)\n**Multi-Agent**: Orchestrator → [SubAgent A / SubAgent B / SubAgent C] → Aggregator → Output\n**Tool Call Flow**: LLM → Tool Selector → Tool Execution → Result Parser → LLM (loop)\n\n\n# Icon Reference\n\n## Rules for Renderer Compatibility (cairosvg / rsvg-convert)\n\n**Never use** `@import url()` for icon fonts — neither cairosvg nor rsvg-convert fetches external resources.\n**Always use** inline SVG ``, ``, ``, `` combinations.\n**Font fallback**: embed font-family in `\n \n \n \n \n \n \n \n \n \n \n\n```\n\n\n# Style 10: Cloud Fabric\n\nA deployment-topology view for regions, VPCs/networks, compute, data stores,\nand cross-boundary traffic. It answers “where does this run?” without turning\nthe diagram into a vendor icon poster.\n\n## Best fit\n\n- Multi-region and disaster-recovery reviews\n- Cloud deployment and network ownership maps\n- Kubernetes cluster/namespace placement\n- Migration plans and platform boundary discussions\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#edf5fb` with a restrained blue grid |\n| Card | `#ffffff` |\n| Primary text | `#102a43` |\n| Boundary | `#7fa3c2` |\n| Traffic | `#2563eb` |\n| Write | `#ea580c` |\n| Data | `#059669` |\n| Cross-region | `#7c3aed`, dashed |\n\nNested boundaries carry a small `GLOBAL`, `REGION`, or `NETWORK` badge. Nodes\nuse a manifest-backed neutral glyph plus provider metadata. A colored ownership\nspine makes each nested deployment boundary readable even in grayscale.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"cloud-fabric\"` and provide:\n\n- `diagram_type: \"deployment\"`\n- `platform_profile`: `provider-neutral`, `aws`, `azure`, `gcp`, or `kubernetes`\n- `icon_manifest_version: \"2026.07-neutral.1\"`\n- at least one `deployment_kind: \"region\"` boundary\n- every node: `deployment_id` and a manifest-backed `icon_id`\n- every cross-deployment edge: a non-empty `via`\n\nBoundary parents must form an acyclic tree, nesting depth is capped at four,\nchild boundaries stay at least `16px` inside their parent, and nodes stay at\nleast `20px` inside their assigned deployment.\n\n## Icon policy\n\nThe bundled manifest contains provider-neutral geometric glyphs. It records\nofficial AWS, Azure, and Google Cloud asset URLs as adapter metadata; it does\nnot redistribute vendor trademarks. If a user supplies an official icon pack,\npreserve its license and version outside this repository and map it through the\nmanifest boundary.\n\nNever invent a vendor service logo. Unknown `icon_id` values fail validation.\n\n## Composition rules\n\n- Show deployment ownership through nesting, not background color alone\n- Use a shallow `global → region → network` hierarchy where possible\n- Keep ingress paths vertical and regional data paths aligned\n- Name cross-boundary mechanisms (`peering`, `transit gateway`, `service mesh`)\n- Zero crossings in official samples; use no more than two bends per edge\n- Do not encode both logical service architecture and every subnet in one view\n- Reserve the icon/provider area before fitting text; no title or subtitle may cross a card edge\n- Place ingress mechanism labels in inter-boundary whitespace, clear of Region and Network headers\n\n## Signature checklist\n\n- Pale cloud grid and explicit `global → region → network` nesting\n- Ownership spines plus `GLOBAL`, `REGION`, and `NETWORK` boundary badges\n- Manifest-backed globe, compute, database, gateway, stream, or observe glyphs\n- Top-right platform/region/deployment-mode stamp and named cross-boundary mechanisms\n\n## Prompt cues\n\n- English: `multi-region deployment map`, `cloud landing zone map`, `region/VPC ownership map`\n- 中文：`多区域部署图`、`云部署拓扑`、`Region/VPC 归属图`\n- Copyable cue: `Use Style 10 Cloud Fabric; show global ingress, Region and VPC ownership, neutral cloud glyphs, deployment mode, and every cross-boundary mechanism.`\n\n## Do not blend with\n\nDo not use C4 abstraction labels, transit-map station numbering, or live SRE\nmetric cards. When deployment evidence is absent, fall back to a generic Style\n1–7 architecture view instead of inventing cloud ownership.\n\n## Fixture\n\n`fixtures/cloud-fabric-style10.json` demonstrates active-active checkout\ndeployment with two regions, explicit VPC ownership, and neutral glyphs.\n\n\n# Style 11: Event Transit\n\nA transit-map metaphor for event-driven systems. Topics are rails, processing\nsteps are stations, declared junctions are branch points, and dead letters get\na visibly separate route.\n\n## Best fit\n\n- Kafka/Pulsar/NATS topology reviews\n- Event choreography and consumer-group discussions\n- Stream processing, retry, and DLQ runbooks\n- Schema evolution and materialized-view pipelines\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#fbf7ee` with transit dots |\n| Card | `#fffdf8` |\n| Primary rail | `#e4475b` |\n| State projection | `#00897b` |\n| Read/consumer | `#2563eb` |\n| DLQ | `#c62828`, dashed |\n| Text | `#17213c` |\n\nThe dark casing beneath a rail is decoration. The colored path with\n`data-graph-role=\"edge\"` remains the ordinary semantic connector. Semantic\nrails use a maximum `2.8px` stroke and fixed user-space arrowheads so markers do\nnot grow with line width.\n\n## Required semantic contract\n\nSelect `semantic_profile: \"event-transit\"` and provide:\n\n- `diagram_type: \"event_stream\"`\n- one to four topics, each with unique `id` and `color`\n- every node: `transit_role` and optional/required topic metadata\n- stations/junctions: `operation`\n- consumers: `consumer_group`\n- rail stations: unique integer `station_order`\n- rail edges: `transit_type: \"rail\"`, topic id, `right → left` ports\n\nA rail edge must connect consecutive station orders on one horizontal\ncenterline with at least `64px` clearance. A dead-letter edge must target a\nreal `dlq` node. Multiple rail departures are only valid from a `junction`.\n\n## Composition rules\n\n- One horizontal centerline per topic rail\n- Use branches only where the node is declared as a junction\n- Put DLQ and state-store terminals below their owning station\n- Reserve dashed red for dead-letter/retry semantics\n- Show partition, lag, or schema facts as short badges\n- Zero bridge crossings and no duplicated rail overlay in official samples\n- Keep at least `64px` clear rail between adjacent station cards\n- Use compact user-space arrowheads and a subtle casing; the semantic rail stays at or below `2.8px`\n\n## Signature checklist\n\n- Dark top-right `EVENT METRO` line stamp and a signed topic-line count\n- Numbered station medallions, compact midpoint chevrons, and one rail centerline per topic\n- Distinct junction dot, dashed DLQ terminal with `×`, and state-store terminal with a square glyph\n- Partition, schema, latency, fan-out, lag, replay, and state badges attached to stations\n\n## Prompt cues\n\n- English: `event metro map`, `topic rail map`, `Kafka topology`, `stream choreography map`\n- 中文：`事件地铁图`、`事件轨道图`、`Topic 线路图`、`Kafka 拓扑图`\n- Copyable cue: `Use Style 11 Event Transit; render topics as thin metro rails, processors as numbered stations, declared junctions, consumer groups, DLQ, and state projections.`\n\n## Do not blend with\n\nDo not nest Region/VPC deployment boundaries, label cards as C4 containers, or\nattach golden-signal dashboards to every station. A request/response flow with\nno topic, consumer-group, or stream evidence should use a generic flow style.\n\n## Fixture\n\n`fixtures/event-transit-style11.json` shows a checkout event line with schema\nvalidation, fraud enrichment, a declared junction, DLQ, and materialized state.\n\n\n# Style 12: Ops Pulse\n\nAn operational review surface that combines service topology, the four golden\nsignals, one critical request path, and a correlated trace waterfall. It is\nfor incident and reliability work, not a screenshot of a live dashboard.\n\n## Best fit\n\n- Incident reviews and production-readiness reviews\n- SLO/error-budget discussions\n- Latency and dependency investigations\n- Runbooks that connect topology to one representative trace\n\n## Visual tokens\n\n| Token | Value |\n|---|---|\n| Canvas | `#07111f` with a restrained ops grid |\n| Service card | `#0d1b2a` |\n| Border | `#29435d` |\n| Healthy | `#22c55e` |\n| Warning | `#f59e0b` |\n| Critical | `#f43f5e` |\n| Telemetry | `#22d3ee`, dashed |\n| Trace | `#38bdf8` |\n\n## Required semantic contract\n\nSelect `semantic_profile: \"ops-pulse\"` and provide:\n\n- `diagram_type: \"observability\"`\n- one to twelve nodes with `ops_role: \"service\"`\n- each service: exactly `latency`, `traffic`, `errors`, and `saturation`\n- every signal: `value`, `unit`, `window`, and `status`\n- service cards at least `180×108` and a visible `status_label`\n- a non-empty ordered `critical_path` of business edge ids\n- business and telemetry edges using different `flow` tokens\n- trace spans with positive duration and valid parent coverage\n\nThe critical path must be contiguous and may not include telemetry edges. A\ntrace waterfall has exactly one root when spans are present.\n\n## Composition rules\n\n- Keep service health cards in one aligned band\n- Show only one highlighted critical path per view\n- Telemetry export is dashed and visually subordinate\n- Put the trace waterfall in its own boundary below topology\n- Do not duplicate a critical edge to create glow; glow is decoration owned by\n the single semantic path\n- Use a fixed observation window and display units on every signal\n- Zero bridge crossings and no more than two bends per edge\n\n## Signature checklist\n\n- Top-right `LIVE` investigation stamp with observation window and worst status\n- Status rail on every service card and four metric chips carrying explicit windows\n- Numbered critical-hop markers on the single highlighted business path\n- Dedicated trace boundary with a 0–100% ruler and one correlated waterfall\n\n## Prompt cues\n\n- English: `reliability pulse`, `incident investigation view`, `golden signals trace`, `SRE trace review`\n- 中文：`可靠性脉冲`、`事故排查视图`、`黄金信号追踪图`、`SRE Trace 评审`\n- Copyable cue: `Use Style 12 Ops Pulse; show a fixed observation window, four golden signals per service, one numbered critical path, telemetry export, and one correlated trace waterfall.`\n\n## Do not blend with\n\nDo not turn the service band into a Region/VPC deployment map, an event-metro\nrail, or a C4 responsibility review. If the prompt lacks measured signals,\nstatus, time window, and trace evidence, use a generic architecture style.\n\n## Fixture\n\n`fixtures/ops-pulse-style12.json` demonstrates a degraded checkout path with\nfour service cards, an OTel collector, and a correlated four-span trace.\n\n\n"}