Examples

A gallery of SheepText diagrams, each rendered at build time from a checked-in source file. Every card links straight into the editor with that exact source loaded, so you can tweak any example and see it re-render live.

Each Open in editor link carries the diagram’s full source in the URL fragment (after the #); nothing is sent to a server, and opening the link never overwrites whatever draft you already have saved in the editor.

Minimal chain

A box, an arrow, a box — the smallest complete diagram.

Open in editor

box "start"
arrow right
box "end"

Labeled connector

Name boxes, then connect them with a labeled arrow.

Open in editor

A: box "start"
B: box "end"
from A arrow "Leads to" to B

Variables and expressions

Define a value once and compute sizes from it.

Open in editor

scale = 2
box "narrow" width scale * 10
box "wide" width scale * 30

Styling

Colors, dashes, alignment, and text weight on nodes and edges.

Open in editor

T1: text "Top\nBottom" align center valign top fill #336699 textsize 18 bold italic at (160, 100)
B1: box "Styled" fill yellow stroke #222 dashed at (360, 100)
from T1 arrow "Edge" to B1 fill orange align rjust valign bottom textsize 14 bold italic

Nested groups

Group related nodes, label the regions, and link across them.

Open in editor

// Groups nest: an Edge tier and a Core tier inside one Production boundary.
// No coordinates anywhere -- the constraint solver places every box.

Prod: [
    Edge: [
        CDN: box "CDN" fill #dbeafe stroke #2563eb
    ] "Edge" fill #2563eb bold
    Core: [
        API: box "API" fill #dcfce7 stroke #16a34a
    ] "Core Services" fill #16a34a bold
] "Production" fill #0f172a textsize 16 bold

from CDN arrow "origin fetch" to API

Nested layout

Give each group its own direction, then arrange the groups themselves.

Open in editor

// Layout nests. Each tier is a group with its own internal direction, and the
// tiers themselves are arranged by a `layout row` -- a group is a handle a
// layout can take, so the two compose. The tiers need not agree on a shape:
// Edge stays a single box while App and Data stack vertically.
//
// Ideal rendering: three labelled tiers left to right, each tier's boxes
// stacked top to bottom, and the request path reading Edge -> App -> Data
// without an edge doubling back on itself.
//
// Not one coordinate in the file -- the constraint solver places all of it.

layout column App:  Web Api
layout column Data: PG Cache
layout row    Tiers: Edge App Data

Edge: [
  CDN: box "CloudFront" fill #dbeafe stroke #2563eb
] "Edge" fill #2563eb bold

App: [
  Web: box "Web" fill #ede9fe stroke #7c3aed
  Api: box "API" fill #ede9fe stroke #7c3aed
] "Application" fill #7c3aed bold

Data: [
  PG:    box "Postgres" fill #dcfce7 stroke #16a34a
  Cache: box "Redis"    fill #fef9c3 stroke #ca8a04
] "Data" fill #16a34a bold

from CDN arrow "origin" to Web
from Web arrow "calls"  to Api
from Api arrow "SQL"    to PG
from Api arrow "cache"  to Cache

Routed path

Route a connector along explicit orthogonal segments.

Open in editor

A1: box "source" with .nw at (10, 10)
B1: box "sink" with .nw at (250, 100)
line from A1 to B1 path right 80 then down 40 then right 20