How to Create Architecture Diagrams with DevHexDraw
Learn how to draw architecture diagrams, flowcharts, and system sketches using DevHexDraw — a free browser-based diagram editor with a hand-drawn style.
Tool Used
DevHexDraw
Open DevHexDraw
Go to devhexlab.com/devhexdraw. The infinite canvas loads instantly with no sign-up required. You will see the tool sidebar on the left, the topbar at the top with undo, redo, grid, dark mode, share, and export actions, and the canvas filling the rest of the screen. If you have previously saved a diagram it will reload automatically from local storage.
Place your first shapes
Click a tool in the left sidebar to activate it — try the Rectangle tool (or press R) to start. Your cursor becomes a crosshair. Click and drag on the canvas to draw a rectangle. Release when you are happy with the size. The shape is committed and automatically selected. To place a semantic shape (database, server, cloud, user, etc.) click the corresponding icon in the lower part of the sidebar, then drag on the canvas the same way. Use the scroll wheel or pinch gesture to zoom, and hold Space and drag (or middle-click and drag) to pan the canvas.
Style shapes with the properties panel
Select any shape to open the properties panel on the right. Change the stroke color by clicking the color swatch next to Stroke. Change the background fill by clicking the swatch next to Background — or click None to make the shape hollow. The Fill Style buttons let you choose between no fill pattern, a hachure (diagonal hatching) pattern for a hand-drawn look, or a solid flat color. Adjust stroke width (thin, medium, bold), stroke style (solid, dashed, dotted), and opacity using the slider. Add or edit a label by double-clicking the shape and typing. Press Escape or click away when done.
Connect shapes with arrows
Press A or click the Arrow tool in the sidebar. Hover over a shape — small circular anchors appear at the top, right, bottom, and left edges. Click an anchor and drag to another shape to draw a bound arrow. When you release over another shape's anchor, the arrow binds to it: if you later move either shape, the arrow endpoint follows automatically. For an unbound arrow that does not snap to a shape, just drag from an empty area of the canvas and release anywhere. To label a connector, select it and type in the label field on the right panel.
Add text labels and annotations
Press T to activate the Text tool. Click anywhere on the canvas to place a text element and start typing. Use Shift+Enter for a new line. Press Escape when done. Select the text element to change font size (S, M, L, XL), font family (Hand for the Caveat hand-written font, Normal for system sans-serif, Mono for monospace), and alignment (left, center, right) in the right panel. For labels that belong inside a shape, double-click the shape directly instead — this edits the shape's inline label, which is always centered inside the shape bounds.
Use undo, grid snap, and fit-to-screen
Press Ctrl+Z to undo any action and Ctrl+Y (or Ctrl+Shift+Z) to redo. Press G to toggle the grid — shapes will snap to 20px increments when the grid is active, making alignment much faster. Press Ctrl+A to select all elements. To zoom the view so all shapes fit the screen, click the fit icon in the topbar or press Ctrl+Shift+F. Use the zoom controls at the bottom of the left sidebar to zoom in and out at fixed steps.
Export or share your diagram
Click Export in the topbar to open the export menu. Choose PNG for a raster image, SVG for a scalable vector file (best for documentation), JSON to save a working copy you can re-import later, PDF for print, or Word (DOCX) to embed the diagram in a document. To share without exporting, click Share — this generates a URL that encodes your entire diagram in the URL hash. Anyone with the link can open your exact diagram directly in their browser with no account needed. To re-open a saved JSON file, click Export and use the Import JSON option at the bottom of the menu.
All done!
You are ready to use DevHexDraw like a pro.