Direction
Set the layout direction once near the top of the file.
>LR| Value | Meaning |
|---|---|
| LR | Left to right |
| TB | Top to bottom |
| RL | Right to left |
| BT | Bottom to top |
Language spec
Glypho, explained as a usable reference.
This page is a guided summary of the Glypho language. The canonical source of truth still lives in the core repo, but this version is optimized for scanning, learning, and jumping into the editor quickly.
Core ideas
- Glypho is newline-delimited. One statement per line keeps the grammar regular and easy for LLMs to produce.
- Common cases stay short: IDs can stand alone, labels only need quotes when they contain spaces or special characters.
- Operators carry meaning directly:
:for shape,>for edges,@for groups and positions,$for styles. - The language is layered. Start with graph structure, then add layout, then styling only if you need it.
Minimal example
>LR
start:c Start
check:d Ready?
done:p Done
start>check
check>done yes
check>start no
@flow "Main flow" {start check done}
You can stop much earlier than this. a>b is already a complete graph.
Nodes
Syntax: id[:shape] [label] [#color]
login
login:r
login:r Login
auth:r "User Login" #0af
desc:r """Line 1
Line 2"""Shapes
| Char | Shape | Typical use |
|---|---|---|
| r | Rectangle | Actions, processes |
| d | Diamond | Decisions, conditions |
| c | Circle | Start and end states |
| o | Oval | States, containers |
| p | Pill | Buttons, tags |
| h | Hexagon | Preparation, complex steps |
Edges
Syntax: id operator id [label] [#color]
a>b
a>b success
a~b optional
a=b primary
a--b related
a<>b syncChains
Chains compress repeated edges into one line. They cannot carry labels, so use separate edge statements if you need text on each hop.
a>b>c>d
// labeled version
a>b first
b>c second
c>d thirdEdge operators
| Operator | Style | Meaning |
|---|---|---|
| > | Solid arrow | Flow, dependency |
| ~ | Dashed arrow | Optional or async flow |
| = | Thick arrow | Primary or emphasized path |
| -- | Line | Association, undirected relationship |
| <> | Bidirectional | Two-way relationship |
Groups and classes
Groups create containers. Classes let you style multiple nodes at once.
@auth "Authentication" {login mfa verify}
.critical{check err}
$.critical{stroke:#f44}Comments and labels
Comments use //. The current parser accepts both full-line and end-of-line comments. Use quotes for multi-word labels and triple quotes for multiline labels.
// full line comment
login:r "User Login" // end-of-line comment
desc:r """Line 1
Line 2"""Layers
| Layer | What it adds |
|---|---|
| Semantic | Nodes, edges, groups, class assignment |
| Layout | Direction and explicit positions |
| Style | Shape selectors, class selectors, id selectors |
Positions and style blocks
Auto-layout is the default, but you can pin nodes with explicit coordinates. Style blocks are CSS-like and target shapes, classes, or IDs.
hero@120,80^220x72
db@420,160
$:r{fill:#111;stroke:#fff}
$.critical{stroke:#f44}
$#hero{fill:#0af}
Position syntax is id@x,y with optional size suffix ^widthxheight.
Grammar excerpt
The canonical EBNF lives in the core repo. This excerpt covers the top-level structure and the main statement forms you use most often.
Show EBNF excerpt
graph = { line } ;
line = direction | node | edge | edge_chain | group | class_assignment | position
| style_block | comment | blank ;
direction = ">" , ( "LR" | "TB" | "RL" | "BT" ) ;
node = id , [ ":" , shape ] , [ label ] , [ color ] ;
edge = id , edge_op , id , [ label ] , [ color ] ;
edge_chain = id , edge_op , id , { edge_op , id } ;
group = "@" , id , [ label ] , "{" , { group_member } , "}" ;
class_assignment = "." , class_name , "{" , { id } , "}" ;
position = id , "@" , integer , "," , integer , [ size_suffix ] ;
style_block = "$" , selector , "{" , { property } , "}" ;
comment = "//" , { any_char } ;