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

Related Tools

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.

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.

Favicon Generator

Generate a complete favicon package from any image or emoji. Creates PNG at all standard sizes (16x16 to 512x512) and Apple Touch icons — download individually or all at once.