Ever found yourself sketching out Kubernetes architectures on whiteboards or napkins, then spending hours translating those drawings into YAML? What if you could just draw your architecture and have AI generate the Helm charts for you?
That's exactly what I built last weekend - and I'm sharing the entire journey (and code) with you.
💡 The "What If" Moment
While doodling microservices on my notebook, I thought: "What if I could just draw this and have GPT-4 Vision generate the Helm charts?"
The idea was simple:
- Draw rectangles = Deployments
- Draw circles = Services
- Add text labels = Component names
- Let AI do the heavy lifting
🚀 Building the Prototype
Tech Stack (Keep It Simple)
- Frontend: React (Create React App for speed)
- Canvas: HTML5 Canvas API
- AI: Azure OpenAI GPT-4 Vision
- Styling: Tailwind CSS
- No backend needed (direct API calls)
The 3-Hour Sprint
Hour 1: Canvas Foundation
// Basic drawing tools
const tools = ['pen', 'rectangle', 'circle', 'text'];
// Canvas service for drawing operations
class CanvasService {
static drawRectangle(ctx, startPos, endPos, color) {
const width = endPos.x - startPos.x;
const height = endPos.y - startPos.y;
ctx.strokeStyle = color;
ctx.strokeRect(startPos.x, startPos.y, width, height);
}
}
Hour 2: AI Integration
// Send canvas image to Azure OpenAI
const analyzeDrawing = async (imageDataUrl) => {
const response = await fetch(azureEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'api-key': apiKey
},
body: JSON.stringify({
messages: [{
role: 'user',
content: [
{ type: 'text', text: analysisPrompt },
{ type: 'image_url', image_url: { url: imageDataUrl } }
]
}],
max_tokens: 4000
})
});
};
Hour 3: YAML Generation
const analysisPrompt = `
Analyze this hand-drawn Kubernetes architecture:
- Rectangles = Deployments
- Circles = Services
- Lines = Connections
- Text = Component names
Generate production-ready Helm chart YAML with:
- {{ .Values.* }} templating
- Resource limits
- Health checks
- Best practices
`;
🎨 The Magic Moment
When I drew this simple architecture:
[Frontend] → (Load Balancer) → [API] → (Database)
And got back this production-ready Helm chart:
apiVersion: v2
name: my-application
description: Generated from architecture drawing
version: 0.1.0
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: {{ include "chart.fullname" . }}-frontend
spec:
replicas: {{ .Values.frontend.replicas | default 3 }}
selector:
matchLabels:
app: frontend
template:
spec:
containers:
- name: frontend
image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.image.tag }}"
ports:
- containerPort: 80
resources:
limits:
cpu: 500m
memory: 512Mi
# ... complete deployment config
I knew I had something special.
🛠️ Key Features That Emerged
1. Intuitive Drawing Interface
- Pen tool for freehand sketching
- Shape tools for clean components
- Text labels for naming
- Color coding for different environments
2. Smart AI Analysis
- GPT-4 Vision recognizes architectural patterns
- Generates appropriate Kubernetes resources
- Includes production best practices
- Adds proper Helm templating
3. Real-World Output
- Production-ready YAML
- Built-in validation
- Download as
.yamlfiles - Editable in the interface
🎯 Unexpected Discoveries
What Worked Better Than Expected
AI Pattern Recognition: GPT-4 Vision is surprisingly good at understanding architectural intent from rough sketches.
Helm Templating: The AI consistently generates proper {{ .Values.* }} syntax without being explicitly taught.
Error Recovery: When drawings are ambiguous, the AI makes reasonable assumptions and adds helpful comments.
What I Learned
Canvas Optimization: Had to limit canvas size to prevent memory issues - 600x400px is the sweet spot.
Prompt Engineering: Specific instructions about shape meanings dramatically improved output quality.
Browser Limitations: Direct API calls work for prototyping but need a backend proxy for production.
🚧 The Rough Edges (And Why That's OK)
This is a prototype built for exploration, not production:
- CORS Issues: Browser security blocks some API calls
- No Authentication: API keys in frontend (demo only!)
- Basic Validation: Minimal error handling
- Memory Constraints: Canvas history limited to prevent crashes
But that's exactly the point - sometimes you need to build the "wrong" thing first to discover the right approach.
🔍 What's Next?
I'm open-sourcing this entire project because:
- The concept has legs - there's real value here
- Community can improve it - better than my weekend hack
- Multiple use cases - beyond just Helm charts
Potential directions:
- Terraform generation from infrastructure diagrams
- Database schema from ER diagrams
- Docker Compose from service sketches
- CI/CD pipelines from workflow drawings
🎉 Try It Yourself
Quick start:
git clone https://github.com/ayush571995/helm-chart-designer
cd helm-chart-designer
npm install
# Add your Azure OpenAI credentials to .env
echo "REACT_APP_AZURE_OPENAI_ENDPOINT=your-endpoint" > .env
echo "REACT_APP_AZURE_OPENAI_API_KEY=your-key" >> .env
npm start
What to draw:
- Rectangle labeled "frontend"
- Circle labeled "api-service"
- Line connecting them
- Click "Generate YAML"
- Watch the magic happen ✨
💭 Reflections
Building this reminded me why I love programming - taking a random Saturday idea and making it real in just a few hours.
The best prototypes aren't perfect - they're possible. They show what could be, not what should be.
Sometimes the most valuable thing you can build is proof that something can be built.
🤝 Join the Experiment
If this resonates with you:
- ⭐ Star the repo if you find it interesting
- 🍴 Fork it and make it better
- 🐛 Break it and tell me how
- 💡 Extend it in directions I never imagined
The code is rough, the edges are sharp, but the idea is solid.
What would you build with this foundation?
What's your experience with rapid prototyping? Have you built anything that surprised you with how well it worked? Drop a comment below - I'd love to hear your weekend hack stories! 👇
Top comments (1)
Wow! That is pretty cool! I like the quick visual diagraming idea. Thanks for sharing.