SheepText Tutorial

Tutorial

Introduction

Welcome to a tutorial of the SheepText program. In this tutorial, you will learn how to use text to draw boxes-and-arrows diagrams.

As you type text in the box in the top-right, you can draw diagrams in the bottom-right.

For example, if you use the following text:

box
arrow
box

You can draw a box, have an arrow come out to the right, and then connect to another box.

Try this example now by either:

Clicking on the "Fill out example" button above, or
Copy/pasting or typing this text into the editor on the right.

Text

Using double quotes, you can add text to elements like boxes and arrows:

box "Frontend"
arrow "(1)"
box "Backend"

Arrows

A diagram that keeps going to the right would be boring. You can change the direction of arrows and where boxes go:

box
arrow
box
arrow down
box
arrow left
box

You can also name elements like a box and then make sure arrows back to specific points using arithmetic:

Frontend: box "Frontend"
arrow
Backend: box "Backend"
arrow from Backend.s down to Backend.s + (0, 100) to Frontend.s + (0, 100) to Frontend.s

Notice how you can refer to places on the box using compass points nw, n, ne, e, se, s, sw, w.

Another way of drawing the same diagram is:

Frontend: box "Frontend"
arrow
Backend: box "Backend"
arrow from Backend.s down 100 then left (Backend.s.x - Frontend.s.x) to Frontend.s

Updating

By being able to move arrows relative to other elements, diagrams are easier to update. For example, you can add a box in between "Frontend" and "Backend" and not have to change the arrow:

Frontend: box "Frontend"
arrow
Proxy: box "Proxy"
arrow
Backend: box "Backend"
arrow from Backend.s down 100 then left (Backend.s.x - Frontend.s.x) to Frontend.s

Arithmetic

Sometimes you will want to draw arrows or place elements based on calcuations. For examples, you can draw a pair of arrows to and from two boxes:

Frontend: box "Frontend"
Backend: box "Backend" with .c at Frontend.c + (Frontend.width * 2, 0)
arrow from 1/3 <Frontend.ne, Frontend.se> to 1/3 <Backend.nw, Backend.sw> "(1)"
arrow from 2/3 <Backend.nw, Backend.sw> to 2/3 <Frontend.ne, Frontend.se> "(2)"

More Boxes

You can draw boxes relative to other elements. This helps group parts of your diagram:

B1: box "B1"
arrow
B2: box "B2"
arrow
B3: box "Backend"

B4: box from B1.nw - 50 to B2.se + 50 send to back

Notice how:

When you do <place> - <number>, you move both the x and y coordinates by the number.
send to back makes sure the box isn't in front of the other boxes.

We can make the box dashed and change its fill:

B1: box "B1"
arrow
B2: box "B2"
arrow
B3: box "Backend"

B4: box from B1.nw - 50 to B2.se + 50 send to back dashed fill #eee

More Text

Instead of attaching text to a line, arrow, or box, you can draw text anywhere you want to:

B1: box "B1"
arrow
B2: box "B2"
arrow
B3: box "Backend"

B4: box from B1.nw - 50 to B2.se + 50 send to back dashed fill #eee
text "Grouping" with .nw at B4.nw + 10

You can also change the font style:

B1: box "B1"
arrow
B2: box "B2"
arrow
B3: box "Backend"

B4: box from B1.nw - 50 to B2.se + 50 send to back dashed fill #eee
text "Grouping" bold 20 color green with .nw at B4.nw + 10

Icons

SheepText comes with icons for software systems like Amazon Web Services (AWS), Azure, Google Cloud Platform (GCP), and Oracle Cloud Infrastructure (OCI):

icon name "aws_Res_User_Light" "User"
arrow
LB: icon name "aws_Res_Elastic-Load-Balancing_Application-Load-Balancer_Light" "Load" "Balancer"
arrow
FE: icon name "aws_Res_Amazon-EC2_Instances_Light" "Frontend" "instances"

In order to find out what icons are available, start typing out letters for what you need. For example, if we need an icon for a DynamoDB table, we could type out:

icon name "dynamodb"

Notice how there is an error and no diagram is drawn, but there are suggested icon names to use. This is how we figure out e.g. aws_Res_Amazon-DynamoDB_Table_Light is what we want:

icon name "aws_Res_Amazon-DynamoDB_Table_Light"

End of tutorial

Thank you for reading.

Loading, please wait...