Inicio rápido

Un diagrama de Fluxygram es un archivo JSON. Tú describes qué hay en él y en qué orden contarlo; Fluxygram calcula la posición de cada cosa y el movimiento.

Tu primer diagrama

1. Abre el editor y ve a la pestaña JSON, a la derecha.

2. Reemplaza el contenido por esto:

   {
     "type": "flow",
     "title": "Cómo se procesa un pedido",
     "nodes": [
       { "id": "start", "label": "Pedido recibido", "kind": "start", "icon": "cart" },
       { "id": "stock", "label": "¿Hay stock?", "kind": "decision" },
       { "id": "pay", "label": "Cobrar", "icon": "card" },
       { "id": "done", "label": "Entregado", "kind": "end", "accent": true }
     ],
     "edges": [
       { "from": "start", "to": "stock" },
       { "from": "stock", "to": "pay", "label": "sí" },
       { "from": "pay", "to": "done" }
     ]
   }

3. Presiona Ver animación. Eso es todo:

Sin pasos, cada tipo de diagrama usa su propio movimiento. Un flujo se arma columna por columna y una partícula recorre cada conexión nueva.

Agrégale una historia

Los pasos deciden qué ve la persona, una idea a la vez. Agrega esto al mismo JSON:

"steps": [
  { "show": ["start"], "caption": "Llega un pedido" },
  { "show": ["start->stock"], "flow": "start->stock", "caption": "Primero, revisar el stock" },
  { "show": ["stock->pay"], "flow": "stock->pay", "caption": "Hay stock: se cobra la tarjeta" },
  { "show": ["pay->done"], "flow": "pay->done", "highlight": ["done"], "caption": "Y va en camino" }
]

Las conexiones sin id se llaman desde->hasta. Dales un id cuando las uses seguido. Más en Pasos.

Ponlo en tu sitio

Guarda el archivo como pedido.flux.json y agrega dos líneas a cualquier página:

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/fluxygram@0.1"></script>
<fluxy-gram src="pedido.flux.json"></fluxy-gram>

npm

npm install @fluxygram/element

import '@fluxygram/element';

Consejo

¿Prefieres no escribir JSON? Pídeselo a tu agente de IA: instala el skill de Fluxygram y dile “haz un diagrama animado de cómo funciona nuestro checkout”.

Siguiente

• Tipos de diagrama: cuál encaja con lo que quieres explicar.
• El editor: arma diagramas visualmente, compártelos y expórtalos.
• Movimiento: entradas, lo que viaja por las conexiones, estados y velocidad.