1. Ejemplo directo: diagrama sagital

<canvas id="canvas-sagital" width="620" height="420"></canvas>

<script>
crearDiagramaSagital("canvas-sagital", {
  nombreA: "A",
  nombreB: "B",
  nombreRelacion: "f",
  elementosA: ["1","2","3","4"],
  elementosB: ["2","4","6","8"],
  pares: [["1","2"],["2","4"],["3","6"],["4","8"]]
});
</script>

2. Ejemplo directo: grafo de relación

<canvas id="canvas-grafo" width="620" height="420"></canvas>

<script>
crearGrafoRelacion("canvas-grafo", {
  nombreRelacion: "R",
  elementos: ["1","2","3","4"],
  pares: [["1","2"],["2","1"],["2","2"],["3","4"],["4","3"],["4","4"]]
});
</script>

3. Ejemplo automático: composición

<div class="diagrama-composicion-auto"
     data-config='{
       "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
     }'></div>

4. Ejemplo automático: auto-sagital

<div class="diagrama-autosagital-auto"
     data-config='{
       "nombreConjunto":"A",
       "nombreRelacion":"R",
       "elementos":["1","2","3","4"],
       "pares":[["1","2"],["2","3"],["3","3"],["4","1"]]
     }'></div>

5. Ejemplo automático con clase genérica + data-tipo

<div class="diagrama-auto"
     data-tipo="grafo"
     data-width="620"
     data-height="420"
     data-config='{
       "nombreRelacion":"S",
       "elementos":["a","b","c"],
       "pares":[["a","b"],["b","c"],["c","a"],["b","b"]]
     }'></div>

6. Redibujar después de cambiar data-config

const contenedor = document.getElementById("demo-autosagital");

contenedor.setAttribute("data-config", JSON.stringify({
  nombreConjunto: "B",
  nombreRelacion: "T",
  elementos: ["0","1","2"],
  pares: [["0","1"],["1","2"],["2","0"]]
}));

DiagramasRelacionesAuto.redibujar(contenedor);

Esto sirve mucho cuando quieres regenerar el diagrama desde botones, formularios o editores propios.