Fireworks Tech Graph：用自然语言生成技术图表
前言：别再手画图表了
描述你的系统，用英语或中文。
得到生产级 SVG、PNG、GIF 动画和离线交互式技术图表。
一、核心工作流
七步流程：
- 自然语言描述
- 分类图表类型
- 选择风格
- 生成 SVG（几何检查）
- 导出 PNG（1920px）
- 生成 GIF（语义动画）
- 生成交互式 HTML（离线可用）
二、12 种风格
风格 1：Flat Icon（默认）
场景：Mem0 Memory Architecture
特点：个人记忆提取、冲突解决、存储和检索
风格 2：Dark Terminal
场景：Tool Call Flow
特点：暗色终端执行、源接地、检索和答案合成
风格 3：Blueprint
场景：Microservices Architecture
特点：工程网格、领域服务、数据存储、事件和遥测
风格 4：Notion Clean
场景：Agent Memory Types
特点：从感官和工作上下文到持久记忆的最小层次
风格 5：Glassmorphism
场景：Multi-Agent Collaboration
特点：协调器、专家、共享状态、审查和合成
风格 6：Claude Official
场景：System Architecture
特点：温暖接口、运行时、安全、记忆、工具和操作层
风格 7：OpenAI Official
场景：API Integration Flow
特点：清洁 SDK、提示、模型、工具、交付和发布阶段
风格 8：Dark Luxury（AI 创作）
场景：Agent Runtime Architecture
特点：控制平面、执行和状态层、香槟金结构、语义颜色桶
风格 9：C4 Review Canvas
场景：Checkout Container Review
特点：一个抽象级别、明确责任、技术和协议
风格 10：Cloud Fabric
场景：Active-Active Checkout Deployment
特点：全局入口、区域、VPC 所有权和跨区域复制
风格 11：Event Transit
场景：Checkout Event Line
特点：主题作为轨道、处理器作为站点、声明的交叉口、DLQ 和状态投影
风格 12：Ops Pulse
场景：Checkout Reliability Pulse
特点：黄金信号、一条关键路径、OTel 导出和相关跟踪
三、使用方法
在 Codex 中使用
使用 $fireworks-tech-graph：生成一个 Mem0 记忆架构图，暗色风格。在 Claude Code 中使用
使用 $fireworks-tech-graph：生成一个工具调用流程图，使用默认风格。指定风格
使用 $fireworks-tech-graph：生成一个微服务架构图，使用蓝图风格。生成多种格式
使用 $fireworks-tech-graph：生成一个多代理协作图，使用玻璃拟态风格，导出 SVG、PNG 和 GIF。四、核心特性
几何安全
零交叉：没有线路交叉
零桥接跳跃：没有桥接跳跃
最多两个弯曲：每条边最多两个弯曲
总共最多八个弯曲：整体最多八个弯曲
至少 40px 节点间距：节点之间至少 40px
至少 20px 容器间距：容器之间至少 20px
短正交段：短的正交段
标签清晰：标签远离节点、路线和节标题
语义动画
5.75 秒稳定流时间线：
- 路线首先绘制
- 最终拓扑保持实时数据移动额外两秒
960px 宽 GIF：20fps / 115 帧
1920px PNG：无损静态回归基线
离线交互
离线 HTML：无需网络连接
交互式 SVG：可缩放、可搜索
导出路径：SVG、PNG、GIF、HTML
五、四种工程优先风格
风格 9：C4 Review Canvas
用途：C4 审查
特点：
- 显示一个 C4 级别
- 责任、技术、审查状态
- 关系协议
提示指纹：
Style 9 · C4 review board: show one C4 level, responsibilities, technologies, review state, and relationship protocols.风格 10：Cloud Fabric
用途：多区域部署
特点：
- 全局入口
- 区域/VPC 所有权
- 中性云字形
- 部署模式
- 命名边界机制
提示指纹：
Style 10 · Multi-region deployment map: show global ingress, Region/VPC ownership, neutral cloud glyphs, deployment mode, and named boundary mechanisms.风格 11：Event Transit
用途：事件流图
特点：
- 细主题轨道
- 编号处理器站点
- 声明的交叉口
- DLQ
- 状态投影
提示指纹：
Style 11 · Event metro map: show thin topic rails, numbered processor stations, a declared junction, DLQ, and state projection.风格 12：Ops Pulse
用途：可靠性监控
特点：
- 黄金信号
- 一条关键路径
- OTel 导出
- 相关跟踪
提示指纹：
Style 12 · Ops Pulse: show golden signals, one critical path, OTel export, and a correlated trace.六、AI/Agent 领域模式
14 种 UML 图表类型
支持所有 14 种 UML 图表类型。
AI/Agent 工作流模式
深度覆盖 AI/Agent 领域模式：
- 记忆架构
- 工具调用流程
- 多代理协作
- 系统架构
- API 集成流程
- 代理运行时架构
七、总结
核心工作流
七步流程：
- 自然语言描述
- 分类图表类型
- 选择风格
- 生成 SVG（几何检查）
- 导出 PNG（1920px）
- 生成 GIF（语义动画）
- 生成交互式 HTML（离线可用）
12 种风格
默认风格：Flat Icon
暗色风格：Dark Terminal、Dark Luxury（AI 创作）
工程风格：Blueprint、C4 Review Canvas、Cloud Fabric、Event Transit、Ops Pulse
极简风格：Notion Clean
现代风格：Glassmorphism
官方风格：Claude Official、OpenAI Official
核心特性
几何安全：零交叉、零桥接跳跃、最多两个弯曲、至少 40px 节点间距
语义动画：5.75 秒稳定流时间线、960px 宽 GIF、20fps
离线交互：离线 HTML、交互式 SVG、可缩放、可搜索
四种工程优先风格：C4 Review Canvas、Cloud Fabric、Event Transit、Ops Pulse
AI/Agent 领域模式：14 种 UML 图表类型、深度覆盖 AI/Agent 工作流
记住
别再手画图表了。
描述你的系统，用英语或中文。
得到生产级 SVG、PNG、GIF 动画和离线交互式技术图表。
附：Fireworks Tech Graph
GitHub：https://github.com/yizhiyanhua-ai/fireworks-tech-graph License：MIT 描述：Generate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.
请前往草稿箱查看： https://mp.weixin.qq.com/
"