Diagramatics GitHub Docs Guides Editor Examples

Guides usage shapes transformation style tags boolean points alignment table interactivity modifier utilities geometry annotation plot bar technical TeX

Building Blocks

Diagramatics provides a set of basic building blocks for creating diagrams. These are polygon, curve, text, and image.

let poly = polygon([V2(0,0), V2(0,10), V2(10,10)]); draw(poly); // poly.type == 'polygon'

polygon ( points : Vector2[] ) : Diagram

let poly = polygon([V2(0,0), V2(0,10), V2(10,10)]); draw(poly); // poly.type == 'polygon'

let curv = curve([V2(0,0), V2(0,10), V2(10,10)]); draw(curv); // curve.type == 'curve'

curve ( points : Vector2[] ) : Diagram

let curv = curve([V2(0,0), V2(0,10), V2(10,10)]); draw(curv); // curve.type == 'curve'

// *for math variable italic style, use `textvar()` let sq = square(20); let tx = text('hello'); draw(sq, tx); // tx.type == 'text'

text ( str : string ) : Diagram

// *for math variable italic style, use `textvar()` let sq = square(20); let tx = text('hello'); draw(sq, tx); // tx.type == 'text'

// *for math variable italic style, use `textvar()` let src = "https://photon-ray.xyz/img/rlogo.jpg"; let img = image(src,10,10); draw(img); // img.type == 'image'

image ( src : string , width : number , height : number ) : Diagram

// *for math variable italic style, use `textvar()` let src = "https://photon-ray.xyz/img/rlogo.jpg"; let img = image(src,10,10); draw(img); // img.type == 'image'

Basic Shapes

Diagramatics also provides a set of basic shapes for creating diagrams.

let rect = rectangle(20,10); draw(rect);

rectangle ( width : number , height : number ) : Diagram

let rect = rectangle(20,10); draw(rect);

let sq = square(20); draw(sq);

square ( sidelength : number = 1 ) : Diagram

let sq = square(20); draw(sq);

// if you need to define a rectangle by its bottom left and top right corners, let p1 = V2(0,0); let p2 = V2(20,10); let rect = rectangle_corner(p1,p2); draw(rect);

rectangle_corner ( bottomleft : Vector2 , topright : Vector2 ) : Diagram

// if you need to define a rectangle by its bottom left and top right corners, let p1 = V2(0,0); let p2 = V2(20,10); let rect = rectangle_corner(p1,p2); draw(rect);

let poly = regular_polygon(5, 10); draw(poly);

regular_polygon ( sides : number , radius : number ) : Diagram

let poly = regular_polygon(5, 10); draw(poly);

// if you want to define a regular polygon by its side length instead of radius, // use `regular_polygon_side()` let poly = regular_polygon_side(5, 10); draw(poly);

regular_polygon_side ( sides : number , sidelength : number ) : Diagram

// if you want to define a regular polygon by its side length instead of radius, // use `regular_polygon_side()` let poly = regular_polygon_side(5, 10); draw(poly);

let circ = circle(10); draw(circ);

circle ( radius : number = 1 ) : Diagram

let circ = circle(10); draw(circ);

// you can create an ellipse by scaling a circle let ell = circle(10).scale(V2(2,1)); draw(ell);

let l = line(V2(0,1), V2(1,0)); draw(l);

line ( start : Vector2 , end : Vector2 ) : Diagram

let l = line(V2(0,1), V2(1,0)); draw(l);

// arc will start from the positive x-axis and go counter-clockwise let ar = arc(10, Math.PI/2); draw(ar);

arc ( radius : number = 1 , angle : number ) : Diagram

// arc will start from the positive x-axis and go counter-clockwise let ar = arc(10, Math.PI/2); draw(ar);

// if you need an arc from angle `a` to `b`, use the `.rotate` method let a = Math.PI*3/4; let b = Math.PI*3/2; let ar = arc(10, b-a).rotate(a); draw(ar);

// if you need to put this arrow at a different position, use the `.translate` method let ar = arrow(V2(10,5), 0.5); draw(ar);

arrow ( vector : Vector2 , headsize : number = 1 ) : Diagram

// if you need to put this arrow at a different position, use the `.translate` method let ar = arrow(V2(10,5), 0.5); draw(ar);

// if you need to define the arrow by its start and end points, you can use this instead of `arrow()` // this is equal to `arrow(end.sub(start)).translate(start)` let ar = arrow1(V2(0,5), V2(10,5), 0.5); draw(ar);

arrow1 ( start : Vector2 , end : Vector2 , headsize : number = 1 ) : Diagram

let ar = arrow2(V2(0,5), V2(10,5), 0.5); draw(ar);

arrow2 ( start : Vector2 , end : Vector2 , headsize : number = 1 ) : Diagram

let ar = arrow2(V2(0,5), V2(10,5), 0.5); draw(ar);

let sq = square(20); let tx = textvar('hello'); // `textvar` is just a helper function // this is equivalent to `tx = text('hello').text_tovar()` draw(sq, tx);

textvar ( str : string ) : Diagram

let sq = square(20); let tx = textvar('hello'); // `textvar` is just a helper function // this is equivalent to `tx = text('hello').text_tovar()` draw(sq, tx);

Combining Diagram

let sq1 = square(10); let sq2 = square(10).translate(V2(12,0)); let sq = diagram_combine(sq1, sq2); // when combined, the type of the object is 'diagram' // sq.type == 'diagram' let sqs = sq.fill('lightblue').translate(V2(0,12)); draw(sq, sqs);

diagram_combine ( ...diagrams : Diagram[] ) : Diagram

You can also use Diagram.combine method which does the same thing

// `d0.combine(d1,d2,d3)` is equivalent to // `diagram_combine(d0,d1,d2,d3)` let sq1 = square(10); let sq2 = square(10).translate(V2(12,0)); let sq = sq1.combine(sq2); let sqs = sq.fill('lightblue').translate(V2(0,12)); draw(sq, sqs);

Diagram.combine ( ...diagrams : Diagram[] ) : Diagram

You can access the list of diagrams in a Diagram object using Diagram.children

Diagram.children : Diagram[]