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.
Basics¶
One idea per card, in the order the tutorial teaches them.
Minimal chain
A box, an arrow, a box — the smallest complete diagram.
box "start"
arrow right
box "end"
Labeled connector
Name boxes, then connect them with a labeled arrow.
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.
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.
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.
// 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
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.
// 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
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.
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
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.
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"
from Users arrow "(1)" to ChatClient
from ChatClient arrow "(2)" to ApiGateway
from ApiGateway arrow "(3)" to Lambda
from Lambda arrow "(4)" to Rekognition heads both
from Lambda arrow "(5)" to ChatClient route above
Incident Response
A detection-to-escalation flow fanning into a human escalation team.
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"
from Sensors arrow "alerts" to DetectionHub
from DetectionHub arrow "auto triage" to Triage
from DetectionHub arrow "contain" to AutoContain
from DetectionHub arrow "escalate" to EscalationLead
from EscalationLead arrow "assign" to SeniorAnalyst
from EscalationLead arrow "collect evidence" to ForensicsAnalyst
from EscalationLead arrow "notify stakeholders" to CommsLead
Checkout Fan-out
A checkout API fanning out to four services with reply routes.
direction right
Checkout: box "Checkout API"
Payment: box "Payment service"
Inventory: box "Inventory service"
Fraud: box "Fraud screening"
Notify: box "Notification service"
from Checkout arrow "authorize" to Payment
from Payment arrow "auth result" to Checkout
from Checkout arrow "reserve" to Inventory
from Inventory arrow "stock result" to Checkout
from Checkout arrow "screen" to Fraud
from Fraud arrow "risk score" to Checkout
from Checkout arrow "enqueue" to Notify
from Notify arrow "receipt sent" to Checkout
CI Feedback Loop
A delivery pipeline whose failure routes return to earlier stages.
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"
from Commit arrow "trigger" to Build
from Build arrow "artifacts" to Test
from Test arrow "report" to Review
from Review arrow "approve" to Merge
from Test arrow "failures" to Commit route above
from Review arrow "changes requested" to Commit route above
Compiler Pipeline
A compiler front end with correctors and bidirectional repair routes.
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 arrow "source" to LA
LA arrow "tokens" to P
P arrow "AST" to Sem
LC arrow "lexical repair" to LA heads both
Syn arrow "syntax repair" to P heads both
Syn arrow "diagnostics" to DMP
DMP arrow "lookup" to ST heads both
LC arrow "messages" to DMP
Sem arrow "messages" to DMP
Sem arrow "symbols" to ST heads both
Compiler Pipeline (Optimizer)
The compiler pipeline extended with an optimizer stage.
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 arrow "source" to LA
LA arrow "tokens" to P
P arrow "IR" to Opt
Opt arrow "optimized AST" to Sem
LC arrow "lexical repair" to LA heads both
Syn arrow "syntax repair" to P heads both
Syn arrow "diagnostics" to DMP
DMP arrow "lookup" to ST heads both
LC arrow "messages" to DMP
Sem arrow "messages" to DMP
Sem arrow "symbols" to ST heads both