DevHexDraw is a free, browser-based diagram editor that runs entirely in your browser — no account required, no software to install, and no subscription. It gives developers, architects, and technical writers a fast, expressive way to sketch architecture diagrams, flowcharts, system designs, and process flows using a hand-drawn visual style.
If you have used Excalidraw, DevHexDraw will feel immediately familiar. It uses the same infinite canvas model, the same rough hand-drawn rendering, and the same philosophy: getting ideas out of your head and onto the screen as fast as possible without fighting a complex UI.
What is DevHexDraw?
DevHexDraw is an infinite-canvas diagram editor built on top of rough.js, a JavaScript library that renders shapes with a deliberate hand-sketched aesthetic. Instead of the sterile, corporate look of most diagramming tools, DevHexDraw makes your diagrams look like something you would draw on a whiteboard — intentional, expressive, and easy for anyone to understand at a glance.
The tool supports:
- Shapes: rectangles, ellipses, diamonds, and custom symbols including databases, clouds, servers, users, documents, queues, and API boxes
- Connectors: arrows and plain lines that bind to shapes and automatically re-route when shapes move
- Text: standalone text elements and inline labels inside shapes
- Freehand drawing: a pen tool for highlighting, annotating, or sketching anything that does not fit a preset shape
- Viewport controls: infinite canvas with pan and zoom, fit-to-screen, and a zoom indicator
- Dark mode: switch between light and dark themes at any time
- Grid: an optional snap grid for precise alignment
- Export: download as PNG, SVG, JSON, PDF, or Word
- Share: generate a shareable URL that encodes your entire diagram in the URL hash — no server, no database
Who is DevHexDraw For?
Software Engineers and Architects
When you are designing a new system, the first step is almost always a whiteboard sketch. DevHexDraw is that whiteboard, available anywhere and shareable with a single link. Draw your service boundaries, API flows, data pipelines, and database schemas in minutes.
Technical Writers and Documentation Authors
Architecture diagrams embedded in documentation explain concepts that prose cannot. DevHexDraw gives you clean, exportable diagrams that fit naturally into READMEs, wikis, and design documents.
Product Managers and Team Leads
The hand-drawn style signals that a diagram is a starting point, not a finished deliverable. This is psychologically important in meetings — people engage with rough sketches more openly than polished diagrams, because a rough sketch invites feedback rather than demanding approval.
Students and Learners
System design interviews, CS assignments, and personal projects all benefit from clear diagrams. DevHexDraw is free, requires no account, and exports in every format you might need for a submission or portfolio.
The Shape Library in Detail
DevHexDraw ships with two tiers of shapes.
Basic Geometric Shapes
Rectangle (R) is the most versatile shape. Use it for components, containers, states, or any bounded concept. Rectangles support fill, stroke, opacity, and inline labels.
Ellipse (E) is used for states in state diagrams, decision endpoints in flowcharts, or any concept that feels softer or more cyclical than a rectangle.
Diamond (D) is the standard decision shape in flowcharts. Use it for conditional branches, boolean decisions, or gateway nodes.
Arrow (A) draws a directed connector between two points. Arrows snap to the nearest connection anchor on a shape. When the bound shape moves, the arrow endpoint follows it automatically.
Line (L) is an undirected connector for relationships that are not inherently directional.
Pen (P) lets you draw freehand. Useful for circles, annotations, callouts, and any sketch that does not fit a geometric shape.
Text (T) places a standalone text element anywhere on the canvas. Useful for headings, annotations, and descriptions.
Semantic Symbols
DevHexDraw includes eight semantic shapes that communicate meaning without any label:
- Process box — a rounded rectangle that represents a service, component, or process
- Database — the classic cylinder shape, unmistakable in any architecture diagram
- Cloud — a cloud shape for external services, cloud platforms, or third-party APIs
- Server — a rack server icon, used for physical machines, VMs, or infrastructure
- User — a person silhouette, used for actors and end users
- Document — a page with a folded corner, used for files, records, and outputs
- API — a pill-shaped box that signals an API endpoint or gateway
- Queue — a stack of layers, used for message queues, buffers, and streams
Each semantic shape works exactly like a rectangle in terms of fill, stroke, labels, and connectors. The shape just carries more inherent meaning.
Drawing an Architecture Diagram: Step by Step
Here is how to sketch a typical three-tier web application diagram from scratch.
1. Open DevHexDraw
Go to [devhexlab.com/devhexdraw](https://devhexlab.com/devhexdraw). The canvas loads instantly. You will see a blank infinite canvas with the toolbar on the left and the topbar with actions at the top.
2. Place the Client Layer
Click the User symbol in the left sidebar. Move your cursor to the canvas and drag to place a user shape. Type "Browser" in the label field of the right panel after selecting the shape, or double-click the shape to edit inline.
3. Add Application Servers
Click the Server symbol, then drag out two server shapes below and to the right of the user. Label them "App Server 1" and "App Server 2". Use the fill color picker in the right panel to give them a light blue background to distinguish the layer visually.
4. Add a Database
Click the Database symbol. Drag it below the servers. Label it "PostgreSQL". Change the fill to a warm orange to mark it as the data layer.
5. Connect the Shapes
Click the Arrow tool (or press A). Hover over the User shape — you will see connection anchors appear as dots on each edge. Click one anchor and drag to the nearest anchor on App Server 1. Repeat for App Server 2. Then draw arrows from both app servers down to the database.
6. Add a Load Balancer
Place an API shape between the user and the two servers. Label it "Load Balancer". Reroute the user arrow to connect to the load balancer instead, then draw two new arrows from the load balancer to each server.
7. Annotate
Select the Text tool (T) and click above the server shapes to add a floating label "Application Layer". Repeat for "Data Layer". Press Escape to exit text mode.
8. Fit and Export
Press Ctrl+Shift+F (or click the fit icon) to zoom the view to fit all shapes. Then click Export and choose PNG for a screenshot, SVG for a scalable vector file, or JSON to save a file you can re-import later.
Keyboard Shortcuts Reference
DevHexDraw is designed to be fast. Once you learn the keyboard shortcuts, switching tools never interrupts your flow.
| Key | Tool |
|-----|------|
| V or S | Select tool |
| H | Hand / Pan tool |
| R | Rectangle |
| E | Ellipse |
| D | Diamond |
| A | Arrow |
| L | Line |
| P or X | Pen |
| T | Text |
| G | Toggle grid |
| Ctrl+Z | Undo |
| Ctrl+Y or Ctrl+Shift+Z | Redo |
| Delete or Backspace | Delete selected |
| Ctrl+A | Select all |
| Escape | Cancel / deselect |
| + or = | Zoom in |
| - | Zoom out |
| Space+drag | Pan canvas |
| Middle click+drag | Pan canvas |
| Scroll wheel | Zoom in/out |
The Properties Panel
When one or more elements are selected, the right panel shows style controls:
Stroke: the border color of the shape. Click the swatch to open a color picker. Click "None" to remove the border entirely.
Background: the fill color. Click "None" for a transparent (hollow) shape.
Fill style: three options — None (no fill pattern), Hachure (diagonal hatching lines, the signature rough.js look), or Solid (a flat block of color).
Stroke width: thin (1px), medium (2px), or bold (4px).
Stroke style: solid, dashed, or dotted lines.
Opacity: a 0–100% slider that controls transparency for the entire element.
Arrowheads: visible when a connector is selected. Independently set start and end arrowhead style.
Font size: S, M, L, XL — controls labels inside shapes and standalone text elements.
Font family: Hand (Caveat, the hand-written font), Normal (system sans-serif), or Mono (monospace).
Text align: left, center, or right alignment for multi-line labels.
Share and Collaboration
DevHexDraw's share system works without any server. When you click Share, the tool serializes your entire diagram as JSON, base64-encodes it, and appends it to the URL hash. The resulting URL looks like:
https://devhexlab.com/devhexdraw#diagram=eyJ2ZXJzaW9u...
Anyone who opens that URL gets your exact diagram loaded directly from the URL — no database, no file storage, no sign-in. The diagram data lives entirely in the link.
This approach has practical limits: very large diagrams produce very long URLs that some platforms may truncate. For large diagrams, use Export JSON and share the file directly.
Export Formats
DevHexDraw can export your diagram in five formats:
PNG — a raster screenshot of the current canvas view. Best for embedding in documents, emails, and Slack messages.
SVG — a scalable vector file. SVG diagrams can be resized to any size without losing quality. Best for documentation sites, presentations, and any context where the diagram may be displayed at different sizes.
JSON — the raw diagram data in DevHexDraw's internal format. Use this to save a working file you can re-import later for further editing. It also lets you version-control your diagrams in git alongside your code.
PDF — a print-ready PDF of the diagram. Best for reports, documentation PDFs, and printed materials.
Word (DOCX) — embeds the diagram as an image in a Word document. Useful when you need to include a diagram in a document template that others will edit in Word.
Importing Saved Diagrams
To re-open a previously exported JSON file, click Export and then scroll down to the Import JSON option at the bottom of the menu. Select the file and the diagram loads exactly as you saved it, including all shapes, labels, colors, and connector bindings.
Dark Mode
Click the moon icon in the topbar to toggle dark mode. The canvas background, panel backgrounds, and all UI elements switch to a dark theme. Your shape colors are preserved. The dark mode setting does not persist between sessions — it defaults to light mode on each load.
How DevHexDraw Compares to Other Tools
vs. Excalidraw
Excalidraw is the most well-known hand-drawn diagram tool and is an excellent choice. DevHexDraw has a similar philosophy and rendering style, but is lighter, loads faster, and integrates naturally into the DevHexLab developer toolkit alongside 60+ other developer tools.
vs. draw.io / diagrams.net
Draw.io is a powerful diagramming tool with hundreds of shape libraries and complex layout features. It is a better choice for formal UML diagrams, complex flowcharts with dozens of branches, or any diagram where pixel-perfect layout matters. DevHexDraw is better when you want to sketch quickly and communicate a rough idea.
vs. Miro, Mural, Figma
These are collaboration platforms with real-time multiplayer editing, templates, and sticky notes. They are much heavier tools with subscription pricing. DevHexDraw is a focused, lightweight alternative for the specific task of creating technical diagrams.
vs. Pen and Paper
Pen and paper wins for pure speed. DevHexDraw wins when you need to share, export, iterate, or store the diagram anywhere other than a notebook.
Tips for Better Diagrams
Keep it simple. The best architecture diagrams show the essential structure without every detail. Leave out minor components. Your reader should understand the system in 30 seconds, not 30 minutes.
Use color to group. Give each logical layer a consistent background color. Blue for services, orange for data stores, green for clients. Color is the fastest way to communicate structure.
Label every connector. An unlabeled arrow forces the reader to guess the relationship. "GET /api/users", "publishes to", "reads from" — each label removes ambiguity.
Use semantic symbols where possible. A database cylinder is immediately recognizable. A cloud shape instantly communicates external dependency. These shapes carry meaning before the label is even read.
Start rough, refine later. The hand-drawn style actively encourages this. Drop shapes anywhere, connect them, rearrange. The aesthetic makes it obvious this is a working diagram, not a final deliverable. Polish it when the structure is correct.
Conclusion
DevHexDraw is a fast, free, browser-based diagram editor that handles the most common diagramming task for developers: quickly sketching an idea, an architecture, or a flow, and sharing it with a team. It starts instantly, requires no account, and produces clean, expressive diagrams that communicate clearly without the overhead of a complex enterprise tool.
Open it at [devhexlab.com/devhexdraw](https://devhexlab.com/devhexdraw) and start drawing.