Examples

A gallery of SheepText diagrams, each rendered at build time from a checked-in source file. Every card is the editor itself: edit the source under the picture and it re-renders in place, Reset restores the checked-in source and its build-time render, and Open in editor carries the checked-in source into the full editor.

The 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.

Basics

One idea per card, in the order the tutorial teaches them.

Minimal chain

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

Open in editor

"start" -> "end"

Labeled connector

Name boxes, then connect them with a labeled arrow.

Open in editor

A: box "start"
B: box "end"
A -> B "Leads to"

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
A1 -> B1 "Edge" 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

CDN -> API "origin fetch"

Nested layout

A column stacks the nodes inside one group. The row over the three group handles is a preference the solver cannot currently keep, so it is dropped and the groups sit side by side, top-aligned.

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.

column App:  Web Api
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

CDN.e -> Web.w ""
Web.s -> Api.n ""
Api.e -> 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)
A1.e -- B1.w path right 80 then down 90 then right 60

Showcases

Larger diagrams of the kind SheepText is for: a request path across cloud services, an incident-response flow, a fan-out with reply routes, pipelines whose failure edges run backwards. Each is rendered here at build time from its checked-in source by the same engine the editor runs, with no coordinates and no per-diagram tuning in the source. The list below is the published catalog itself, not a copy of it — the showcases the catalog also offers in the editor’s picker. A showcase the engine cannot currently lay out is named in the repository’s accepted-failure inventory with an owner task and is left off this page until that task closes.

AWS Chat Application

A request path across AWS services inside a region group.

Open in editor

direction right
group MainRegion "AWS Region": ApiGateway Lambda Rekognition
row RequestFlow: Users ChatClient MainRegion
row RegionServices: ApiGateway Lambda Rekognition

use icons aws

Users: icon aws:users labelside top "Users"
ChatClient: icon aws:client labelside top "Chat client"
ApiGateway: icon aws:amazon-api-gateway labelside top "Amazon\nAPI Gateway"
Lambda: icon aws:aws-lambda labelside top "AWS\nLambda"
Rekognition: icon aws:amazon-rekognition labelside top "Amazon\nRekognition"

Users -> ChatClient "(1)"
ChatClient -> ApiGateway "(2)"
ApiGateway -> Lambda "(3)"
Lambda <-> Rekognition "(4)"
Lambda -> ChatClient "(5)" route above

Incident Response

A detection-to-escalation flow fanning into a human escalation team.

Open in editor

direction right
group EscalationTeam "Human escalation": EscalationLead SeniorAnalyst ForensicsAnalyst CommsLead
row MainFlow: Sensors DetectionHub Triage

Sensors: box "Telemetry\nsensors"
DetectionHub: box "Detection hub"
Triage: box "Automated triage"
AutoContain: box "Automated\ncontainment"
EscalationLead: box "Escalation lead"
SeniorAnalyst: box "Senior incident analyst"
ForensicsAnalyst: box "Forensics and evidence analyst"
CommsLead: box "Communications and stakeholder lead"

Sensors -> DetectionHub "alerts"
DetectionHub -> Triage "auto triage"
DetectionHub -> AutoContain "contain"
DetectionHub -> EscalationLead "escalate"
EscalationLead -> SeniorAnalyst "assign"
EscalationLead -> ForensicsAnalyst "collect evidence"
EscalationLead -> CommsLead "notify stakeholders"

Checkout Fan-out

A checkout API fanning out to four services with reply routes.

Open in editor

direction right

Checkout: box "Checkout API"
Payment: box "Payment service"
Inventory: box "Inventory service"
Fraud: box "Fraud screening"
Notify: box "Notification service"

Checkout -> Payment "authorize"
Payment -> Checkout "auth result"
Checkout -> Inventory "reserve"
Inventory -> Checkout "stock result"
Checkout -> Fraud "screen"
Fraud -> Checkout "risk score"
Checkout -> Notify "enqueue"
Notify -> Checkout "receipt sent"

CI Feedback Loop

A delivery pipeline whose failure routes return to earlier stages.

Open in editor

direction right
row Pipeline: Commit Build Test Review Merge

Commit: box "Commit"
Build: box "Build"
Test: box "Test suite"
Review: box "Code review"
Merge: box "Merge"

Commit -> Build "trigger"
Build -> Test "artifacts"
Test -> Review "report"
Review -> Merge "approve"
Test -> Commit "failures" route above
Review -> Commit "changes requested" route above

Compiler Pipeline

A compiler front end with correctors and bidirectional repair routes.

Open in editor

direction down
column CompilerPath: Source LA P Sem
column Correctors: LC Syn DMP
row LexicalRepair: LA LC
row SyntaxRepair: P Syn
row Diagnostics: Sem DMP ST

Source: text "source\ncode"
LA: box "lexical\nanalyzer"
P: box "parser"
Sem: box "semantic\nchecker"
LC: box "lexical\ncorrector"
Syn: box "syntactic\ncorrector"
DMP: box "diagnostic\nmessage\nprinter"
ST: box "symbol\ntable"

Source -> LA "source"
LA -> P "tokens"
P -> Sem "AST"
LC <-> LA "lexical repair"
Syn <-> P "syntax repair"
Syn -> DMP "diagnostics"
DMP <-> ST "lookup"
LC -> DMP "messages"
Sem -> DMP "messages"
Sem <-> ST "symbols"

Compiler Pipeline (Optimizer)

The compiler pipeline extended with an optimizer stage.

Open in editor

direction down
column CompilerPath: Source LA P Opt Sem
column Correctors: LC Syn DMP
row LexicalRepair: LA LC
row SyntaxRepair: P Syn
row Optimizer: Opt
row Diagnostics: Sem DMP ST

Source: text "source\ncode"
LA: box "lexical\nanalyzer"
P: box "parser"
Sem: box "semantic\nchecker"
LC: box "lexical\ncorrector"
Syn: box "syntactic\ncorrector"
DMP: box "diagnostic\nmessage\nprinter"
ST: box "symbol\ntable"
Opt: box "optimizer"

Source -> LA "source"
LA -> P "tokens"
P -> Opt "IR"
Opt -> Sem "optimized AST"
LC <-> LA "lexical repair"
Syn <-> P "syntax repair"
Syn -> DMP "diagnostics"
DMP <-> ST "lookup"
LC -> DMP "messages"
Sem -> DMP "messages"
Sem <-> ST "symbols"