31. flujomate manual

Manual de FlujoMate

Este manual muestra cómo usar FlujoMate con JSON embebido, cómo cambiar opciones desde atributos data-* y cómo ver al mismo tiempo el código y el resultado.

1. Estructura mínima

La estructura más simple es esta:

<div class="flujomate">
  <script type="application/json">
    {
      "titulo": "Mi diagrama",
      "nodos": [
        { "id": "n1", "tipo": "inicio", "texto": "Inicio" },
        { "id": "n2", "tipo": "proceso", "texto": "Hacer algo" },
        { "id": "n3", "tipo": "fin", "texto": "Fin" }
      ],
      "conexiones": [
        { "desde": "n1", "hacia": "n2" },
        { "desde": "n2", "hacia": "n3" }
      ]
    }
  </script>
</div>

Si tu librería ya tiene activado el auto renderizado, no necesitas escribir un script extra para dibujar el diagrama.

2. Tipos de nodos

FlujoMate reconoce estos tipos de nodos:

inicio      -> nodo inicial del flujo
fin         -> nodo final
proceso     -> acción o paso de trabajo
decision    -> rombo de decisión
resultado   -> resultado o conclusión intermedia
nota        -> comentario lateral
error       -> advertencia, error frecuente o excepción
referencia  -> vínculo o recordatorio de otra ruta/contenido

Ejemplo de nodos:

"nodos": [
  { "id": "n1", "tipo": "inicio", "texto": "Inicio" },
  { "id": "n2", "tipo": "proceso", "texto": "Resolver" },
  { "id": "n3", "tipo": "decision", "texto": "¿Se puede simplificar?" },
  { "id": "n4", "tipo": "resultado", "texto": "Resultado parcial" },
  { "id": "n5", "tipo": "nota", "texto": "Recuerda revisar signos" },
  { "id": "n6", "tipo": "error", "texto": "Error frecuente" },
  { "id": "n7", "tipo": "referencia", "texto": "Ver método alternativo" },
  { "id": "n8", "tipo": "fin", "texto": "Respuesta final" }
]

3. Tipos de relaciones o conexiones

Las conexiones se definen en conexiones. Los tipos más usados son estos:

flujo       -> conexión normal del diagrama
caso        -> salida típica de una decisión, por ejemplo Sí / No
anotacion   -> conecta una nota o error lateral con un nodo principal
referencia  -> conecta una referencia lateral con un nodo principal
retorno     -> ruta de regreso o retroceso especial

Ejemplo:

"conexiones": [
  { "desde": "n1", "hacia": "n2", "semantica": "flujo" },
  { "desde": "n3", "hacia": "n4", "semantica": "caso", "etiqueta": "Sí" },
  { "desde": "n3", "hacia": "n5", "semantica": "caso", "etiqueta": "No" },
  { "desde": "n6", "hacia": "n2", "semantica": "anotacion", "estilo": "punteada" },
  { "desde": "n7", "hacia": "n4", "semantica": "referencia", "estilo": "punteada" }
]

4. Atributos configurables en el HTML

Puedes ajustar parámetros directamente en el contenedor usando atributos data-*.

data-ajustar-nodo-final-abajo="false"
data-centrar-nodo-final="false"
data-distancia-extra-nodo-final="0"
data-rombo-diagonal-salida="12"
data-conexion-ruta-intentos="20"
data-conexion-paso-alternativo="10"
data-conexion-margen-nodo="4"
data-conexion-separacion-min="3"
data-conexion-zona-libre-flecha="20"
data-conexion-offset="20"

No es obligatorio escribir todos. Solo agregas los que quieras cambiar. Lo demás se toma desde la configuración por defecto del archivo JavaScript.

5. Ejemplo 1: diagrama mínimo

Código

<div class="flujomate">
  <script type="application/json">
    {
      "titulo": "Ejemplo mínimo",
      "nodos": [
        { "id": "n1", "tipo": "inicio", "texto": "Inicio" },
        { "id": "n2", "tipo": "proceso", "texto": "Resolver" },
        { "id": "n3", "tipo": "fin", "texto": "Fin" }
      ],
      "conexiones": [
        { "desde": "n1", "hacia": "n2" },
        { "desde": "n2", "hacia": "n3" }
      ]
    }
  </script>
</div>

Resultado

6. Ejemplo 2: desactivar ajuste del nodo final

Código

<div class="flujomate"
     data-ajustar-nodo-final-abajo="false"
     data-centrar-nodo-final="false">
  <script type="application/json">
    {
      "titulo": "Final sin forzar",
      "nodos": [
        { "id": "n1", "tipo": "inicio", "texto": "Inicio" },
        { "id": "n2", "tipo": "decision", "texto": "¿Continuar?" },
        { "id": "n3", "tipo": "resultado", "texto": "Seguir" },
        { "id": "n4", "tipo": "fin", "texto": "Fin" }
      ],
      "conexiones": [
        { "desde": "n1", "hacia": "n2" },
        { "desde": "n2", "hacia": "n3", "semantica": "caso", "etiqueta": "Sí" },
        { "desde": "n2", "hacia": "n4", "semantica": "caso", "etiqueta": "No" },
        { "desde": "n3", "hacia": "n4" }
      ]
    }
  </script>
</div>

Resultado

7. Ejemplo 3: ajustar rutas y salida de rombos

Código

<div class="flujomate"
     data-rombo-diagonal-salida="12"
     data-conexion-ruta-intentos="24"
     data-conexion-paso-alternativo="8">
  <script type="application/json">
    {
      "titulo": "Ajuste de rutas",
      "nodos": [
        { "id": "n1", "tipo": "inicio", "texto": "Leer" },
        { "id": "n2", "tipo": "decision", "texto": "¿Hay error?" },
        { "id": "n3", "tipo": "error", "texto": "Corregir dato" },
        { "id": "n4", "tipo": "proceso", "texto": "Calcular" },
        { "id": "n5", "tipo": "fin", "texto": "Responder" }
      ],
      "conexiones": [
        { "desde": "n1", "hacia": "n2" },
        { "desde": "n2", "hacia": "n3", "semantica": "caso", "etiqueta": "Sí" },
        { "desde": "n2", "hacia": "n4", "semantica": "caso", "etiqueta": "No" },
        { "desde": "n4", "hacia": "n5" },
        { "desde": "n3", "hacia": "n4", "semantica": "anotacion", "estilo": "punteada" }
      ]
    }
  </script>
</div>

Resultado

8. Resumen práctico

<div class="flujomate"
     data-ajustar-nodo-final-abajo="false"
     data-centrar-nodo-final="false"
     data-rombo-diagonal-salida="10">
  <script type="application/json">
    {
      "titulo": "Mi diagrama",
      "nodos": [...],
      "conexiones": [...]
    }
  </script>
</div>

Si no escribes un atributo data-*, FlujoMate usa el valor por defecto definido en el JavaScript.