欣淇
发布于 2026-05-13 / 0 阅读
0
0

🎨 fireworks-tech-graph:6.4k Stars,用自然语言画技术架构图,7 种风格一键生成

🎨 fireworks-tech-graph:6.4k Stars,用自然语言画技术架构图,7 种风格一键生成

写技术文档最烦啥?画架构图。调方块、对齐线、改颜色,半小时过去了。要是能说一句「画个 RAG 流程图,深色主题」就完事该多好——说的就是这玩意儿。

fireworks-tech-graph,4 月刚上 GitHub 就冲到 6.4k Stars。输入中文或英文描述,直接出 SVG + 1920px PNG,7 种视觉风格,14 种 UML 图类型,AI/Agent 领域模式内置。


咋装的

一行命令搞定:

npx skills add yizhiyanhua-ai/fireworks-tech-graph

或者直接 clone:

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

装完装个 PNG 渲染器(推荐 cairosvg):

pip install cairosvg


怎么用

直接跟它说人话就行:

Draw a RAG pipeline flowchart

Generate an Agentic Search architecture diagram

指定风格也很自然:

Draw a microservices architecture diagram, style 2 (dark terminal)

Draw a multi-agent collaboration diagram --style glassmorphism

最骚的操作是这个——输出了一个完整的 Mem0 内存架构图:

Draw a Mem0 memory architecture diagram in style 1 (Flat Icon).
Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval.

出来的 SVG 直接可编辑,PNG 1920px 视网膜分辨率,放博客、README、PPT 都够用。


7 种风格挑花眼

| 风格 | 适合场景 |

|------|---------|

| Flat Icon | 博客、文档、默认 |

| Dark Terminal | GitHub README、开发文章 |

| Blueprint | 架构文档、工程说明 |

| Notion Clean | 内部分享、Wiki |

| Glassmorphism | 产品演示、演讲 |

| Claude Official | Anthropic 风格项目 |

| OpenAI Official | OpenAI 风格项目 |

每种风格都有完整的颜色 token 和 SVG 模版,不是简单换色——连字体、箭头语义、容器样式都不一样的。


跟 Mermaid 比咋样

Mermaid 写 DSL 还是得记语法,draw.io 拖拽太慢。这玩意儿的核心逻辑是:你说人话,它出图。而且内置了 AI/Agent 领域语义——LLM 用双边框矩形、Agent 用六边形、向量库用环形圆柱,不用你自己去想用什么形状表示什么。


总结

  • 自然语言输入,中英文都行
  • 7 种视觉风格 + 14 种 UML 图
  • AI/Agent 领域模式内置(RAG、Mem0、Multi-Agent、Tool Call)
  • 输出 SVG + 1920px PNG,即生成即用
  • 纯本地运行,无需联网
  • 下次画架构图,别打开 draw.io 了。


    🎨 fireworks-tech-graph: 6.4k Stars, Generate Technical Diagrams from Natural Language, 7 Styles Ready

    You know that pain when you're writing docs and have to spend 30 minutes aligning boxes and picking colors for an architecture diagram? What if you could just say "draw a RAG pipeline flowchart, dark theme" and be done?

    That's exactly what fireworks-tech-graph does. Launched in April 2026, already at 6.4k stars on GitHub. Feed it natural language descriptions, get SVG + 1920px PNG output, 7 visual styles, 14 UML diagram types, and built-in AI/Agent domain patterns.

    Install

    One line:

    npx skills add yizhiyanhua-ai/fireworks-tech-graph
    

    Or clone directly:

    git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph
    

    Pick a PNG renderer (cairosvg recommended):

    pip install cairosvg
    

    Usage

    Just talk to it naturally:

    Draw a RAG pipeline flowchart
    

    Generate an Agentic Search architecture diagram
    

    Specify style inline:

    Draw a microservices architecture diagram, style 2 (dark terminal)
    

    Draw a multi-agent collaboration diagram --style glassmorphism
    

    The killer feature — output a complete Mem0 memory architecture with one prompt:

    Draw a Mem0 memory architecture diagram in style 1 (Flat Icon).
    Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval.
    

    SVG comes out editable, PNG is 1920px retina-ready — good enough for blogs, READMEs, and slide decks.

    7 Visual Styles

    | Style | Best For |

    |-------|----------|

    | Flat Icon (default) | Blogs, docs |

    | Dark Terminal | GitHub README, dev articles |

    | Blueprint | Architecture docs |

    | Notion Clean | Internal wiki |

    | Glassmorphism | Product showcases, keynotes |

    | Claude Official | Anthropic-style projects |

    | OpenAI Official | Clean modern docs |

    Each style has its own color tokens, SVG patterns, and templates — not just a palette swap.

    vs Mermaid

    Mermaid needs DSL syntax. draw.io needs dragging. This thing just needs you to describe what you want in plain language. Plus it has built-in semantic shapes for AI/Agent diagrams — LLMs get double-border rects, Agents get hexagons, vector stores get ringed cylinders. No guesswork.

    Bottom Line

  • Natural language input (English or Chinese)
  • 7 visual styles + 14 UML diagram types
  • Built-in AI/Agent patterns (RAG, Mem0, Multi-Agent, Tool Call)
  • SVG + 1920px PNG output, ready to use
  • Fully local, no internet required
  • Next time you need an architecture diagram, skip the GUI.


    评论