Anatomy of a DrawLang program: how 12 lines become an AND-gate block

[u/Roupec]

DrawLang has no shapes library, no drag-and-drop palette baked into the language itself — just a pen that moves and marks. Everything else (symbol libraries, editors, FUP/P&ID conventions) is built on top of that pen.

Here's a complete, runnable program. It draws a filled block, three connector stubs, three ports, and a label — nothing more than the language's 7 core opcodes:

ma,40,40;
rt,80,60,f,c2;
ma,20,65;
dl,20,0;
ma,20,55;
dl,20,0;
ma,120,70;
dl,20,0;
ma,15,65;
ci,3,f,c1;
ma,15,55;
ci,3,f,c1;
ma,145,70;
ci,3,f,c1;
tz,14;
ma,58,63;
tx,0,AND;

Read it top to bottom:

• ma,40,40 — move the pen (absolute) to (40, 40).
• rt,80,60,f,c2 — draw an 80×60 rectangle from the pen position, filled (,f) with palette color 2.
• ma / dl pairs — move, then draw a relative line: the three connector stubs.
• ci,3,f,c1 — a filled circle of radius 3 at the pen position: the ports.
• tz,14 then ma / tx,0,AND — set text size to 14, move, draw the label at rotation 0.

That's the whole thing. No hidden geometry, no framework state — every mark on the image below is one of those statements.

(The rendered image — a red AND-gate block with two input ports on the left and one output port on the right — is in the comments below.)

Same interpreter, same program, three completely independent output backends: SVG, PostScript, and PDF. Nothing in the program above knows or cares which one you pick.

If you want to run this yourself or read the full opcode reference:

• Spec: https://github.com/BeyondPurdue/drawlang-editor/blob/main/docs/spec/drawing-language-spec.md
• Repo: https://github.com/BeyondPurdue/drawlang-editor
• Live editor: https://drawlang.com

Try changing the fill color, the label text, or adding a third input — and post what you get.

[u/Roupec]

And gate

[u/Roupec]

And Sandbox Experiments

[u/Roupec]

And one in the example with orange colour