Por que construí o Glyphic como infraestrutura, não como um aplicativo

Claude pode desenhar diagramas bonitos. Você já viu os artefatos — SVG personalizados com layouts pensativos, ícones, fontes, tudo isso. É genuinamente impressionante.

(Glyphic é um motor de diagrama de código aberto construído para agentes de IA. Ele transforma JSON em SVG/PNG nativamente sem um navegador sem cabeça.)

Então, por que eu construí o Glyphic?

Porque você não pode npm install Artefatos do Claude. Você não pode hospedá-los localmente. Você não pode canalizá-los em um trabalho de CI, incorporá-los em seu próprio produto ou usá-los de um LLM local que não seja o Claude. Eles são um recurso da interface de chat de um fornecedor — brilhante, mas bloqueado.

E essa é a lacuna. Não é a qualidade visual — Claude prova que modelos podem descrever bons diagramas. A lacuna está na infraestrutura: uma maneira de renderizar diagramas que você possui, incorpora e executa em qualquer lugar, de qualquer modelo.

As três opções hoje

Se seu agente ou pipeline precisa produzir um diagrama, aqui está o que você está escolhendo:

Artefatos do Claude. Saída bonita. Mas é exclusivo do Claude, apenas na nuvem, e não há uma API programática. Você não pode chamá-lo do LangChain, executá-lo em um Lambda ou incorporar o resultado em seu produto SaaS. É um recurso, não infraestrutura.

Mermaid / D2 / Graphviz. Código aberto e incorporável — o instinto certo. Mas o Mermaid precisa de um navegador sem cabeça (Puppeteer) para renderizar no lado do servidor, o que significa ~300 MB de Chromium, inícios frios medidos em segundos e um processo de navegador no seu loop de agente. O D2 é um binário Go com seu próprio DSL. O Graphviz é uma dependência C dos anos 90. Todos eles usam DSLs de texto — gramáticas frágeis onde um erro de digitação derruba toda a renderização.

Nenhum deles é projetado para máquinas escreverem e pipelines consumirem.

Glyphic: infraestrutura de diagrama que você possui

Eu construí o Glyphic com um pressuposto diferente: o modelo descreve o que o diagrama significa como JSON tipado, e um motor determinístico lida com layout e renderização. Sem DSL para errar. Sem navegador na pilha. Sem bloqueio de fornecedor.

Aqui está o que isso significa concretamente:

Funciona com qualquer LLM

Glyphic aceita JSON. Qualquer modelo que pode produzir um objeto JSON — Claude, GPT, Gemini, Llama, Mixtral, um 7B ajustado rodando no seu laptop — pode controlá-lo. A entrada é validada contra um esquema Zod rigoroso, então se o modelo errar algo, ele recebe uma mensagem de erro corrigível em vez de uma falha.

Não há acoplamento a nenhum fornecedor de modelo. Troque de modelos, use múltiplos modelos, execute localmente — não importa.

Sem navegador sem cabeça

Caminho de "renderizar um diagrama no lado do servidor" que encontrei eventualmente se conectou ao Chromium. O Glyphic não faz isso. O layout é calculado por motores de gráfico matemáticos (ELK, d3-hierarchy, d3-sankey), e o SVG é rasterizado para PNG por Rust (@resvg/resvg-js) — diretamente no processo, sem DOM, sem navegador.

O que isso lhe proporciona:

• Implante em qualquer lugar: Lambda, Cloud Run, trabalhadores de borda, executores de CI, contêineres Docker. Sem Chromium para instalar, sem --no-sandbox flags, sem taxa de início frio.
• Rápido: A geração de SVG leva ~5-15ms. A rasterização completa de PNG leva ~800ms. Ainda está muito à frente de inicializar o Chromium.
• Pequena pegada: Todo o motor é um npm install normal. Sem download de binário de 300 MB.

Biblioteca primeiro

Glyphic não é um painel SaaS para o qual você envia diagramas. É um pacote npm:

npm install @glyphicjs/core @glyphicjs/schema

import { processDiagram } from "@glyphicjs/core";

const { svg, png, reactFlow } = await processDiagram({
  type: "architecture",
  nodes: [
    { id: "api", label: "API", icon: "fas-bolt" },
    { id: "db", label: "PostgreSQL", shape: "database", icon: "fas-database" },
  ],
  edges: [{ source: "api", target: "db", label: "SQL" }],
});

Você chama uma função, recebe SVG, PNG e JSON do React Flow de volta. Incorpore isso em seu pipeline, seu produto, seu trabalho de CI. Sem chamada de rede, sem chave de API, sem limite de taxa.

API HTTP auto-hospedável

Precisa disso como um serviço? Execute a API HTTP você mesmo. Docker, bare metal, seu cluster Kubernetes.
Sua infraestrutura, seus dados, seu SLA. Sem dependência de nuvem.

Saída do React Flow

Cada renderização também produz uma configuração JSON do React Flow — nós e arestas posicionados e prontos para uma tela interativa. Incorpore isso em seu produto e deixe os usuários panorâmicos, ampliem e explorem o diagrama. Nenhuma outra ferramenta faz isso.

Esquema tipado com validação

O contrato de entrada é um esquema Zod. Ele valida antes da renderização. Se o modelo produzir edges[2].to referenciando um nó desconhecido, ele recebe de volta um erro preciso — não uma pilha de rastreamento ou uma página em branco. Isso torna loops de agentes autocorrigíveis triviais: renderizar → validar → corrigir → renderizar.

18 tipos de diagrama, um esquema

Arquitetura, sequência, ERD, classe UML, máquinas de estado, fluxogramas, Gantt, cronogramas, Sankey, árvores Git, mapas mentais, C4, pizza, quadrante, kanban, jornadas do usuário, mapas de árvore e uma tela livre. Um import, uma função, um esquema.

Onde se encaixa

Eu construí o Glyphic para os lugares onde a geração de diagramas é infraestrutura, não um evento único:

Pipelines de CI/CD. Gere diagramas de arquitetura como bu