How the engine works | Dumb Diagrams

You describe the resources, groups, and connections in a .dgm file. The engine checks that description, arranges the diagram, and turns it into SVG. The same source, catalog, and saved view produce the same result.

From text to a drawing

deterministic

01 / Parse

Starts with: .dgm text
Produces: Parsed document
Looks at: Syntax errors

02 / Validate

Starts with: Parsed document
Produces: Validated document
Looks at: Unknown IDs or invalid groups

03 / Layout

Starts with: Groups and resources
Produces: Placed cards and groups
Looks at: Space needed for labels

04 / Route

Starts with: Cards and connections
Produces: Right-angle paths
Looks at: Warnings if search limits are reached

05 / Inspect

Starts with: Finished drawing
Produces: Drawing quality report
Looks at: Collisions and crossings

06 / Render

Starts with: Finished drawing
Produces: Portable SVG
Looks at: Rejected unsafe assets

Select a step to follow what happens to your diagram.

REAL EXAMPLE · AWS image thumbnail pipeline

From source to diagram

01 / SOURCEaws-medium-image-thumbnail-pipeline.dgm

dgm 1
diagram aws-medium-image-thumbnail-pipeline { grammar aws flow lr title "AWS image thumbnail pipeline"
  aws.cloud aws_cloud "AWS Cloud" {
    aws.api-gateway api "Upload API" {}
    aws.aws-lambda upload_handler "Upload handler" {}
    aws.simple-storage-service-bucket assets_bucket "Image assets" {}
    aws.simple-queue-service jobs_queue "Thumbnail jobs" {}
    aws.aws-lambda processor "Thumbnail processor" {}
    aws.cloudfront cdn "Content delivery" {}
  }
  cloud-agnostic.client uploader "Uploader / viewer" {}
  uploader -> api { id uploader_api label "image upload" step 1 }
  api -> upload_handler { id api_upload_handler label "upload request" step 2 }
  upload_handler -> assets_bucket { id handler_original label "store original" step 3 }
  upload_handler -> jobs_queue { id handler_queue label "queue job" step 3 from e to w }
  jobs_queue -> processor { id queue_processor label "thumbnail job" step 4 }
  processor -> assets_bucket { id processor_thumbnail label "store thumbnail" step 5 from e to w }
  cdn -> uploader { id uploader_cdn label "deliver images" step 7 }
  assets_bucket -> cdn { id cdn_origin label "serve assets" step 6 from e to w }
}

Describe resources, groups, and connections.

02 / RESULTPortable SVGFull size ↗

Same source, automatically placed and routed.

01 / DESCRIBE

Name the services and how they connect.

02 / ARRANGE

The engine checks the source and lays out the flow.

03 / REVIEW

Inspect the drawing, then refine the source as needed.

This is the same Image thumbnail pipeline example shown on the landing page, using its canonical source and rendered preview.

What the checks tell you

The engine checks the source before drawing it, then looks for visual problems such as collisions and crossings. Layout explains how cards are placed; routing shows how connections find their way between them.

Quality scoring compares drawing problems so that Auto-fix can choose a useful repair.

Studio runs the engine as you edit. If you make a syntax error, it shows the error and keeps the last good preview while you fix it. Saving requires valid source.

For contributors, the runtime owns compilation and SVG rendering, the editor provides Studio, and the CLI creates projects and serves Studio locally. The website uses precompiled examples.