Paste a code snippet. Get a class diagram, flowchart, or architecture diagram back.
Draw a UML class diagram from this code: abstract class Shape { abstract area(): number } class Circle extends Shape { constructor(private radius: number) { super() } area() { return Math.PI * this.radius ** 2 } } class Rectangle extends Shape { constructor(private w: number, private h: number) { super() } area() { return this.w * this.h } }
Try it →Draw a flowchart of this Express route handler's control flow: router.post('/checkout', authenticate, validateCart, async (req, res) => { const total = calculateTotal(req.body.items); if (total <= 0) return res.status(400).send('empty cart'); const charge = await chargeCard(req.user, total); if (!charge.success) return res.status(402).send('payment failed'); const order = await createOrder(req.user, req.body.items); res.json(order); })
Try it →Draw a flowchart for this function: function quicksort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; const left = arr.slice(1).filter(x => x < pivot); const right = arr.slice(1).filter(x => x >= pivot); return [...quicksort(left), pivot, ...quicksort(right)]; }
Try it →Draw an architecture diagram from this docker-compose.yml: services are 'web' (nginx, exposes 80, depends on 'api'), 'api' (node app, depends on 'db' and 'redis'), 'db' (postgres, volume mounted), 'redis' (cache), and 'worker' (background job processor, depends on 'redis' and 'db').
Try it →Inherited a file with no docs and unclear class relationships? Paste it and ask for a class diagram — faster than tracing inheritance by hand across multiple files.
A gnarly control-flow change is easier to review as a flowchart than as a diff. Paste the new function into a comment-ready diagram before the review call.
New hires paste the core domain classes or the main request handler and get a diagram instead of reading 500 lines cold.
Before splitting a god class into smaller pieces, diagram the current structure so the 'before' state is documented and reviewable.
Instructors turn a student's (or a textbook's) code sample into a visual on the fly — useful for explaining inheritance, control flow, or service boundaries without a whiteboard.
Sometimes the fastest way to explain a piece of code is a picture, and the fastest way to get that picture isn't opening a dedicated static-analysis tool — it's pasting the snippet and describing what you want drawn. This page is for that workflow: paste a class definition and ask for a class diagram, paste a route handler and ask for a flowchart of its control flow, paste a docker-compose file and ask for the service topology as an architecture diagram.
Be precise about what you're asking for — "draw a class diagram from this code" gets a different (and better) result than just pasting code with no instruction, because the AI reads code the way an engineer skimming a diff does: semantically, not by building a formal AST. That's the honest tradeoff versus a dedicated code-to-UML tool: no build step, no language server, works on any language the model understands (JavaScript, TypeScript, Python, Java, Go, Rust, and more) — but it's a best-effort reading, not a guaranteed-correct static analysis. For a quick PR review comment or an onboarding doc, that's the right tradeoff; for a diagram that must be pixel-perfect against the actual type system, review the output before you rely on it.
Keep the pasted snippet scoped — one class hierarchy, one function, one docker-compose file — rather than an entire repository. The tool reads what fits in a prompt, not a whole codebase; for large-scale reverse engineering across dozens of files, this is a starting point for individual pieces, not a full-repo visualizer.
Not sure how to phrase your prompt? Chat mode lets AI ask 2-3 clarifying questions about actors, events, and edge cases — then draws.
Read our in-depth tutorials — symbols, structures, 9 rules, and copy-paste prompt templates for real-world flows.
Describe your design. The AI figures out whether it's a class, sequence, or state diagram.
Describe your system's components and how they talk to each other. Get a layered architecture diagram.
Describe classes, attributes, and inheritance. Get a Mermaid UML class diagram.