About This Tool

How to Use
  1. Click a shape in the left sidebar to add it to the canvas
  2. Double-click any node to edit its label
  3. Drag from a node handle (dots on edges) to another node to create a connection
  4. Use the Auto-Layout button to arrange nodes automatically
  5. Export your diagram as PNG or save/load it as JSON
Common Use Cases
  • Designing software architecture and system diagrams
  • Mapping out user flows and product decision trees
  • Visualising business processes and workflows
  • Quickly sketching algorithm logic or data pipelines
Tips & Tricks
  • Hold Shift and click to multi-select nodes, then drag them as a group
  • Press Backspace or Delete to remove a selected node or edge
  • Use Auto-Layout to clean up messy diagrams in one click
  • Save your work as JSON so you can reload and continue editing later

You might also like

CSS Layout Playground

Visual CSS Flexbox and Grid layout builder with live preview and code output. Adjust container and item properties, see changes instantly, then copy the generated CSS and HTML into your project.

Code Screenshot Generator

Turn any code snippet into a beautiful, shareable screenshot. Choose from popular syntax themes, select your language, adjust padding and background, then export as a high-quality PNG — no Carbon account required.

Meeting Cost Calculator

Find out the true cost of your meetings in real time. Add attendees with their hourly rates, set the duration, and start the live cost counter to see per-attendee and total costs accumulate by the second.

SQL Playground

Run SQL queries against your data right in the browser. Upload a CSV file, and query it with full SQLite — no server, no database setup required.