Graphviz DOT language preview

1. A basic pipeline

a digraph with a subgraph cluster and edge attributes

horizon-dark

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

atom-one-dark

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

github-dark

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

dracula

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

nord

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

github

// a simple pipeline
digraph pipeline {
  rankdir=LR;
  node [shape=box, fontname="Helvetica"];

  subgraph cluster_build {
    label="build";
    compile -> test;
  }

  test -> deploy [label="on success", color=green];
  deploy -> "prod:n" [style=dashed];
}

2. An undirected graph

graph keyword with -- edges and node styling

horizon-dark

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

atom-one-dark

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

github-dark

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

dracula

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

nord

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

github

graph social {
  node [shape=circle, style=filled, fillcolor=lightblue];

  alice -- bob;
  bob -- carol;
  carol -- alice [color=red, penwidth=2];
}

3. HTML-like labels

an HTML label and port references

horizon-dark

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}

atom-one-dark

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}

github-dark

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}

dracula

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}

nord

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}

github

digraph structs {
  node [shape=record];

  struct1 [label=<
    <table>
      <tr><td>left</td><td port="f1">mid</td><td>right</td></tr>
    </table>
  >];

  struct1:f1 -> struct2;
}