# Block Diagram (BlockDiag)

In the BlockDiag family, BlockDiag is the core component that creates _block diagrams_ (box-and-arrow diagrams) from plain text.

---

![Block Diagram](https://help.gocapable.com/images/att1226244198.svg)

```
blockdiag {
   // Set labels to nodes.
   A [label = "foo"];
   B [label = "bar"];
   // And set text-color
   C [label = "baz"];

   // Set labels to edges. (short text only)
   A -> B [label = "click bar", textcolor="red"];
   B -> C [label = "click baz"];
   C -> A;
}

```