mermaid dark mode, docs

Author: mbostock

docs/dot.md

@@ -1,6 +1,6 @@
 # DOT
 
-[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).
+[DOT](https://graphviz.org/doc/info/lang.html) is a language for expressing 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:
 

docs/mermaid.md

@@ -1,9 +1,58 @@
 # Mermaid
 
-```mermaid show
+[Mermaid](https://mermaid.js.org/) is a language for expressing node-link diagrams, flowcharts, sequence diagrams, and many other types of visualizations. (See also [DOT](./dot).)
+
+To use Mermaid, write a `mermaid` fenced code block:
+
+````md
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+This produces:
+
+```mermaid
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
 ```
+
+Here are some more examples.
+
+```mermaid show
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+```mermaid show
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```

public/client.js

@@ -150,7 +150,8 @@ async function dot() {
 async function mermaid() {
   let nextId = 0;
   const {default: mer} = await import("https://cdn.jsdelivr.net/npm/mermaid/+esm");
-  mer.initialize({startOnLoad: false, securityLevel: "loose", theme: "neutral"});
+  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "neutral";
+  mer.initialize({startOnLoad: false, securityLevel: "loose", theme});
   return async function mermaid() {
     const root = document.createElement("div");
     root.innerHTML = (await mer.render(`mermaid-${++nextId}`, String.raw.apply(String, arguments))).svg;