.agents/skills/fireworks-tech-graph/references/style-diagram-matrix.md
Not all styles work equally well for every diagram type. Use this guide to pick the best style.
| Style | Suitability | Notes | |-------|----------| | 1 Flat Icon | Excellent | Default choice; colorful node fills, clear layering | | 2 Dark Terminal | Excellent | Popular for dev blogs; use colored borders on dark bg | | 3 Blueprint | Excellent | Perfect for formal architecture docs | | 4 Notion Clean | Good | Minimal, works for inline docs | | 5 Glassmorphism | Good | Striking for presentations and product pages | | 6 Claude Official | Good | Warm aesthetic, Anthropic-style presentations | | 7 OpenAI Official | Good | Clean, precise; minimal borders, brand green accents |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Good | Colored headers per class category |
| 2 Dark Terminal | Good | High contrast for code-like diagrams |
| 3 Blueprint | Excellent | Best for formal UML documentation |
| 4 Notion Clean | Excellent | Clean, minimal; ideal for Notion-embedded diagrams |
| 5 Glassmorphism | Poor | Glass effects distract from structural content |
| 6 Claude Official | Excellent | Warm, readable; good for documentation |
| 7 OpenAI Official | Excellent | Minimal aesthetic matches UML precision |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Good | Clear lifelines; activation boxes visible |
| 2 Dark Terminal | Good | Good for dev articles; dashed lifelines visible |
| 3 Blueprint | Excellent | Formal, technical documentation |
| 4 Notion Clean | Excellent | Best for Notion-embedded sequence diagrams |
| 5 Glassmorphism | Poor | Glass effects make lifelines hard to read |
| 6 Claude Official | Excellent | Ward contrast |
| 7 OpenAI Official | Excellent | Minimal, precise; ideal for API docs |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent | Default; colorful decision diamonds |
| 2 Dark Terminal | Good | Works well for dev workflow diagrams |
| 3 Blueprint | Good | Formal process documentation |
| 4 Notion Clean | Good | Clean for SOPs and inline docs |
| 5 Glassmorphism | Good | Striking for product demos |
| 6 Claude Official | Good | Warm aesthetic for presentations |
| 7 OpenAI Official | Good | Clean and minimal |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent branches, engaging | |
| 2 Dark Terminal | Good | Neon-like branches on dark bg |
| 3 Blueprint | Poor | Blueprint grid conflicts with radial layout |
| 4 Notion Clean | Excellent | Ideal for n brainstorming |
| 5 Glassmorphism | Excellent | Stunning visual for presentations |
| 6 Claude Official | Good | Warm, readable |
| 7 OpenAI Official | Good | Clean and minimal |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent | Color-coded arrows by data type |
| 2 Dark Terminal | Excellent | Glowing data paths on dark bg |
| 3 Blueprint | Excellent | Formal data flow documentation |
| 4 Notion Clean | Good | Minimal, clean |
| 5 Glassmorphism | Poor | Distracts from flow semantics |
| 6 Claude Official | Good | Readable |
| 7 OpenAI Official | Good | Precise, minimal |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Good | Colorful use case ellipses |
| 2 Dark Terminal | Poor | Stick figures less visible on dark bg |
| 3 rint | Excellent | Classic UML aesthetic |
| 4 Notion Clean | Excellent | Perfect for product requirement docs |
| 5 Glassmorphism | Poor | Unnecessary visual noise |
| 6 Claude Official | Excellent | Warm, professional |
| 7 OpenAI Official | Excellent | Clean, precise UML |
| Style | Suitability | Notes |
|---|---|---|
| Flat Icon | Good | Colorful states |
| 2 Dark Terminal | Good | Glowing states and transitions |
| 3 Blueprint | Excellent | Best for formal UML state machines |
| 4 Notion Clean | Excellent | Clean for documentation |
| 5 Glassmorphism | Poor | Distracts from state transitions |
| 6 Claude Official | Excellent | Readable |
| 7 OpenAI Official | Excellent | Minimal, precise |
| Style | Suitabili | |-------|------------|-------| | 1 Flat Icon | Excellent | Colorful device icons | | 2 Dark Terminal | Excellent | Cyberpunk-style network maps | | 3 Blueprint | Excellent | Ideal for infrastructure docs | | 4 Notion Clean | Good | Clean for IT documentation | | 5 Glassmorphism | Good | Striking for presentations | | 6 Claude Official | Good | Professional network diagrams | | 7 OpenAI Official | Good | Clean infrastructure diagrams |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent | Color-coded checkmarks |
| 2 Dark Terminal | Good | Works for dev tool comparisons |
| 3 Blor | Grid conflicts with table layout | |
| 4 Notion Clean | Excellent | Perfect for Notion-embedded tables |
| 5 Glassmorphism | Poor | Distabular data |
| 6 Claude Official | Excellent | Clean, warm |
| 7 OpenAI Official | Excellent | Minimal, precise |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent | Colorful bars by category |
| 2 Dark Terminal | Good | Works for dev roadmaps |
| 3 Blueprint | Good | Formal project plans |
| 4 Notion Clean | Excellent | Ideal for Notion project docs |
| 5 Glassmorphism | Good | Striking for keynote presentations |
| 6 Claude Official | Good | Warm, professional |
| 7 OpenAI Official | Good | Clean timeline |
| Style | Suitability | Notes |
|---|---|---|
| 1 Flat Icon | Excellent | Colorful layers, engaging |
| 2 Dark Terminal | Excellent | Popular for AI/ML blog posts |
| 3 Blueprint | Good | Formal AI system documentation |
| 4 Notion Clean | Good | Clean for AI research notes |
| 5 Glassmorphism | Excellent | Stunning for AI product presentations |
| 6 Claude Official | Excellent | Anthropic AI aesthetic |
| 7 OpenAI Official | Excellent | OpenAI AI aesthetic |