How to use DrawIT Pro
DrawIT Pro is a free, browser-based diagram & flowchart tool for IT pros and developers — a simple draw.io / Visio alternative. This guide covers everything: drawing shapes, smart connectors, layers, tables, stencils, ready-made templates and front-end UI controls for website wireframes. No install, no sign-up — open the editor and follow along.
Drawing tools (left rail)
- Select / move
- Click a shape to select; drag to move it.
- Rectangle · Ellipse · Triangle · Diamond · Polygon
- Pick the tool, then drag on the canvas to size it. A polygon's Sides (3–20) are set in the panel.
- Line
- Drag to draw in any direction; drag either endpoint later. Per-end caps make arrows.
- Freehand pen
- Drag to sketch a stroke; keep drawing.
- Connect (↳)
- Drag from one shape onto another to link them with a connector.
- Text (T)
- Click to drop a label; double-click it to edit inline.
- Table
- Drag to draw; double-click a cell to type; select a cell to style it.
- Dropper
- Click a shape to pick its color, then click others to paint it on.
Selecting & moving
- Add / remove from selection
- Shift-click a shape.
- Marquee select
- Drag a box across empty canvas (Shift to add).
- Select all / deselect
- Ctrl+A · Esc
- Nudge
- Arrow keys (1px), Shift+arrows (10px).
- Resize
- Drag a handle, or right-click → Size → Half / Double / Custom… → Shape, Stack or Group. Custom opens a slider centred at 1× (drag left to ½×, right to 2×) that scales the whole stack or group live.
- Carry stacked shapes
- Dragging a shape moves the shapes on top of / inside it. Hold Ctrl to move it out from under its stack.
- Copy / paste (incl. across tabs)
- Ctrl+C / Ctrl+V, or right-click a shape → Copy, then right-click empty canvas → Paste. Copies the whole group/selection — switch tabs and paste to move it to another drawing.
- Canvas menu
- Right-click empty canvas for Paste, Snap to grid, Snap to objects, Show grid, Infinite canvas and Orientation.
Group, align & distribute
- Group / ungroup
- Select 2+, then Ctrl+G / Ctrl+Shift+G (or right-click → Group).
- Group a stack
- Right-click a shape → Group → Group stack.
- Align edges / centers
- Select 2+, use the Arrange section (left / center / right / top / middle / bottom).
- Distribute
- Select 3+, “Space across / down” makes the gaps equal.
- Z-order
- Bring to front / back and forward / backward — panel buttons or right-click → Position.
- Snapping
- Shapes snap to the grid and to other shapes' edges/centers. Turn off Snap to grid for finer, freehand placement.
Styling
- Fill / gradient / shadow
- Toggle fill, set a 2-color gradient (angle), or add a drop shadow.
- Border
- Set color & width. Click one side of a shape to color just that edge; the middle for all sides.
- Corner radius
- Rects: drag the knob or use the slider. Diamonds: per-corner rounding.
- Right-click → Border
- Quickly toggle the border, a drop shadow, or a second (double) outline.
- Change shape type
- Right-click → Change shape (e.g. rectangle → parallelogram).
- Text
- Font, size, weight, italic, color, H1–H5 presets, and a padded text border.
Connectors
- Create
- Connect tool (↳): drag shape → shape. It follows the shapes as they move.
- Style
- Arrowheads (either/both ends), dashed, color & width.
- Label
- Double-click the connector to set a label; drag it to reposition.
- Joints & right-angled
- Right-click → Add joint, or Make right-angled for a clean elbow.
- Find best path
- Right-click a connector → Find best path — routes it around shapes (and other connectors when possible).
- Auto-avoid
- Select a connector → “Avoid shapes (auto)” keeps it re-routed as you move things.
Stencils, templates & controls
- Stencils
- Stencils tab → search, then click or drag IT icons onto the canvas. Import from Iconify adds 200k+ icons, filtered to commercial-safe (permissive) licenses.
- Templates
- Templates tab → click a preview to open a ready-made diagram as a new drawing: a full Website Mockup (a whole page of UI controls on a frame), AWS & Azure architecture, cloud, network, flowchart, org chart, ER (tables), microservices, Kubernetes, 3-tier and mind map.
- UI controls
- Controls tab → search, then click or drag front-end mockups: buttons (incl. delete), inputs, checkboxes / radios / toggles, segmented & radio/checkbox groups, H1–H5, paragraphs, cards, a page frame, top / bottom / left nav bars, alerts, progress bars, sliders and more. Each control drops as a group so it moves as one, and placed controls get a settings section in Properties — steppers to adjust options, width, lines, rows or % and rebuild it in place.
- Wireframe a page
- Drop a Page frame, then drag nav bars, forms, buttons and text onto it to mock up a whole website or screen. Set the frame's Primary & Secondary colors to re-theme every control stacked on it at once — and any control you drop onto the frame picks up its colors automatically. Everything stays editable (relabel, recolor, resize, group).
Canvas, pages & layers
- Zoom / pan
- Ctrl+scroll to zoom (20%–400%); middle-mouse drag to pan.
- Infinite canvas
- Canvas settings → turn on Infinite canvas and the sheet grows automatically (A-series, doubling) as you move items past the edge.
- Pages
- Add / duplicate / delete pages, set size & orientation, and a background color/image.
- Tabs
- Each tab is a separate drawing — new, close, double-click to rename.
- Layers
- Add, reorder, show/hide, lock, and rename layers; new shapes land on the active layer.
Import, export & sharing
- Save / open project (.drawit)
- Toolbar 📁 DIT → Save this drawing, Save whole workspace, or Open a .drawit file. DrawIT's own loss-less format — keeps everything editable (groups, stacks, control settings, connectors, layers, pages). Best for back-ups or moving drawings between machines; imports open as new tabs.
- Import SVG / image
- Toolbar ⬆ SVG, or 🖼 IMG / drag a PNG-JPG file onto the canvas.
- Export
- ⬇ SVG or ⬇ PNG (2× raster). Multi-page drawings export one file per page. For a re-editable file, use Save project (.drawit).
- Share (view + edit links)
- Header Share gives two links: a read-only View link (anyone can open the picture) and a secret Edit link that re-opens the drawing in the editor and live-syncs changes. Editing is first-write-wins — if two people edit at once the first save wins and the other is asked to Reload. Unshare stops both links.
- Auto-save
- Everything saves to your browser automatically — offline by default, no account needed.
Frequently asked questions
Is DrawIT Pro free?
Yes — completely free in your browser, with no sign-up.
Is it a free draw.io alternative?
Yes. It's a simple, fast alternative to draw.io, Microsoft Visio and Lucidchart, with clean SVG and PNG export.
How do I make a flowchart?
Open the Templates tab and pick “Flowchart,” or draw shapes and join them with the Connect (↳) tool.
How do I wireframe a website?
Open the Controls tab, drop a Page frame, then drag nav bars, forms, buttons and text onto it — every element stays editable.
Do I need to install anything?
No. DrawIT Pro runs entirely in your web browser.