manual de mi pagina

11. Sagital Documentación del motor de diagramas de relaciones v2

Documentación del motor de diagramas de relaciones v2

Esta página resume cómo usar los dos archivos:

diagramas-relacionesv2.js motor principal diagramas-relaciones-autov2.js auto-render

La idea es que puedas trabajar de dos maneras:

Modo directo: tú creas un <canvas> y llamas una función JS.
Modo automático: tú pones un <div> con clase y data-config, y el script crea el canvas solo.

Ir a la página de ejemplos

1. Orden de carga

Primero debe cargarse el motor y después el archivo auto.

<script src="diagramas-relacionesv2.js"></script>
<script src="diagramas-relaciones-autov2.js"></script>

Si cargas primero el archivo auto, este buscará window.DiagramasRelaciones y fallará.

2. API expuesta por el motor

El motor deja disponible el objeto:

window.DiagramasRelaciones

Y dentro de ese objeto quedan estas funciones:

crearDiagramaSagital
crearDiagramaComposicion
crearDiagramaAutoSagital
crearGrafoRelacion

Además, por compatibilidad legacy, las funciones también quedan exportadas globalmente.

3. API expuesta por el auto-render

El archivo automático deja disponible:

window.DiagramasRelacionesAuto

inicializar(root)
redibujar(ref)
autoInicializar()
obtenerAPI()

redibujar(ref) acepta el id del contenedor o el elemento mismo.

4. Tipos de diagramas soportados

Tipo	Función directa	Clase auto	data-tipo alternativo
Sagital A → B	`crearDiagramaSagital`	`diagrama-sagital-auto`	`sagital`
Composición A → B → C	`crearDiagramaComposicion`	`diagrama-composicion-auto`	`composicion`
Auto-sagital A × A	`crearDiagramaAutoSagital`	`diagrama-autosagital-auto`	`autosagital`
Grafo de relación	`crearGrafoRelacion`	`grafo-relacion-auto`	`grafo` o `grafo-relacion`

5. Modo directo: estructura mínima

<canvas id="miCanvas" width="620" height="420"></canvas>

<script src="diagramas-relacionesv2.js"></script>
<script>
crearDiagramaSagital("miCanvas", {
  nombreA: "A",
  nombreB: "B",
  nombreRelacion: "f",
  elementosA: ["1","2","3"],
  elementosB: ["2","4","6"],
  pares: [["1","2"],["2","4"],["3","6"]]
});
</script>

6. Modo automático: estructura mínima

<div class="diagrama-sagital-auto"
     data-config='{
       "nombreA":"A",
       "nombreB":"B",
       "nombreRelacion":"f",
       "elementosA":["1","2","3"],
       "elementosB":["2","4","6"],
       "pares":[["1","2"],["2","4"],["3","6"]]
     }'></div>

<script src="diagramas-relacionesv2.js"></script>
<script src="diagramas-relaciones-autov2.js"></script>

El auto-render crea el canvas solo, usando anchos y altos por defecto según el tipo de diagrama.

7. Atributos del modo automático

Atributo	Uso
`class`	Define el tipo, por ejemplo `diagrama-sagital-auto`.
`data-tipo`	Alternativa genérica si usas `class="diagrama-auto"`.
`data-config`	Configuración JSON del diagrama.
`data-width`	Ancho del canvas.
`data-height`	Alto del canvas.

8. Selectores que busca el auto-render

.diagrama-sagital-auto
.diagrama-composicion-auto
.diagrama-autosagital-auto
.grafo-relacion-auto
.diagrama-auto[data-tipo]

Cuando el documento termina de cargar, el script recorre esos contenedores y dibuja automáticamente.

9. Parámetros más útiles por tipo

9.1 Sagital

Claves	`nombreA`, `nombreB`, `nombreRelacion`, `elementosA`, `elementosB`, `pares`
Opcionales	`radioNodo`, `altoConjunto`, `anchoConjunto`, `centroAx`, `centroBx`, `yTop`, `colorFlecha`, `grosorFlecha`
Suspensivos	`mostrarSuspensivosInicioA`, `mostrarSuspensivosFinA`, `mostrarSuspensivosInicioB`, `mostrarSuspensivosFinB`, y sus textos asociados

9.2 Composición

Claves	`nombreA`, `nombreB`, `nombreC`, `paresAB`, `paresBC`
Opcionales	`nombreRelacionAB`, `nombreRelacionBC`, `nombreCompuesta`, `mostrarCompuesta`, `paresCompuestos`
Observación	Si activas `mostrarCompuesta` y no das `paresCompuestos`, el motor intenta calcularlos.

9.3 Auto-sagital

Claves	`nombreA` o `nombreConjunto`, `elementos`, `pares`
Observación	Internamente reutiliza el diagrama sagital usando el mismo conjunto a ambos lados.

9.4 Grafo

Claves	`elementos` y `pares`
Opcionales	`nombreRelacion`, `radioNodo`, `radioGrafo`, `curvatura`, `colorNodo`, `colorBordeNodo`, `colorFlecha`
Observación	Si existe la inversa de un par, dibuja flechas curvas; si es un lazo, dibuja un bucle sobre el nodo.

10. Ejemplos rápidos de configuración

Sagital

{
  "nombreA":"A",
  "nombreB":"B",
  "nombreRelacion":"f",
  "elementosA":["1","2","3"],
  "elementosB":["2","4","6"],
  "pares":[["1","2"],["2","4"],["3","6"]]
}

Composición

{
  "nombreA":"A",
  "nombreB":"B",
  "nombreC":"C",
  "nombreRelacionAB":"g",
  "nombreRelacionBC":"f",
  "nombreCompuesta":"f ∘ g",
  "paresAB":[["1","a"],["2","b"],["3","c"]],
  "paresBC":[["a","x"],["b","y"],["c","z"]],
  "mostrarCompuesta":true
}

Grafo

{
  "nombreRelacion":"R",
  "elementos":["1","2","3"],
  "pares":[["1","2"],["2","1"],["2","2"],["3","1"]]
}

11. Redibujado manual

// Redibujar por id del contenedor auto
DiagramasRelacionesAuto.redibujar("miDiagrama");

// O por referencia al elemento
const el = document.getElementById("miDiagrama");
DiagramasRelacionesAuto.redibujar(el);

12. Recomendaciones prácticas

Usa el modo directo cuando quieras total control desde JavaScript.
Usa el modo automático cuando quieras escribir HTML simple y dejar que el motor haga el resto.
En data-config, usa JSON válido: comillas dobles, listas correctas y sin comas sobrantes.
Si un diagrama no aparece, revisa primero el orden de carga de los scripts.

13. Archivo complementario

La página de ejemplos viene con diagramas ya listos para copiar, editar y probar.

Abrir ejemplos