dot docs

Author: mbostock

docs/.observablehq/config.ts

@@ -13,7 +13,7 @@ export default {
     {path: "/javascript/mutables", name: "Mutables"},
     {path: "/javascript/imports", name: "Imports"},
     {path: "/javascript/inputs", name: "Inputs"},
-    {path: "/dot", name: "Dot"},
+    {path: "/dot", name: "DOT"},
     {path: "/mermaid", name: "Mermaid"},
     {path: "/tex", name: "TeX"},
     {path: "/loaders", name: "Data loaders"},

docs/dot.md

@@ -1,7 +1,56 @@
-# Dot
+# DOT
 
-```dot show
+[DOT](https://graphviz.org/doc/info/lang.html) is a language for rendering node-link diagrams using [Graphviz](https://graphviz.org). Observable Markdown’s implementation is powered by [Viz.js](https://github.com/mdaines/viz-js).
+
+To use DOT, write a `dot` fenced code block:
+
+````md
+```dot
 digraph G {
+  rankdir = LR
   a -> b -> c
 }
 ```
+````
+
+This produces:
+
+```dot
+digraph G {
+  rankdir = LR
+  a -> b -> c
+}
+```
+
+Here are some more examples.
+
+```dot show
+graph { n0 -- n1 -- n2 -- n3 -- n0 }
+```
+
+```dot show
+digraph { x -> y -> z }
+```
+
+```dot show
+digraph G {
+  subgraph cluster_0 {
+    a0 -> a1 -> a2 -> a3
+    label = "process #1"
+  }
+  subgraph cluster_1 {
+    b0 -> b1 -> b2 -> b3
+    label = "process #2"
+    color = blue
+  }
+  start -> a0
+  start -> b0
+  a1 -> b3
+  b2 -> a3
+  a3 -> a0
+  a3 -> end
+  b3 -> end
+  start [shape = Mdiamond]
+  end [shape = Msquare]
+}
+```

public/client.js

@@ -116,7 +116,11 @@ async function dot() {
     while (++i < n) string += arguments[i] + "" + strings[i];
     const svg = viz.renderSVGElement(string, {
       graphAttributes: {
-        bgcolor: "none"
+        bgcolor: "none",
+        color: "#00000101",
+        fontcolor: "#00000101",
+        fontname: "var(--sans-serif)",
+        fontsize: "12"
       },
       nodeAttributes: {
         color: "#00000101",