Nano Banana - Diagram Generation

Overview

Generate any technical diagram by describing it in natural language. Nano Banana Pro automatically creates publication-quality diagrams with intelligent quality review.

Key Features:

• 🍌 Smart Iteration: Only regenerates if quality is below threshold (saves API calls)
• 🎯 Document-Type Aware: Different quality standards for different document types
• 🔍 AI Quality Review: Gemini 3 Pro reviews each generation for professional standards
• 📊 Publication-Ready: High contrast, readable fonts, colorblind-friendly

When to Use This Skill

Use this skill when you need:

• Architecture Diagrams: System designs, microservices, C4 models
• Flowcharts: Process flows, decision trees, user journeys
• Data Models: ERD diagrams, schema visualizations
• Sequence Diagrams: API interactions, message flows
• Infrastructure Diagrams: Cloud architecture, deployment topologies
• Pipeline Diagrams: CI/CD, data pipelines, ML workflows
• Any Technical Visualization: Describe it, Nano Banana creates it

Quick Start

bash
1# Generate an architecture diagram
2python3 skills/diagram/scripts/generate_diagram.py "Microservices architecture with API gateway, auth service, and database" -o architecture.png --doc-type architecture
3
4# Generate a flowchart for a presentation
5python3 skills/diagram/scripts/generate_diagram.py "User authentication flow with OAuth2" -o auth_flow.png --doc-type presentation
6
7# Generate with higher resolution
8python3 skills/diagram/scripts/generate_diagram.py "Complex system diagram" -o system.png --resolution 2K
9
10# Generate with verbose output
11python3 skills/diagram/scripts/generate_diagram.py "Database schema for e-commerce" -o schema.png -v

Editing Existing Diagrams

Use /nano-banana:edit to modify an existing diagram, or call the script directly:

bash
1# Edit via command (recommended)
2/nano-banana:edit architecture.png "Add a Redis cache layer between the API and database"
3
4# Edit via script directly
5python3 skills/diagram/scripts/generate_diagram_ai.py "Add Redis cache layer" --input architecture.png -o architecture_edit1.png --doc-type architecture

When to edit vs. regenerate:

• Edit when the diagram structure is correct but needs additions or modifications
• Regenerate when the layout or overall approach needs rethinking

Document Types & Quality Thresholds

Different documents have different quality requirements. Nano Banana automatically adjusts:

Smart Iteration: If the first generation scores above the threshold, no second iteration is performed. This saves time and API costs.

Diagram Examples

System Architecture

bash
1python3 generate_diagram.py "Three-tier web application architecture with:
2- React frontend
3- Node.js API layer with load balancer
4- PostgreSQL database with read replicas
5- Redis cache layer
6- CDN for static assets" -o three_tier.png --doc-type architecture

Sequence Diagram

bash
1python3 generate_diagram.py "Sequence diagram showing OAuth2 authorization code flow:
21. User clicks login
32. App redirects to auth server
43. User authenticates
54. Auth server returns code
65. App exchanges code for token
76. App accesses protected resource" -o oauth_flow.png --doc-type specification

Data Flow

bash
1python3 generate_diagram.py "Data pipeline showing:
2- Data ingestion from multiple sources (API, files, streaming)
3- ETL processing with Apache Spark
4- Data warehouse (Snowflake)
5- BI dashboards and ML model training" -o pipeline.png --doc-type report

C4 Model - Container Diagram

bash
1python3 generate_diagram.py "C4 Container diagram for e-commerce platform:
2- Web App (React SPA)
3- Mobile App (React Native)
4- API Gateway (Kong)
5- Order Service (Python)
6- Payment Service (Go)
7- Inventory Service (Java)
8- PostgreSQL Database
9- Redis Cache
10- RabbitMQ Message Queue" -o c4_container.png --doc-type architecture

How It Works

1. Initial Generation: Nano Banana Pro (gemini-3-pro-image-preview) generates the diagram
2. Quality Review: Gemini 3 Pro evaluates on 5 criteria:
   • Technical Accuracy (0-2 pts)
   • Clarity and Readability (0-2 pts)
   • Label Quality (0-2 pts)
   • Layout and Composition (0-2 pts)
   • Professional Appearance (0-2 pts)
3. Decision: If score ≥ threshold → Done! If score < threshold → Iterate
4. Improvement: Feedback is incorporated into an improved prompt
5. Regeneration: New diagram generated with improvements (max 2 iterations)

Output Files

For an output path of diagram.png, you'll get:

• diagram_v1.png - First iteration
• diagram_v2.png - Second iteration (if needed)
• diagram.png - Final version (copy of best iteration)
• diagram_review_log.json - Quality scores and review details

Configuration

Option 1: Google Gemini API (Recommended)

bash
1export GEMINI_API_KEY='your_gemini_key_here'

Get a key at https://aistudio.google.com/apikey (free tier available).

Option 2: OpenRouter (Alternative)

bash
1export OPENROUTER_API_KEY='your_api_key_here'

Get a key at https://openrouter.ai/keys. Required for non-Google models.

.env File

Create a .env file in your project with either key:

GEMINI_API_KEY=your_gemini_key_here

Auto-detection: When both keys are set, the Google direct API is preferred. Use --provider openrouter to force OpenRouter.

Tips for Better Diagrams

Be Specific

bash
1# ❌ Too vague
2"System diagram"
3
4# ✅ Specific and detailed
5"Microservices architecture diagram showing user service, order service, and payment service communicating via REST APIs, with a shared PostgreSQL database and Redis cache"

Include Relationships

bash
1# ✅ Good - describes connections
2"Data flow diagram showing:
3- User uploads file to S3
4- Lambda triggered on upload
5- Lambda processes and stores metadata in DynamoDB
6- SNS notifies downstream services"

Specify Style When Needed

bash
1# ✅ Style hints
2"Flowchart with decision diamonds for the loan approval process, using green for approved paths and red for rejected paths"

Python API

python
1from skills.diagram.scripts.generate_diagram_ai import NanoBananaGenerator
2
3generator = NanoBananaGenerator(verbose=True)
4results = generator.generate_iterative(
5    user_prompt="Kubernetes cluster architecture with ingress, services, and pods",
6    output_path="k8s_arch.png",
7    iterations=2,
8    doc_type="architecture"
9)
10
11print(f"Final Score: {results['final_score']}/10")
12print(f"Early Stop: {results['early_stop']}")

Integration with Other Skills

• Use with sprint planning to visualize user story workflows
• Use with architecture research to diagram ADR decisions
• Use with building blocks to visualize component relationships
• Use with competitive analysis to create comparison diagrams

Troubleshooting

"OPENROUTER_API_KEY not found"

Set the environment variable or create a .env file. See Configuration section.

Low Quality Scores

• Add more detail to your prompt
• Specify relationships between components
• Use a higher threshold document type to force more iterations

Generation Timeout

Complex diagrams may take up to 2 minutes. The timeout is set to 120 seconds per API call.

Cost Considerations

• Gemini 3 Pro Image: ~$2/M input, ~$12/M output tokens
• Simple diagram (1 iteration): ~$0.05-0.15
• Complex diagram (2 iterations): ~$0.10-0.30
• Smart iteration saves costs by stopping early when quality is sufficient