Draw io is a powerful, browser-based diagram editor that turns ideas into clear visuals flowcharts, org charts, network diagrams, UML, mind maps and more. No installs, no fuss: drag shapes, snap connectors, style with gradients and icons, then export as PNG, SVG or PDF. Perfect for quick brainstorming, classroom visuals, technical docs or game-level design mockups.

Built for speed and clarity: smart snapping, reusable templates, keyboard shortcuts and intuitive connector routing make building complex diagrams effortless. Collaborate by exporting, importing, or saving to cloud storage. Whether you’re sketching a level map, planning a system architecture, or making a cheat-sheet Draw.io gets it done.

How to play

1. Start: Click Create New Diagram or open a template (Flowchart, UML, Mind Map, Network).
2. Add shapes: Drag shapes from the left panel onto the canvas.
3. Connect: Hover a shape’s handle and drag to another shape to auto-create connectors.
4. Edit text: Double-click any shape to edit labels.
5. Style: Use the right panel to change fill, stroke, font, size, alignment and shadow.
6. Arrange: Use alignment guides, distribute tools and layers to tidy your layout.
7. Export/Save: File → Export as PNG / SVG / PDF, or save to local disk / Google Drive / OneDrive.

Bedienelemente

• Left-click + drag: Move shapes
• Double-click: Edit text
• Drag from shape handle: Create connector
• Ctrl/Cmd + Z: Undo
• Ctrl/Cmd + Y / Shift + Ctrl/Cmd + Z: Redo
• Ctrl/Cmd + C / V: Copy / Paste
• Delete / Backspace: Remove selected item
• Ctrl/Cmd + A: Select all
• Ctrl/Cmd + G / Shift + Ctrl/Cmd + G: Group / Ungroup
• Arrow keys: Nudge selection
• Mouse wheel: Zoom (or Ctrl/Cmd + mouse wheel)
• Space + drag: Pan canvas

Merkmale

• Templates: flowcharts, UML, ER diagrams, mind maps, network maps
• Smart connectors with orthogonal routing
• Layer and grouping support for complex diagrams
• Export PNG, SVG, PDF with transparent background option
• Keyboard-first workflow fast for power users
• Save & load from local disk, Google Drive, OneDrive, Dropbox
• Offline mode (browser caching) keeps working without internet

Tips & tricks

• Use templates to jumpstart complex diagrams.
• Hold Schicht while resizing to keep proportions.
• Use grid + snap options for pixel-perfect alignment.
• Duplicate shapes with Ctrl/Cmd + D to speed up repeated elements.
• Use layers to hide annotations or export simplified views.
• For presentations, export SVG for crisp scaling.