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
One prompt teaches any model the syntax. Ask for a diagram, paste the output into the editor, done.
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.
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} 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.
.g notation >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} 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.
>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}
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.
# 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
npm install -g @glypho/cliglypho --helpCLAUDE.md, .cursorrules, or similarWhat the agent can do
.g files and render them end-to-endglypho check before committingOpen the editor for the fastest path, use the CLI in scripts, or install the packages in your app.
Built for people arriving from ChatGPT, Claude, Mermaid, or DOT. Paste, render, tweak, then export SVG or PNG.
Open editorUse 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 pngglypho from mermaid flow.mmdglypho info diagram.gOne 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.