🍌 NanoBanana PRO

Generate knowledge posters (infographics) from your Obsidian notes using AI

✨ Features

🎨 AI-Powered Infographic Generation: Transform your notes into beautiful visual posters
🤖 Multiple AI Providers: Choose from OpenAI, Google Gemini, Anthropic Claude, or xAI Grok
📝 Prompt Preview & Edit: Review and customize the generated prompt before creating images
📊 6 Visual Styles: Infographic, Poster, Diagram, Mind Map, Timeline, Cartoon (Comic Strip)
🔄 Auto-Retry: Automatic retry on transient failures with exponential backoff
📈 Progress Tracking: Real-time progress modal with step-by-step feedback
🌙 Dark Mode Support: Fully compatible with Obsidian's dark theme

📸 Screenshots

Progress Modal

┌─────────────────────────────────────────┐
│  🎨 Knowledge Poster 생성 중...          │
│                                         │
│  ████████████░░░░░░░░ 60%              │
│                                         │
│  ✅ 1. 노트 분석 완료                    │
│  ✅ 2. 프롬프트 생성 완료                 │
│  🔄 3. 이미지 생성 중...                 │
│  ⏳ 4. 파일 저장 대기                    │
└─────────────────────────────────────────┘

Prompt Preview

┌─────────────────────────────────────────┐
│  📝 프롬프트 미리보기                     │
│                                         │
│  🤖 모델: gemini-2.0-flash-exp          │
│  📊 스타일: Infographic                  │
│                                         │
│  [이미지 생성] [다시 생성] [취소]          │
└─────────────────────────────────────────┘

🚀 Installation

Community plugins (recommended)

Once the plugin is listed in the Obsidian Community directory:

Open Settings → Community plugins
Turn off Restricted mode if it is enabled
Select Browse and search for NanoBanana PRO
Install and enable the plugin
Add a Google API key in the plugin settings

Via BRAT

Install the BRAT plugin
Open BRAT settings
Click Add Beta Plugin
Enter: reallygood83/nanobanana-pro-obsidian
Enable the plugin

Manual installation

Download the latest release from Releases
Extract main.js, manifest.json, and styles.css to your vault's .obsidian/plugins/nanobanana-pro/ folder
Reload Obsidian
Enable the plugin in Settings → Community plugins

⚙️ Configuration

API Keys

You'll need at least a Google API Key for image generation. Optionally configure other providers for prompt generation:

Provider	Required	Purpose
Google	✅ Yes	Image generation (always required)
OpenAI	Optional	Prompt generation
Anthropic	Optional	Prompt generation
xAI	Optional	Prompt generation

Get your API keys:

This plugin is free. Image and prompt generation use the API keys you provide, and those providers may charge usage fees.

Network use

This plugin sends the active note's content to the AI providers you configure, so it can generate a prompt and an image. Nothing is sent to the plugin author.

Service	Host	When it is used
Google Gemini	`generativelanguage.googleapis.com`	Prompt generation (if Google is selected) and all image generation
OpenAI	`api.openai.com`	Prompt generation, only if you select OpenAI
Anthropic	`api.anthropic.com`	Prompt generation, only if you select Anthropic
xAI	`api.x.ai`	Prompt generation, only if you select xAI

API keys are stored locally in your Obsidian plugin data and are sent only to the matching provider.

Settings

Setting	Default	Description
AI Provider	Google	Provider for prompt generation
Prompt Model	gemini-2.0-flash-exp	Model for generating image prompts
Image Model	gemini-2.0-flash-exp	Model for generating images
Image Style	Infographic	Visual style preset
Show Preview	✅ Enabled	Preview prompt before generation
Show Progress	✅ Enabled	Show progress modal
Attachment Folder	999-Attachments	Where to save images
Auto-Retry Count	2	Retry on transient failures

📖 Usage

Generate Knowledge Poster

Open a note with content
Use Command Palette (Cmd/Ctrl + P)
Search for "Generate Knowledge Poster"
(Optional) Edit the prompt in preview modal
Wait for generation to complete
Image will be embedded at the top of your note

Commands

Command	Description
Generate Knowledge Poster	Full generation process
Generate Prompt Only	Generate and copy prompt to clipboard
Regenerate Last Poster	Retry last generation with same prompt

Keyboard Shortcuts

You can assign custom hotkeys in Settings → Hotkeys:

Search for "NanoBanana" to find all commands

🎨 Image Styles

Style	Description	Best For
📊 Infographic	Charts, icons, visual hierarchy	Data-driven content
🎨 Poster	Bold typography, strong imagery	Announcements, summaries
📐 Diagram	Technical, clear connections	System architecture
🧠 Mind Map	Central concept with branches	Brainstorming, concepts
📅 Timeline	Progression and milestones	Historical, processes
🎬 Cartoon	Comic strip with sequential panels	Stories, tutorials, step-by-step

❓ Troubleshooting

"API key is not configured"

→ Go to Settings → NanoBanana PRO and add your API key

"Rate limit exceeded"

→ Wait a few minutes and try again. Consider upgrading your API plan.

"Content was blocked by safety filters"

→ Modify your note content or try a different style

Image generation fails repeatedly

→ Try regenerating with a different style, or edit the prompt in preview mode

No image in response

→ The model may not support image generation. Try gemini-2.0-flash-exp or similar.

🛠️ Development

Build from source

# Clone the repository
git clone https://github.com/reallygood83/nanobanana-pro-obsidian.git
cd nanobanana-pro-obsidian

# Install dependencies
npm install

# Build for production
npm run build

# Development mode (watch)
npm run dev

Project Structure

.
├── src/
│   ├── main.ts              # Plugin entry point
│   ├── types.ts             # TypeScript interfaces
│   ├── settings.ts          # Settings tab UI
│   ├── settingsData.ts      # Default settings
│   ├── progressModal.ts     # Progress modal UI
│   ├── previewModal.ts      # Prompt preview modal
│   └── services/
│       ├── promptService.ts # AI prompt generation
│       ├── imageService.ts  # Image generation
│       └── fileService.ts   # File operations
├── manifest.json
├── package.json
├── styles.css
└── README.md

📝 Changelog

v1.0.21

Prepare the plugin for the Obsidian Community directory
Mask API keys in settings
Disclose network use and third-party AI providers
Use Vault.process when embedding generated images

v1.0.0

Initial release
Support for 4 AI providers (OpenAI, Google, Anthropic, xAI)
5 image styles
Progress modal with step tracking
Prompt preview and edit
Auto-retry with exponential backoff
Korean and English UI support

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Obsidian for the amazing platform
Google Gemini for image generation capabilities
All the amazing AI providers making this possible

👨‍💻 Developer

Made with 🍌 by NanoBanana PRO

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
SPEC.md		SPEC.md
esbuild.config.mjs		esbuild.config.mjs
eslint.config.mjs		eslint.config.mjs
main.js		main.js
manifest.json		manifest.json
package-lock.json		package-lock.json
package.json		package.json
styles.css		styles.css
tsconfig.json		tsconfig.json
version-bump.mjs		version-bump.mjs
versions.json		versions.json

Latest commit

History

Folders and files

Repository files navigation