Framework de infografías · SVG nativo

Infografías de
programación, en código.

Generá comparativas, flowcharts, roadmaps, charts y grids de logos desde un documento JSON o un DSL de texto. Vos escribís los datos, infoglitch dibuja el SVG. La IA es opcional.

npm i @infoglitch/core Probar en vivo Cómo se usa
16 tipos de sección 6 temas charts ~3500 logos PNG / PDF MIT
Playground en vivo

Escribí el DSL, mirá el SVG

Corre 100% en tu navegador con @infoglitch/core self-hosted (sin CDN). El parser es tolerante: se dibuja mientras escribís.

Ejemplos:

Tip: cada section <tipo> agrega un bloque. Probá cambiar el tema arriba.

Cómo funciona

El JSON es la fuente de verdad. La IA es opcional.

Un documento es una lista de secciones. infoglitch las apila y renderiza a SVG. Si querés, un adapter de IA convierte un prompt en ese mismo documento.

1 · Documento
JSON o DSL con tus secciones y datos.
→
2 · renderToString()
El core dibuja el SVG (temas, charts, iconos, layout).
→
3 · SVG / PNG / PDF
Embebés el SVG o exportás con @infoglitch/export.
Uso

Empezar

Desde JSON (sin IA)

import { renderToString } from "@infoglitch/core";

const svg = renderToString({
  template: "stack",
  theme: "neon-night",
  sections: [
    { type: "title", text: "CI/CD", icon: "rocket" },
    { type: "steps", items: [
      { label: "Build" }, { label: "Deploy" },
    ]},
  ],
});

Desde el DSL de texto

const svg = renderToString(`template stack
theme neon-night

section title
  text CI/CD
  icon rocket

section steps
  - label Build
  - label Deploy`);

En React

import { Infographic } from "@infoglitch/react";

<Infographic doc={doc} width={960} />
<Infographic source={dsl} />

Con IA (server-side)

import { createAdapter, generateInfographic }
  from "@infoglitch/ai";

const adapter = createAdapter("anthropic");
const { doc, svg } = await generateInfographic(
  adapter, { prompt: "Pipeline de CI/CD" });

Exportar a PNG / PDF

import { downloadPng, downloadPdf }
  from "@infoglitch/export";

await downloadPng(svg, "infografia.png");
await downloadPdf(svg, "infografia.pdf");

Logos de lenguajes

import { registerSimpleIcons, registerDevicon }
  from "@infoglitch/icons";

registerSimpleIcons();       // ~110 mono
await registerDevicon();   // ~90 a color
Ejemplos

Qué podés armar

Todas estas imágenes son SVG generados por infoglitch. Abrí “Ver DSL” para ver las pocas líneas que las producen.

Comparativa “versus”

WordPress vs desarrollo a medida
Ver DSL
section versus
  left WordPress
  right A medida
  - label Tiempo
    l Rápido
    r Lento
    ltone pro
    rtone con

Flowchart (Sí/No)

Flowchart if/else
Ver DSL
section flow
  - start Inicio
  - decision ¿nota >= 60?
    branch Reprobado
  - process Aprobado
  - end Fin

Roadmap serpenteante

Roadmap de Python
Ver DSL
section roadmap
  - label Fundamentos
    icon python
    point Sintaxis
  - label Proyectos
    icon rocket
    point APIs

Charts

Charts de métricas
Ver DSL
section chart
  chart bar
  unit %
  - label JavaScript
    value 62
  - label Python
    value 51

Grid + logos a color

Grid de tecnologías
Ver DSL
section iconGrid
  columns 4
  - icon python
    label Python
  - icon react
    label React

Código + columnas 50/50

Código con highlighting
Ver DSL
section columns
  ratio 1 1
  col
    section codeSnippet
      language javascript
      code const x = 1;
  col
    section list
      - label Tip
        tone pro
Referencia

Tipos de sección y temas

16 tipos de sección

titlestepscomparisonstatcodeSnippetarchitecturetimelinelistcalloutversusflowroadmapiconGridchartcolumns

Más footer opcional. columns coloca secciones lado a lado (ej. 50/50).

6 temas

dark-terminallight-docsglitchneon-nightblueprintcyber

Fondo con gradiente, glow neón, acento por sección, título con degradé y paleta de código.

Paquetes

PaquetePara qué
@infoglitch/coreModelo + DSL + renderer SVG. 16 tipos, 6 temas, charts, highlighting, columnas. JSON → SVG sin IA.
@infoglitch/aiMulti-proveedor: Anthropic, OpenAI, OpenRouter, Gemini.
@infoglitch/reactComponente <Infographic/> + hook de streaming.
@infoglitch/exportPNG / PDF / SVG en el navegador, sin dependencias.
@infoglitch/iconsSimple Icons (~110 / ~3470) + Devicon a color (~90).
@infoglitch/fontsInter + JetBrains Mono embebibles para output consistente.