Building an Excalidraw Diagram Generator Workflow

🎥 Video lesson — video not yet migrated (source Skool video id: 856cdec4770146fbb99aa0ffc50fede7).

Building an Excalidraw Diagram Generator — From Script to Visual Storyboard

This video covers building a workflow that automatically generates Excalidraw diagrams from your video scripts using Gemini image generation. We go from a terrible first attempt to a genuinely usable output in one edit cycle — a real example of why iteration is the process.

What we're building: A workflow attached to the Copywriter agent that takes a video script, breaks it into segments, generates visual imagery for each segment using Gemini (Nano Banana), and compiles everything into an Excalidraw .json file you can paste straight into excalidraw.com.

Why this matters for content creation: Instead of just talking to camera, you can instantly generate visual canvases that walk viewers through concepts step by step. Strong visual imagery makes complex topics easier to understand and significantly increases engagement.

The build process:

  1. Add a new command to the Copywriter agent for Excalidraw diagram creation
  2. Drag the workflow spec into Claude Code and run the BMAD create workflow process
  3. Set up the Gemini API key (get it from Google AI Studio → Create API Key → add to your .env file)
  4. Run the first test, review the output, and iterate

Key architecture decisions:

  • Excalidraw handles the layout — flowcharts, containers, arrows, and structure
  • Gemini handles the imagery — generating sketch-style visuals, icons, and symbolic representations for each script segment
  • The workflow presents image prompts to the user for approval before generating, so you can steer the visual direction
  • Output is a single .json file you paste into Excalidraw

The iteration story (V1 → V2):

  • V1 was functional but visually poor — basic shapes, no imagery, not something you'd want to show on camera
  • Used the BMAD /edit-workflow command to make targeted improvements: better Gemini prompting, segment-by-segment storyboarding, user approval of prompts before generation, and reference examples for visual style
  • V2 was dramatically better — proper visual storyboard with symbolic imagery, structured layout, and clear segment breakdowns. About 80% of the way there after one edit cycle

What still needs refinement (future iterations):

  • Adding real tool logos to diagrams
  • Splash of colour instead of pure black and white
  • Clearer output folder routing (the workflow was saving to two locations)
  • These are "cherry on top" improvements — the current version is more than good enough to start filming with

Setting up the Gemini API:

  1. Go to aistudio.google.com
  2. Click "Get API Key" → select your project → Create API Key
  3. Copy the key into your .env file as GEMINI_API_KEY=your_key_here
  4. The workflow uses Gemini 3 Pro (image preview model) — always use Exa MCP to verify the latest model name before setting up, as older models get deprecated

Tips from the video:

  • Always use Exa MCP when integrating third-party APIs — models and documentation change constantly. Claude's built-in knowledge may reference outdated model names
  • Run parallel Claude Code conversations for independent tasks — if two workflows don't share files or dependencies, you can build them simultaneously by dragging terminals side by side. Never do this with tasks that edit the same files
  • Get to 80% and keep moving — don't chase perfection on the first build. Get it working, start using it on real content, and come back to polish later when you have time
  • Use reference images to steer quality — attaching screenshots of diagrams you admire gives the workflow concrete examples to work from, which dramatically improves output versus describing what you want in text alone
  • Watch your output folders — the workflow saved diagrams to two different locations because the instructions weren't explicit enough about where outputs should go. Always specify exact output paths in your workflow

Useful commands used:

  • /edit-workflow — make targeted improvements to an existing workflow without rebuilding from scratch
  • Shift + drag — drop files directly into a Claude Code conversation
  • Ctrl + O — expand/collapse file read details in Claude Code
  • Cmd + A, Cmd + C — select and copy the full Excalidraw JSON to paste into excalidraw.com

Next up: Filming the actual video and jumping into the video editing workflow.

← Previous
Next →