PROMO Get 1 year of DPad Pro free today! Apply coupon at checkout: 1 year free code:

Build Diagrams at the Speed of Thought

A professional designer tool that merges a simple layout code (DSL) with a paper-like visual canvas. Create architecture diagrams, flows, and mind maps in seconds.

DPad (The Drawing Pad) — Software_Architecture.qd
1page page_1 {
2 name: "App Cluster"
3}
4
5rect load_balancer {
6 name: "Load Balancer"
7}
8
9rect app_servers {
10 name: "App Servers"
11}
12
13rect redis_cache {
14 name: "Redis Cache"
15}
16
17database db_primary {
18 name: "Primary DB"
19}
20
21connector traffic_flow {
22 from: load_balancer
23 to: app_servers
24 type: "orthogonal"
25}
26|
Load Balancer App Servers (Cluster) Redis Cache Primary Database

Design Anything In Seconds

Toggle through the visual showcases of various diagram styles supported natively in DPad.

DSL Code
rect app_servers {
    name: "App Servers"
}

rect db_primary {
    name: "Primary Database"
}

connector app_to_db {
    from: app_servers
    to: db_primary
    type: "orthogonal"
    label: "Read/Write"
}
Interactive Canvas Preview
Load Balancer App Servers (Cluster) Redis Cache Primary Database SQL Query
DSL Code
cloud aws_vpc {
    name: "Amazon VPC"
}

rect api_gateway {
    name: "API Gateway"
}

database postgres {
    name: "User DB"
}
Interactive Canvas Preview
Cloud VPC Boundary API Gateway Auth Service Order Service RDS PostgreSQL
DSL Code
rect start_node {
    name: "User Input Command"
}

diamond check_valid {
    name: "Is DSL Valid?"
}

rect compile_ok {
    name: "Draw Canvas"
}
Interactive Canvas Preview
Start Code Edit Is DSL Valid? Yes Render Canvas Visuals No Show Syntax Error
DSL Code
circle center_node {
    name: "App Idea"
}

circle node_a {
    name: "Tech Stack"
}

circle node_b {
    name: "Marketing"
}
Interactive Canvas Preview
DPad Launch Tech Stack UI Design Marketing Pricing
DSL Code
rect CEO {
    name: "Sarah (CEO)"
}

rect VP_Eng {
    name: "David (VP Eng)"
}

rect VP_Prod {
    name: "Tina (VP Product)"
}
Interactive Canvas Preview
Sarah (CEO / Founder) David (VP Engineering) Tina (VP Product) Dev Team Alpha Dev Team Beta
DSL Code
rect users {
    name: "users"
    fields: "id PK, name, email"
}

rect drawings {
    name: "drawings"
    fields: "id PK, user_id FK, title"
}
Interactive Canvas Preview
users id [PK] email [varchar] name [varchar] created_at [ts] drawings id [PK] user_id [FK] title [varchar] dsl_content [text]
DSL Code
aws_vpc main_vpc {
    name: "AWS VPC (10.0.0.0/16)"
}
aws_route53 dns {
    name: "Route 53 DNS"
}
aws_alb lb {
    name: "Application LB"
}
aws_ec2 web_app {
    name: "EC2 Web Instance"
}
aws_rds postgres {
    name: "RDS Database"
}
aws_s3 storage {
    name: "S3 Asset Bucket"
}

connector { from: dns to: lb }
connector { from: lb to: web_app }
connector { from: web_app to: postgres }
connector { from: web_app to: storage }
Interactive Canvas Preview
Route 53 Elastic LB EC2 Cluster RDS Postgres S3 Storage
DSL Code
pipeline production_pipeline {
    stages: "Source, Build, Test, Deploy"
}

stage source {
    name: "Git Source"
    status: "success"
}
stage build {
    name: "Webpack Builder"
    status: "success"
}
stage test {
    name: "Jest Test Runner"
    status: "success"
}
stage release {
    name: "Cloudflare Deployment"
    status: "in-progress"
}

connector { from: source to: build }
connector { from: build to: test }
connector { from: test to: release }
Interactive Canvas Preview
1. Source 2. Build 3. Test 4. Deploy

Designed for Visual Thinkers

A set of clean features built specifically to improve drawing speed, consistency, and shareability.

Unlimited Drawings & Pages

Create endless separate files or multi-page documents. Delimit sheets with a simple triple dash delimiter (---) to toggle easily inside the editor.

Responsive & Touch Ready

Access your diagrams anywhere. Full support for mouse-based computers, tablets, and smartphone touchscreen navigation with dedicated touch-selection close toggles.

Unlimited Asset & Icon Library

Quickly search and insert preloaded AWS architectures, cloud icons, or interface shapes. Drag-and-drop custom image assets directly onto your infinite work grid.

Download Clean Diagram Images

Export diagrams instantly to high-resolution PNG images. Built-in CORS protections safeguard external assets, keeping export results sharp, clean, and free of security locks.

Keyboard-Driven Duplication

Increase design efficiency. Use Cmd/Ctrl + Arrow keys to duplicate any node instantly in one of the 4 directions, maintaining perfect line connectivity and spacing automatically.

Pencil & Vector Routing

Sketch ideas naturally with the pencil tool. Connect elements with smart orthogonal lines that bend, wrap, and route around other blocks, keeping layouts readable.

UPCOMING FEATURE

AI-Enabled Diagramming

Describe what you want to build in plain English, and watch our compilation engine render a structured, editable diagram instantly. Modify the result visually, or edit the generated code in a snap.

> |
Prompt Input AI Generator Node A Node B

Flexible Pricing Plans

Use DPad for free or unlock the full suite of diagramming capabilities.

Free Plan

$0/month

Perfect for visual outlines and basic diagramming.

  • Up to 3 active drawing slots
  • Infinite canvas scroll & zoom
  • Auto-connection mechanics
  • Standard PNG image exports
Start Drawing

Pro Monthly

$6/month

Unlock unlimited diagrams, uploads, and AI compilation.

  • Unlimited drawings and pages
  • Online web icon integrations (Iconify API)
  • Drag-and-drop custom image uploads
  • AI Prompt-to-Diagram Generation (Beta)
Start Drawing (Pro Beta)

Pro Annual

$49/year

Save over 30% with yearly billing. Fully featured.

  • All Pro Features included
  • Priority support & updates
  • Cancel subscription anytime
Apply coupon DPADXYTZZ4563 for 1 year free.
Start Drawing (Pro Beta)

Frequently Asked Questions

Got questions about DPad? Find some quick answers here.

What is DPad?

DPad (The Drawing Pad) is an elegant diagram editor that allows you to design structures either by typing a clean, simple layout description language (DSL) on the left panel, or by dragging and dropping elements directly on the infinite canvas. Visual actions automatically update the code, and typing updates the visuals, giving you the best of both worlds.

Does DPad support offline work?

Yes. DPad saves your current drawing state into local browser slots automatically. It operates seamlessly inside modern web viewports, allowing you to edit and retrieve local layouts without server connection requirements.

What formats can I export my designs to?

You can export diagrams as high-resolution PNG image files. The exporter is built with specific CORS filters for preloaded and web-based icons (Iconify API), preventing canvas security locks and keeping output drawings clean.

How does the auto-duplication navigation work?

When selecting a node on the editor canvas, you can press Cmd/Ctrl and any arrow key (Up, Down, Left, Right). DPad will automatically duplicate the shape in that direction, preserve spacing, and build a connected connector line instantly. This allows you to construct complex infrastructure nodes in a matter of seconds.