Generate publication-quality technical diagrams using Nano Banana Pro (Gemini 3 Pro Image) with AI-powered quality review. Smart iteration only regenerates when quality is below threshold.
Generate publication-quality technical diagrams from natural language descriptions using Nano Banana Pro (Gemini 3 Pro Image). Claude uses this when you need architecture diagrams, flowcharts, data models, or sequence diagrams—just describe what you want visualized and it creates professional diagrams with AI-powered quality review and smart iteration to minimize API costs.
/plugin marketplace add flight505/nano-banana/plugin install nano-banana@nano-bananaThis skill is limited to using the following tools:
__init__.pyscripts/__init__.pyscripts/generate_diagram.pyscripts/generate_diagram_ai.pyGenerate any technical diagram by describing it in natural language. Nano Banana Pro automatically creates publication-quality diagrams with intelligent quality review.
Key Features:
Use this skill when you need:
# Generate an architecture diagram
python skills/diagram/scripts/generate_diagram.py "Microservices architecture with API gateway, auth service, and database" -o architecture.png --doc-type architecture
# Generate a flowchart for a presentation
python skills/diagram/scripts/generate_diagram.py "User authentication flow with OAuth2" -o auth_flow.png --doc-type presentation
# Generate with verbose output
python skills/diagram/scripts/generate_diagram.py "Database schema for e-commerce" -o schema.png -v
Different documents have different quality requirements. Nano Banana automatically adjusts:
| Document Type | Threshold | Best For |
|---|---|---|
specification | 8.5/10 | Technical specs, PRDs |
architecture | 8.0/10 | Architecture documents |
proposal | 8.0/10 | Business proposals |
journal | 8.5/10 | Academic publications |
conference | 8.0/10 | Conference papers |
thesis | 8.0/10 | Dissertations |
grant | 8.0/10 | Grant proposals |
sprint | 7.5/10 | Sprint planning |
report | 7.5/10 | Technical reports |
preprint | 7.5/10 | arXiv, bioRxiv |
readme | 7.0/10 | README files |
poster | 7.0/10 | Academic posters |
presentation | 6.5/10 | Slides, talks |
default | 7.5/10 | General purpose |
Smart Iteration: If the first generation scores above the threshold, no second iteration is performed. This saves time and API costs.
python generate_diagram.py "Three-tier web application architecture with:
- React frontend
- Node.js API layer with load balancer
- PostgreSQL database with read replicas
- Redis cache layer
- CDN for static assets" -o three_tier.png --doc-type architecture
python generate_diagram.py "Sequence diagram showing OAuth2 authorization code flow:
1. User clicks login
2. App redirects to auth server
3. User authenticates
4. Auth server returns code
5. App exchanges code for token
6. App accesses protected resource" -o oauth_flow.png --doc-type specification
python generate_diagram.py "Data pipeline showing:
- Data ingestion from multiple sources (API, files, streaming)
- ETL processing with Apache Spark
- Data warehouse (Snowflake)
- BI dashboards and ML model training" -o pipeline.png --doc-type report
python generate_diagram.py "C4 Container diagram for e-commerce platform:
- Web App (React SPA)
- Mobile App (React Native)
- API Gateway (Kong)
- Order Service (Python)
- Payment Service (Go)
- Inventory Service (Java)
- PostgreSQL Database
- Redis Cache
- RabbitMQ Message Queue" -o c4_container.png --doc-type architecture
For an output path of diagram.png, you'll get:
diagram_v1.png - First iterationdiagram_v2.png - Second iteration (if needed)diagram.png - Final version (copy of best iteration)diagram_review_log.json - Quality scores and review detailsexport OPENROUTER_API_KEY='your_api_key_here'
Create a .env file in your project:
OPENROUTER_API_KEY=your_api_key_here
# ❌ Too vague
"System diagram"
# ✅ Specific and detailed
"Microservices architecture diagram showing user service, order service, and payment service communicating via REST APIs, with a shared PostgreSQL database and Redis cache"
# ✅ Good - describes connections
"Data flow diagram showing:
- User uploads file to S3
- Lambda triggered on upload
- Lambda processes and stores metadata in DynamoDB
- SNS notifies downstream services"
# ✅ Style hints
"Flowchart with decision diamonds for the loan approval process, using green for approved paths and red for rejected paths"
from skills.diagram.scripts.generate_diagram_ai import NanoBananaGenerator
generator = NanoBananaGenerator(verbose=True)
results = generator.generate_iterative(
user_prompt="Kubernetes cluster architecture with ingress, services, and pods",
output_path="k8s_arch.png",
iterations=2,
doc_type="architecture"
)
print(f"Final Score: {results['final_score']}/10")
print(f"Early Stop: {results['early_stop']}")
Set the environment variable or create a .env file. See Configuration section.
Complex diagrams may take up to 2 minutes. The timeout is set to 120 seconds per API call.
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues.