# How to Generate Excalidraw-Style Blog Images With Nano Banana > Skip Excalidraw and Figma. Use the Nano Banana Claude Code skill to generate hand-drawn sketch-style blog images directly from your terminal -- same session, zero context switch. - **URL**: https://www.maximalstudio.in/blog/excalidraw-style-blog-images-nano-banana --- Maximal StudioApproachResourcesBlogToolsGet In Touch<- Back to BlogHow to Generate Excalidraw-Style Blog Images With Nano BananaJun 26, 2026-Shubham RasalSkip Excalidraw and Figma. Use the Nano Banana Claude Code skill to generate hand-drawn sketch-style blog images directly from your terminal -- same session, zero context switch.Excalidraw-style images -- rough lines, sketch aesthetic, intentionally imperfect -- have become the default visual language for technical blogs. They look like you drew them on a whiteboard during a real conversation. They communicate ideas without the polish-overhead of Figma or the generic stock photo problem. The problem: you still have to open Excalidraw, draw the thing, export it, optimize it, move it into your project. For one image it's 10 minutes. For a post with three diagrams, it's 30. Nano Banana eliminates most of that. Here's how to generate Excalidraw-style blog images directly from Claude Code. What You're Actually Getting Nano Banana wraps the Gemini CLI's nanobanana extension. When you describe an image in plain English and specify an Excalidraw-like style, Gemini's image model renders it as a hand-drawn sketch -- rough lines, whiteboard aesthetic, no polish. It's not pixel-perfect Excalidraw. The lines aren't as clean, the geometry isn't constrained, and you can't edit the output node-by-node. What you do get is the feel of Excalidraw -- the informal, "I drew this to explain an idea" quality -- in about 15 seconds, without leaving your terminal. For blog headers, workflow diagrams, and concept illustrations, that's usually enough. Setup (One Time) If you haven't installed Nano Banana yet: npm install -g @google/gemini-cli gemini extensions install https://github.com/gemini-cli-extensions/nanobanana git clone https://github.com/kkoppenhaver/cc-nano-banana ~/.claude/skills/nano-banana Get a Gemini API key at aistudio.google.com and set it: export GEMINI_API_KEY="your-key-here" Restart Claude Code. That's it -- you won't repeat this. The Prompt Pattern That Works The key to getting the Excalidraw look is being explicit about the aesthetic. Three things matter: Name the style: "excalidraw hand-drawn sketch style", "rough pencil lines", "whiteboard sketch" White background: Excalidraw's signature is white canvas + dark ink. Say it explicitly. No text (usually): Unless you want text baked into the image, exclude it -- you'll add it as a caption or heading instead. Here's the base pattern: gemini --yolo "/generate 'excalidraw hand-drawn sketch style: [describe the diagram or scene]. White background, rough black ink lines, imperfect hand-drawn look, no text'" Examples That Actually Work Blog hero image gemini --yolo "/generate 'excalidraw hand-drawn sketch style hero image: a workflow showing pencil icon, arrow, robot icon, arrow, image frame. White background, rough sketch lines, no text, wide 1200x630 format'" Terminal-to-output diagram gemini --yolo "/generate 'excalidraw sketch style: two panels side by side. Left panel shows a terminal window with a prompt cursor. Right panel shows a blog post wireframe with an image placeholder at top. Vertical line separating them. White background, black ink, rough hand-drawn lines, no text'" Architecture / flow diagram gemini --yolo "/generate 'excalidraw hand-drawn architecture diagram: three boxes connected by arrows labeled step 1, step 2, step 3. Rough sketch boxes with slightly wobbly lines. White background, black ink, no color, sketch aesthetic'" Concept comparison gemini --yolo "/generate 'excalidraw sketch style: two columns with a vertical divider. Left column has a sad face and heavy stack of papers. Right column has a happy face and a single clean form. White background, rough ink sketch, no text'" Getting Variations If the first output is close but not quite right, don't start over -- generate variations: # Three variations of the same prompt gemini --yolo "/generate 'excalidraw sketch: ...' --count=3" Or edit the file directly: # Make it rougher / more sketch-like gemini --yolo "/edit nanobanana-output/your-image.png 'make the lines rougher and more hand-drawn, increase the sketch feel'" Moving Images Into Your Project Nano Banana drops files into ./nanobanana-output/. Copy them to your public/blog/ folder and reference them in MDX: cp nanobanana-output/your-image.png public/blog/your-image.png Then in the post: Alt text describing the diagram What It Doesn't Do A few honest limitations: No editable nodes. You can't go back and move boxes around. If the layout is wrong, regenerate. Text can be unreliable. Gemini sometimes renders garbled text inside images. Use "no text" in your prompt and add labels as HTML/MDX instead. Not pixel-precise. For a design system diagram that goes on a landing page, use real Excalidraw. For a blog post that ships today, this is fine. The test: if the image communicates the idea and doesn't look out of place on the page, it's good enough to ship. That's a lower bar than "would a designer approve it" -- and for most blog content, the lower bar is the right one. The Full Workflow in One Session Here's what generating images for a post actually looks like with Nano Banana installed: Write the post draft Identify 2-3 places that need a diagram Ask Claude: "Generate an Excalidraw-style image for this section: [paste the section]" Claude runs the Nano Banana command, outputs to nanobanana-output/ Copy to public/blog/, add the MDX reference Done -- back to writing The whole image step goes from 10-30 minutes (Excalidraw + export + optimize) to under 2 minutes. Across a post with three diagrams, that's a meaningful difference in whether you actually finish the post today. Want This in Your Workflow? We build Claude Code integrations and AI-powered content pipelines for teams. If you're spending time on manual steps that should be automated -- we can help.Keep exploringWork with usBuild your AI product ->We ship AI integrations, dev tools, and full products for teams.Free ToolsAI Calculators & Utilities ->ROI calculator, LLM cost estimator, workflow tools.Case StudiesReal-world AI builds ->See how we've shipped AI automation for real businesses.BlogMore posts ->Practical guides on AI, automation, and building fast.Maximal StudioAI & automation for builders.PagesToolsBlogCase StudiesApproachResourcesOfficeIndiaBangaluru, Karnataka, IndiaConnectLinkedInXEmail© 2026 Maximal Studio. All rights reserved. --- Maximal Studio builds custom AI systems, automations, and growth tooling.