Connect nodes by dragging from the dots that appear on their edges. Select a node to edit its label, theme, and description.
Properties
🖱️
Click a node or arrow to edit its properties
Double-click text to edit inline
Ready
0 nodes
0 connections
x:0 y:0
Ctrl+S Save · Del Delete · Double-click Edit · Drag Connect
✏️ Edit Label
📋 Duplicate
⬆️ Bring to Front
⬇️ Send to Back
📄 Copy
📌 Paste
🗑️ Delete
Help
Click arrows in play order…
🕘 Recent diagrams
Click to reopen. Last 8 saves are kept in this browser.
🖼 Replace icon
Swaps only the icon — label, position, connections and play flow stay exactly as they are.
✨ Start from a template
Pick a starting point. Everything is editable after.
💰 Cost Estimator
Rough monthly USD estimate based on the services in this diagram. Pick a workload size to see a baseline number.
Workload:
Estimated monthly total
—
⚠️ Estimates are reference-grade, not authoritative. Excludes data egress, support plans, NAT-gateway processing, and many add-ons. Always verify with the official AWS / Azure / GCP pricing calculators before committing.
📊 Service details
📝 Play Sequence Editor
Set the order, heading, and narration for each step. A step can follow a connection or be free-form (pick “no connection”). The LLM seeds this — edit freely.
🤖 AI Import — generate a diagram with any LLM
Three steps. Works with ChatGPT, Claude, Gemini, Mistral, Llama — any model that returns HTML.
1Copy
→
2Paste into ChatGPT / Claude / Gemini, describe your architecture
📚 Example prompts & output format details
"Draw an AWS serverless API: API Gateway → 3 Lambdas → DynamoDB + SQS"
"Show a RAG chatbot: S3 docs → embedding pipeline → vector DB → Bedrock"
"Diagram a Kubernetes app with ingress, 2 deployments, Redis + Postgres"
The LLM replies with a Potato-format HTML block (a <script type="application/json" id="potato-data">). To keep it for later, save the reply as my-diagram.potato.html and use File → Open.
🏛️Org patternsoptional — baked into every copied prompt
3Paste the LLM's full Potato-format HTML output here, then Import
The whole reply — from <!DOCTYPE html> through </html>. Raw JSON works too if the LLM skipped the wrapper. mxGraph XML also works — paste the <mxGraphModel> and it's converted offline.
🚀 Deploy Guide — turn this diagram into a runbook
Pick your targets, copy, paste into any LLM, follow the numbered steps it returns.
Include:
1Copy
→
2Paste into ChatGPT / Claude / Gemini and follow the steps
Add some nodes to the canvas first — there's no architecture to deploy yet.