Text in · SVG out

Diagrams from plain text.

SheepText turns a small, readable language into deterministic SVG diagrams — in your browser, your docs, and CI. No dragging boxes, no drifting layouts.

Open the editor → Read the tutorial 
use icons aws
layout row Flow: Users Gateway Fn Data

Users:   icon aws:users "Users"
Gateway: icon aws:amazon-api-gateway "API Gateway"
Fn:      icon aws:lambda "Handler"
Data:    icon aws:database "Orders"

from Users   arrow "request" to Gateway
from Gateway arrow "invoke"  to Fn
from Fn      arrow "write"    to Data
A rendered SheepText diagram: Users flow through an API Gateway to a Lambda handler and an Orders database, drawn with AWS icons

One language, every shape of diagram

Icons from ten packs, styled fills and nested groups, flowcharts and routed connectors — a constraint solver lays it all out for you. 

// The load balancer only talks to the app server; the app server owns both stores.
// Ideal rendering: tiers side by side, LB above App, and App's two outbound
// edges reaching the data tier as separate, non-crossing runs.

layout column Web: LB App
layout column Data: PG Cache

Web: [
  LB:  box "Load Balancer" fill #dbeafe stroke #2563eb
  App: box "App Server" fill #dbeafe stroke #2563eb
] "Web Tier" fill #2563eb bold

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

arrow from LB to App
from App arrow "SQL" to PG
from App arrow "cache" to Cache
A two-tier architecture diagram: a Web Tier group where a load balancer feeds an app server, and a Data Tier group with Postgres and Redis; the app server reaches Postgres over a labelled SQL edge and Redis over a labelled cache edge
Style fills and strokes, nest related nodes into labelled groups. 
// Two gates that fail differently: 401 means "we don't know who you are",
// 403 means "we know, and no". Collapsing them into one check is the usual
// bug in a hand-drawn auth flow.
//
// Ideal: a downward spine Request -> Authenticated? -> Authorized? -> 200 OK,
// each "no" peeling off to its own reject box. No layout directives here on
// purpose -- the arrows already say the shape.

Start: box "Request"
Authn: box "Authenticated?" fill #fef08a
Authz: box "Authorized?" fill #fef08a

Out: [
  Unauth: box "401 Unauthorized" fill #fee2e2
  Forbid: box "403 Forbidden" fill #fee2e2
  Ok:     box "200 OK" fill #dcfce7
] "Outcomes"

arrow from Start to Authn
from Authn arrow "no"  to Unauth
from Authn arrow "yes" to Authz
from Authz arrow "no"  to Forbid
from Authz arrow "yes" to Ok
A flowchart: a Request reaches an Authenticated? decision; no returns 401 Unauthorized, yes continues to an Authorized? decision; no returns 403 Forbidden, yes returns 200 OK
Flowcharts and decisions, with connectors routed automatically.