Four ways to render .g diagrams

Pick the path that fits your stack. Each approach uses the same parser and renderer — the only difference is where and when the code runs.

Approach	When it runs	Browser?	React?	Interactive?
`glypho render` (CLI)	Build time	No	No	No
`render()` server-side	Server / build	No	No	No
`render()` client-side	Runtime	Yes	No	No
`<GlyphoGraph>`	Runtime	Yes	Yes	Yes

1. Build-time with the CLI

For static sites, docs, and CI pipelines. Zero JS shipped to the client.

Best when: your diagrams don't change at runtime and you want the lightest possible output.

Terminal

# Render to SVG
glypho render diagram.g

# Render to PNG
glypho render diagram.g -f png

# Pipe into your build
glypho render diagram.g > out.svg

2. Server-side rendering

Generate SVG strings in Node, Deno, Bun, or edge functions.

Best when: you need dynamic diagrams but want to render on the server — API routes, SSG plugins, CI scripts.

generate.mjs

import { writeFileSync } from 'fs';
import { render } from '@glypho/renderer/svg';

const source = `>TB
api:r "API Server" #4a90d9
db:c Database
cache:r Cache
@infra{db cache}
api>db
api>cache
`;

const { svg, errors } = render(source);

if (errors.length) {
  console.error(errors);
  process.exit(1);
}

writeFileSync('diagram.svg', svg);

3. Client-side without React

Same renderer, just running in the browser. No framework needed.

Best when: you want runtime rendering in a vanilla JS app, a CMS, or anywhere React is overkill.

index.html

<div id="diagram"></div>

<script type="module">
import { render } from
  '@glypho/renderer/svg';

const source = `>LR
a:r Flow
b:r Dashed
c:r Thick
d:r Undirected
e:r Bidir
a>b
b~c  c=d  d--e  e<>a
`;

const { svg } = render(source);
document.getElementById('diagram')
  .innerHTML = svg;
</script>

4. React component

Interactive diagrams with click handlers, reactive updates, and style props.

Best when: your app is already React and you want interactivity — click-to-navigate, tooltips, or state-driven diagrams.

Diagram.tsx

import { parse } from '@glypho/parser';
import { GlyphoGraph }
  from '@glypho/renderer';

const source = `>LR
a:r Start #4CAF50
b:r Middle #2196F3
c:r End #F44336
a>b #4CAF50
b>c #2196F3
c~a #F44336
`;

export default function Diagram() {
  const { graph } = parse(source);
  if (!graph) return null;

  return (
    <GlyphoGraph
      graph={graph}
      width={600}
      onNodeClick={(id) =>
        console.log('clicked', id)
      }
    />
  );
}