Get started with dagre CDN

MIT licensed

Dagre is a graph layout library for creating high-quality, customizable diagrams in LaTeX.

Tags:
  • graph
  • layout

Stable version

Copied!

How to start using dagre CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with dagre CDN - cdnhub.io</title>
  <style>
    #graph {
      width: 800px;
      height: 600px;
      border: 1px solid steelblue;
    }
  </style>
</head>
<body>
  <div id="graph"></div>
  <script src="https://cdn.cdnhub.io/dagre/0.8.5/dagre.min.js"></script>
  <script>
    const { graphml, layout } = dagre;

    const g = new graphml.Graph();

    g.setGraph({});

    g.setDefaultEdgeLabel((e) => {
      return { label: e.label || "" };
    });

    g.addNode("A");
    g.addNode("B");
    g.addNode("C");

    g.addEdge({ label: "ab", src: "A", target: "B" });
    g.addEdge({ label: "bc", src: "B", target: "C" });
    g.addEdge({ label: "ac", src: "A", target: "C" });

    layout(g, () => {
      return { rankdir: "TB" };
    });

    const svg = d3.select("#graph")
      .append("svg")
      .attr("width", 800)
      .attr("height", 600);

    const render = new dagre.render();

    render(g, svg.node());
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions