Use Glypho with any LLM

One prompt teaches any model the syntax. Ask for a diagram, paste the output into the editor, done.

1 Copy this prompt into any LLM

ChatGPT, Claude, Gemini, Copilot, or a local model. Paste it as the first message, or save it as a system prompt so every conversation knows Glypho.

System prompt / first message
When I ask for a diagram, respond using Glypho (.g) notation.
Always reply with only a fenced ```glypho code block.
Do not include prose before or after the code block unless I explicitly ask for it.

Here's the syntax:

Nodes: id[:shape] [label] [#color]
  Shapes: r rect, d diamond, c circle, o oval, p pill, h hexagon
  Labels with spaces or special characters need quotes: cook:r "Make Dinner", mood:d "Hungry?"

Edges: id>id [label]
  Both sides must be bare IDs (not quoted strings): a>b, not a>"some label"
  > solid arrow, ~ dashed, = thick, -- undirected, <> bidirectional
  Chains: a>b>c>d (no labels on chains)

Direction: >LR (or >TB, >RL, >BT). Default is TB.

Groups: @name "Label" {member1 member2}

One statement per line. No commas, no semicolons. Comments: // (own line or end-of-line).

Styles (optional): $:shape{fill:#fff}, $.class{fill:#ff0}, $#id{stroke:#00f}
Class assignment: .classname{node1 node2}
Multiline labels: """Line 1\nLine 2""" or "Line 1\nLine 2"

Example:
>LR
wake:c "Wake Up"
mood:d "Monday?"
snooze:r "Hit Snooze"
up:r "Get Up"
coffee:p Coffee

wake>mood
mood>snooze yes
mood>up no
snooze>wake
up>coffee

@morning{wake mood up}
2 Ask for a diagram
You

Draw what happens when I'm hungry and check the fridge. If there's something good I cook, otherwise I order food, wait, and might regret it. Left-to-right layout.

3 The LLM responds with .g notation
LLM
>LR
hungry:c Hungry
fridge:d "Anything Good?"
cook:r Cook
order:r "Order Food"
wait:r "Wait 45 Min"
regret:d "Regret?"
eat:p Eat

hungry>fridge
fridge>cook yes
fridge>order no
order>wait
wait>regret
regret>order yes
cook>eat
regret>eat no

@delivery{order wait regret}
4 Paste into the editor — see it rendered instantly
deliveryHungryAnything Good?CookOrder FoodWait 45 MinRegret?Eatyesnoyesno

Example: Friday night

You

Draw a Friday night decision tree. Do I have plans? If not, Netflix and couch. If yes, go out — but if it's past midnight, that's tomorrow-me's problem.

LLM response
>TB
friday:p "Friday Night"
plans:d "Have Plans?"
couch:r "Netflix & Couch"
out:r "Go Out"
late:d "Past Midnight?"
problem:r "Tomorrow-Me Problem"
sleep:c Sleep

friday>plans
plans>couch no
plans>out yes
out>late
late>problem yes
late>sleep no
couch>sleep

@night{out late problem}
nightFriday NightHave Plans?Netflix & CouchGo OutPast Midnight?Tomorrow-Me ProblemSleepnoyesyesno

Give your AI agent the CLI

Skip the copy-paste. AI coding agents like Claude Code, Codex, and Cursor can use the Glypho CLI directly — write .g, render to SVG or PNG, and convert formats, all without leaving the terminal.

Key commands
# Render to SVG or PNG
glypho render diagram.g
glypho render diagram.g -f png

# Validate without rendering
glypho check diagram.g

# Convert from Mermaid or DOT
glypho from mermaid flow.mmd
glypho from dot graph.gv

# Convert to Mermaid
glypho to mermaid diagram.g

# Show stats and token counts
glypho info diagram.g

How to set it up

  • Install the CLI: npm install -g @glypho/cli
  • Point the agent to the repo or tell it to run glypho --help
  • Add the syntax prompt to CLAUDE.md, .cursorrules, or similar

What the agent can do

  • Write .g files and render them end-to-end
  • Convert existing Mermaid or DOT diagrams to Glypho
  • Validate diagrams with glypho check before committing
  • Generate diagrams as part of build scripts or CI pipelines

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

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