Instalar

<fluxy-gram> es un componente web estándar. Funciona en HTML simple y en cualquier framework (React, Vue, Svelte, Astro, Angular…), sin adaptadores.

CDN

Sin instalar nada y sin bundler:

<script type="module" src="https://cdn.jsdelivr.net/npm/fluxygram@0.1"></script>

<fluxy-gram src="/diagramas/checkout.flux.json"></fluxy-gram>

npm

npm install @fluxygram/element

// Registra <fluxy-gram> una vez, en cualquier parte de tu app.
import '@fluxygram/element';

Cargar un diagrama

Apunta src a un archivo .flux.json:

<fluxy-gram src="/diagramas/checkout.flux.json"></fluxy-gram>

O escríbelo adentro:

<fluxy-gram>
  <script type="application/json">
    { "type": "flow", "nodes": [{ "id": "a", "label": "Inicio" }, { "id": "b", "label": "Listo" }], "edges": [{ "from": "a", "to": "b" }] }
  </script>
</fluxy-gram>

O pásalo desde JavaScript:

document.querySelector('fluxy-gram').diagram = { type: 'flow', nodes: [/* … */], edges: [/* … */] };

En un framework

// React
import '@fluxygram/element';

export function Checkout() {
  return <fluxy-gram src="/diagramas/checkout.flux.json" />;
}

<!-- Vue: indícale al compilador que es un custom element (compilerOptions.isCustomElement) -->
<template>
  <fluxy-gram src="/diagramas/checkout.flux.json" />
</template>

Nota

Todos los atributos, métodos y eventos están en la referencia del componente.

Paquetes

Paquete	Qué es
@fluxygram/element	El componente <fluxy-gram>. Para usar con un bundler.
fluxygram	El mismo componente en un solo archivo, para etiquetas <script> y CDNs.
@fluxygram/core	El formato sin interfaz: validación, posiciones y plan de movimiento. Para herramientas, servidores y Workers.

import { validate } from '@fluxygram/core';

const result = validate(json, { locale: 'es' });
if (!result.ok) console.log(result.issues); // [{ path: 'edges[0].to', message: '…' }]