Embed Glypho in your app

Three production-ready patterns for rendering Glypho diagrams in apps, static sites, and React interfaces. These examples stay intentionally minimal so you can adapt them into your own pipeline quickly.

Renderer package docs CLI docs

1. Node.js build-time generation

Parse and render at build time, write the SVG to a file. No client-side JavaScript required.

generate.mjs

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

const source = `>LR
start:c Start
process:r Process
done:c Done
start>process>done
`;

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

if (errors.length) {
  console.error('Parse errors:', errors);
  process.exit(1);
}

writeFileSync('diagram.svg', svg);

Run with node generate.mjs. For scripted workflows, the CLI can do the same job with glypho render diagram.g.

2. Static HTML

Inline the SVG at build time. The page loads with zero JavaScript — just HTML and the rendered diagram.

template.html

<!doctype html>
<html>
  <body>
    <h1>Architecture</h1>
    <!-- SVG generated at build time, inlined here -->
    <div class="diagram">${svg}</div>
  </body>
</html>

build.mjs

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

const source = readFileSync('diagram.g', 'utf-8');
const { svg } = render(source);
const html = readFileSync('template.html', 'utf-8');

writeFileSync('index.html', html.replace('${svg}', svg));

This pattern works with any static site generator. Generate the SVG during your build step, inject it into your HTML template.

3. React component

Use the <GlyphoGraph> component for interactive diagrams in React apps.

Diagram.tsx

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

const source = `>LR
api:r API
db:c DB
cache:r Cache
api>db
api>cache
`;

export default function Diagram() {
  const { graph, errors } = parse(source);

  if (errors.length || !graph) {
    return <p>Failed to parse diagram</p>;
  }

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

The component accepts width, height, padding, onNodeClick, and onEdgeClick props.

Open editor Renderer docs on GitHub

Choose your Glypho entry point

Use the editor to iterate visually, the CLI inside build scripts, or the packages directly in your application code.

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.

Add the parser and renderer when you want custom workflows in Node.js, the browser, or React.

npm install @glypho/parser @glypho/renderer

Parser Renderer

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