Language spec

Everything in the .g format — syntax, operators, shapes, and grammar. For the canonical source, see the spec on GitHub.

One statement per line. : for shape, > for edges, @ for groups, $ for styles. Start with structure, add layout and styling only when you need it.

Minimal example

>LR
alarm:c Alarm
snooze:d "Snooze?"
bed:p "Back to Bed"

alarm>snooze
snooze>bed yes
snooze>alarm no

@morning "Morning" {alarm snooze bed}

You can stop much earlier than this. a>b is already a complete graph.

MorningAlarmSnooze?Back to Bedyesno

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

Nodes

Syntax: id[:shape] [label] [#color]

coffee
coffee:r
coffee:r Coffee
latte:r "Oat Latte" #0af
note:r """Monday mood:
need caffeine"""

Shapes

Char Shape Typical use
r Rectangle Steps, actions, things you do
d Diamond Yes/no questions, decisions
c Circle Starting and ending points
o Oval States, situations
p Pill Labels, tags, endpoints
h Hexagon Preparation, setup steps
RectangleDiamondCircleOvalPillHexagon

Edges

Syntax: id operator id [label] [#color]

a>b
wake>coffee "need it"
plans~backup "if bored"
hunger=fridge "urgent"
salt--pepper
me<>dog "besties"

Chains

Chains compress repeated edges into one line. They cannot carry labels, so use separate edge statements if you need text on each hop. 

wake>coffee>work>lunch

// labeled version
wake>coffee "desperately"
coffee>work "reluctantly"
work>lunch "finally"

Edge operators

Operator Style Meaning
> Solid arrow This leads to that
~ Dashed arrow Maybe, optional, or later
= Thick arrow The main or important path
-- Line Connected, no direction
<> Bidirectional Goes both ways
SolidDashedThickLineBidir

Groups and classes

Groups create containers. Classes let you style multiple nodes at once.

@morning "Morning" {alarm coffee commute}
.rushed{coffee commute}
$.rushed{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. 

// weekend plans
brunch:r "Sunday Brunch" // the good kind
note:r """Step 1: Sleep in
Step 2: Pancakes"""

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. 

couch@120,80^220x72
fridge@420,160

$:r{fill:#111;stroke:#fff}
$.rushed{stroke:#f44}
$#couch{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 } ;
specification.md grammar.ebnf example .g files

Use Glypho your way

Open the editor for the fastest path, use the CLI in scripts, or install the packages in your app.

Fastest path Editor

Paste code. Export diagrams.

Built for people arriving from ChatGPT, Claude, Mermaid, or DOT. Paste, render, tweak, then export SVG or PNG.

Open editor
  • Paste Glypho, Mermaid, or DOT
  • See the diagram update live
  • Export SVG or PNG
Automation CLI

Render, convert, inspect.

Use the CLI in build scripts, content pipelines, or terminals where you want SVG and PNG output without opening the editor.

npm install -g @glypho/cli
glypho render diagram.g -f png
glypho from mermaid flow.mmd
glypho info diagram.g
View CLI package
Integration Packages

Parse and render in code.

One package gets you the parser and renderer for Node.js, the browser, or React.

npm install glypho
glypho on npm

Parse .g, convert formats, render SVG strings, or mount the React component.