Update from Sync Service
This commit is contained in:
FNS Service
151
实践积累/AI工程/fireworks-tech-graph技术图生成工具.md
Executable file
151
实践积累/AI工程/fireworks-tech-graph技术图生成工具.md
Executable file
@@ -0,0 +1,151 @@
|
||||
# fireworks-tech-graph 技术图生成工具
|
||||
|
||||
> **Stop drawing diagrams by hand.** 描述你的系统 → 获取出版级 SVG + PNG 技术图
|
||||
|
||||
- **⭐ GitHub**: yizhiyanhua-ai/fireworks-tech-graph (3987 stars)
|
||||
- **语言**: Python
|
||||
- **许可证**: MIT
|
||||
|
||||
---
|
||||
|
||||
## 核心能力
|
||||
|
||||
将自然语言描述转化为精美 SVG 图表，再导出高分辨率 PNG（1920px）。
|
||||
|
||||
```bash
|
||||
npx skills add yizhiyanhua-ai/fireworks-tech-graph
|
||||
```
|
||||
|
||||
### 使用示例
|
||||
|
||||
```
|
||||
用户: "Generate a Mem0 memory architecture diagram, dark style"
|
||||
→ Skill 分类: Memory Architecture Diagram, Style 2
|
||||
→ 生成带泳道、圆柱体、语义箭头的 SVG
|
||||
→ 导出 1920px PNG
|
||||
→ 输出: mem0-architecture.svg / mem0-architecture.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7 种视觉风格
|
||||
|
||||
| 风格 | 描述 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| **Style 1** — Flat Icon | 白色背景，语义箭头 | 产品文档 |
|
||||
| **Style 2** — Dark Terminal | 黑色背景，霓虹强调色 | 技术博客 |
|
||||
| **Style 3** — Blueprint | 深蓝背景，网格线，青色描边 | 工程架构图 |
|
||||
| **Style 4** — Notion Clean | 极简白色，单一强调色 | Notion 风格 |
|
||||
| **Style 5** — Glassmorphism | 深色渐变背景，毛玻璃卡片 | 现代 UI |
|
||||
| **Style 6** — Claude Official | 暖米色背景 (#f8f6f3) | Anthropic 风格 |
|
||||
| **Style 7** — OpenAI Official | 纯白背景，OpenAI 品牌色 | OpenAI 风格 |
|
||||
|
||||
---
|
||||
|
||||
## 14 种图表类型
|
||||
|
||||
### UML 图表（完整支持）
|
||||
- Class Diagram（类图）
|
||||
- Component Diagram（组件图）
|
||||
- Deployment Diagram（部署图）
|
||||
- Package Diagram（包图）
|
||||
- Composite Structure Diagram（组合结构图）
|
||||
- Object Diagram（对象图）
|
||||
- Use Case Diagram（用例图）
|
||||
- Activity Diagram（活动图）
|
||||
- State Machine Diagram（状态机图）
|
||||
- Sequence Diagram（时序图）
|
||||
- Communication Diagram（通信图）
|
||||
- Timing Diagram（时序图）
|
||||
- Interaction Overview Diagram（交互概述图）
|
||||
- ER Diagram（ER 图）
|
||||
|
||||
### AI/Agent 领域图表
|
||||
- RAG 流程图
|
||||
- Agentic Search 架构图
|
||||
- Mem0 记忆架构图
|
||||
- Multi-Agent 协作图
|
||||
- Tool Call 流程图
|
||||
|
||||
---
|
||||
|
||||
## 语义图形词汇
|
||||
|
||||
| 元素 | 形状 |
|
||||
|------|------|
|
||||
| LLM | 双边框矩形 |
|
||||
| Agent | 六边形 |
|
||||
| Vector Store | 环形圆柱体 |
|
||||
| Database | 圆柱体 |
|
||||
| Service | 圆角矩形 |
|
||||
| User | 人物图标 |
|
||||
|
||||
### 语义箭头系统
|
||||
- **实线箭头** = 读操作
|
||||
- **虚线箭头** = 写操作
|
||||
- **异步箭头** = 后台流程
|
||||
- **循环箭头** = 循环调用
|
||||
|
||||
---
|
||||
|
||||
## 安装与使用
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
npx skills add yizhiyanhua-ai/fireworks-tech-graph
|
||||
|
||||
# 更新
|
||||
npx skills update fireworks-tech-graph
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 提示词模板
|
||||
|
||||
### Style 1 — Flat Icon
|
||||
```
|
||||
Draw a Mem0 memory architecture diagram in style 1 (Flat Icon).
|
||||
Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval.
|
||||
Include User, AI App / Agent, LLM, mem0 Client, Memory Manager, Vector Store, Graph DB, Key-Value Store, History Store, Context Builder, Ranked Results, Personalized Response.
|
||||
Use semantic arrows for read, write, control, and data flow. Keep the layout clean and product-doc friendly.
|
||||
```
|
||||
|
||||
### Style 2 — Dark Terminal
|
||||
```
|
||||
Draw a tool call flow diagram in style 2 (Dark Terminal).
|
||||
Show User query, Retrieve chunks, Generate answer, Knowledge base, Agent, Terminal, Source documents, and Grounded answer.
|
||||
Use terminal chrome, neon accents, monospace typography, and semantic arrows for retrieval, synthesis, and embedding update.
|
||||
```
|
||||
|
||||
### Style 3 — Blueprint
|
||||
```
|
||||
Draw a microservices architecture diagram in style 3 (Blueprint).
|
||||
Create numbered engineering sections like 01 // EDGE, 02 // APPLICATION SERVICES, 03 // DATA + EVENT INFRA, 04 // OBSERVABILITY.
|
||||
Include Client Apps, API Gateway, Auth / Policy, three services, Event Router, Postgres, Redis Cache, Warehouse, and Metrics / Traces.
|
||||
Use blueprint grid, cyan strokes, and a bottom-right title block.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 特点
|
||||
|
||||
- **7 种视觉风格** — 从简洁白底到霓虹黑到毛玻璃
|
||||
- **可执行风格系统** — 风格编码到生成器中，不仅在文档中
|
||||
- **完整 UML 支持** — 14 种图表类型
|
||||
- **AI/Agent 领域模式** — RAG、Mem0、Multi-Agent 等内置
|
||||
- **语义图形词汇** — LLM = 双边框矩形，Agent = 六边形
|
||||
- **语义箭头系统** — 颜色 + 线型编码含义
|
||||
- **产品图标** — 40+ 产品的品牌色：OpenAI、Anthropic、Pinecone、Weaviate、Kafka、PostgreSQL…
|
||||
- **SVG + PNG 输出** — SVG 可编辑，1920px PNG 可嵌入
|
||||
- **rsvg-convert 兼容** — 无外部字体获取，纯内联 SVG
|
||||
|
||||
---
|
||||
|
||||
## 适用场景
|
||||
|
||||
- 系统架构文档
|
||||
- 技术博客配图
|
||||
- API 文档说明
|
||||
- AI/Agent 流程图
|
||||
- UML 建模
|
||||
- 产品演示材料
|
||||
95
实践积累/工具技能/MeNav导航站.md
Executable file
95
实践积累/工具技能/MeNav导航站.md
Executable file
@@ -0,0 +1,95 @@
|
||||
# MeNav 个人导航站生成器
|
||||
|
||||
> 一个轻量的个人导航网站，轻量级、高度可定制，完全静态部署
|
||||
|
||||
- **⭐ GitHub**: rbetree/menav (256 stars)
|
||||
- **许可证**: AGPL-3.0
|
||||
- **技术栈**: HTML5 + CSS3 + JavaScript + Handlebars
|
||||
|
||||
---
|
||||
|
||||
## 核心特点
|
||||
|
||||
- 🚀 **静态一键部署** — 无数据库，无后端，纯静态页面
|
||||
- 📂 **书签导入** — 从浏览器书签一键导入
|
||||
- 🎨 **多层级嵌套** — 支持 2-4 层级的分类结构
|
||||
- 🌙 **双主题** — 明亮/黑暗主题切换
|
||||
- 🔗 **GitHub Pages** — 一键 Fork 部署
|
||||
- 🔖 **自动同步** — 配合 MarksVault 浏览器扩展，支持书签自动同步
|
||||
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 克隆仓库
|
||||
|
||||
```bash
|
||||
git clone https://github.com/rbetree/menav.git
|
||||
cd menav
|
||||
```
|
||||
|
||||
### 2. 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 3. 配置
|
||||
|
||||
编辑 `config/` 下的配置文件，定义你的网站分类和链接。
|
||||
|
||||
### 4. 本地预览
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 5. 构建
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建产物在 `dist/` 目录。
|
||||
|
||||
---
|
||||
|
||||
## 部署到 GitHub Pages
|
||||
|
||||
1. Fork [menav](https://github.com/rbetree/menav) 仓库
|
||||
2. 在仓库 Settings → Pages 中启用 GitHub Pages
|
||||
3. 选择 `gh-pages` 分支
|
||||
4. 访问 `https://yourusername.github.io/menav/`
|
||||
|
||||
---
|
||||
|
||||
## 书签导入
|
||||
|
||||
支持从浏览器书签导入，生成导航站点：
|
||||
|
||||
1. 导出浏览器书签为 HTML
|
||||
2. 使用 MeNav 的书签导入功能
|
||||
3. 自动生成分类结构
|
||||
|
||||
---
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
menav/
|
||||
├── src/ # 生成器、书签处理、前端脚本
|
||||
├── templates/ # Handlebars 模板
|
||||
├── config/ # 模块化配置
|
||||
├── assets/ # 静态资源
|
||||
├── bookmarks/ # 书签导入相关
|
||||
└── dist/ # 构建产物
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 适用场景
|
||||
|
||||
- 个人导航主页
|
||||
- 书签管理
|
||||
- 团队内部链接导航
|
||||
- 实验室/项目资源汇总
|
||||
Reference in New Issue
Block a user