Draw diagrams in your browser and turn them into ASCII or Unicode text, images, or CAD files. Everything stays on your machine, and there's no sign-up. Good for flowcharts, logic and control diagrams, network and architecture sketches, and anything you want to paste into code, a README, or an email.
Tools
- Select V — Click an element to pick it, drag to move it. Drag an empty area to box-select several.
- Line L — Click and drag. Lines snap to horizontal, vertical, or a single 90° bend. Finish on a box or circle and the line stays attached when you move or resize that shape. Hover over a shape to see its connection points — as either end nears a center or edge midpoint, a marker appears and the end snaps to that point.
- Arrow A — Same as Line, with an arrowhead.
- Box B — Drag to draw a rectangle, then drag its handles to resize. Hold Shift for a square, Alt to draw from the center.
- Ellipse C — Drag to draw a circle or ellipse. Same fills and handles as a box. Hold Shift for a perfect circle, Alt to draw from the center outward (drag = the radius), or Shift+Alt for a circle from its center by radius.
- Polyline P — Click to drop each point; double-click, Enter, or Esc to finish. Points snap to shape connection points like lines, and the Ends toggles add an arrowhead to the start, end, or both (shown in PNG, SVG, and DXF exports).
- Dimension D — Drag a dimension line with end ticks, then type a value (e.g. 5.0m). It's a label you type, not measured from the canvas. Double-click to edit.
- Text T — Click where you want it and type. Enter adds a line; Esc or a click elsewhere finishes. Double-click any text to edit it.
Selecting & editing
- Move one element by dragging it; move several by box-selecting first.
- Add or remove with Shift/Ctrl/Cmd + click. Hold the same key while box-dragging to add to the current selection.
- Resize a box or circle by dragging its handles. Resize a whole group by selecting two or more elements and dragging a corner of the group box — everything scales together, text included.
- Double-click a line or arrow to add a label along it.
- Nudge the selection with the arrow keys (hold Shift to move a whole grid step).
- Change stacking order: ] brings the selection to the front, [ sends it to the back (or use the two buttons below undo/redo).
- Press Delete to remove the selection.
Styling
- Color — pick a swatch before drawing, or select elements and pick a swatch to recolor them. One color control covers every element type.
- Fill — select a box or circle to set None, Solid, or a pattern (diagonal, cross, lines, or dots).
- Line style — select a line, arrow, or polyline to switch between solid, dashed, dotted, and zig-zag.
- Font size — set it for the Text tool, or select text to change it.
These controls appear in the top bar only when they apply to the current tool or selection.
Keyboard Shortcuts
- V L A B C P D T — switch tools (Select, Line, Arrow, Box, Ellipse, Polyline, Dimension, Text)
- Ctrl+C / Ctrl+V / Ctrl+D — copy / paste / duplicate
- Ctrl+Z / Ctrl+Y — undo / redo
- Ctrl+S — save now
- Delete — delete the selection
- Esc — back to the Select tool (press again to clear the selection)
- Shift/Ctrl/Cmd + click — add to or remove from the selection
- Shift+drag or middle-mouse drag — pan (with the Box/Ellipse tool, Shift constrains to a square/circle, so pan with the middle mouse); mouse wheel — zoom
Canvas: grid, zoom, and panning
- Grid size sets the snap spacing (5–50 px). The two buttons beside it toggle the grid's visibility and snapping separately, so you can snap to a hidden grid or draw freely over a visible one.
- Align to shapes (the third toggle by Grid size) snaps a moved box or circle so its center lines up with another shape's center, showing a guide line. Handy for lining up boxes of different sizes.
- Zoom with the mouse wheel or the +/− buttons; pan with the middle mouse button or Shift+drag. Fit Content zooms to show the whole drawing.
- Touch: one finger draws or drags, two fingers pinch to zoom and pan, and a double-tap edits text.
Importing & exporting
- Export to ASCII (plain or Unicode box-drawing), PNG, SVG, or DXF. For PNG and SVG you can choose a dark, white, or transparent background and turn off the watermark; ASCII can be wrapped in a Markdown fence, a comment block, or a frame. White elements switch to dark ink on a light background so they stay visible.
- Import ASCII — paste existing ASCII art to turn it back into editable elements.
- Import DXF — open a .dxf file to bring in CAD drawings or symbols: lines, polylines (including rounded corners), circles, arcs, ellipses, splines, text, and blocks. Imported parts arrive selected, so you can move or resize them right away. DWG isn't supported — convert it to DXF first (for example with LibreCAD or the free ODA File Converter).
Theme
The sun/moon button in the top bar switches between dark and light. On a light canvas, white elements are drawn in dark ink so they stay visible. Your choice is remembered on this browser.
Saving
Your work saves to this browser automatically and reloads next time you visit. Clearing the site's data will erase it, so export anything you want to keep.
asciilogic is free and open source. Found a bug or have an idea? Open an issue on GitHub.
Accessibility Statement