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 and dashes on nodes, plus alignment and text weight on standalone and edge labels.

Open in editor

T1: text "Top\nBottom" align center valign top textsize 18 bold italic
A1: box "Styled" fill #fef08a stroke #222 dashed
B1: box "Target" fill #dbeafe stroke #2563eb
from A1 arrow "Edge" to B1 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

Stack nodes inside one group, then arrange the group handles themselves.

Open in editor

// Layouts compose across levels: `App` arranges its own nodes in a column,
// while `Tiers` arranges the three group handles in a row.
// No coordinates are needed; the constraint solver places every group and box.

layout column App:  Web Api
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
] "Data" fill #16a34a bold

from CDN.e arrow "" to Web.w
from Web.s arrow "" to Api.n
from Api.e arrow "" to PG.s

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.e to B1.w path right 80 then down 90 then right 60