diff --git a/ha-org-pikchr-01.svg b/ha-org-pikchr-01.svg
index 1ab52ea..dd1e664 100644
--- a/ha-org-pikchr-01.svg
+++ b/ha-org-pikchr-01.svg
@@ -1,9 +1,9 @@
 <svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 260.64 76.32">
-<path d="M2.16,38.16L74.16,38.16"  style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
-<path d="M74.16,74.16L182.16,74.16L182.16,2.16L74.16,2.16Z"  style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
-<text x="128.16" y="28.08" text-anchor="middle" fill="rgb(255,255,255)" dominant-baseline="central">Hello,</text>
-<text x="128.16" y="48.24" text-anchor="middle" fill="rgb(255,255,255)" dominant-baseline="central">World!</text>
-<polygon points="254.16,38.16 242.64,42.48 242.64,33.84" style="fill:rgb(255,255,255)"/>
-<path d="M182.16,38.16L248.4,38.16"  style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
+<path d="M2.16,38.16L74.16,38.16"  style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
+<path d="M74.16,74.16L182.16,74.16L182.16,2.16L74.16,2.16Z"  style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
+<text x="128.16" y="28.08" text-anchor="middle" fill="rgb(238,238,238)" dominant-baseline="central">Hello,</text>
+<text x="128.16" y="48.24" text-anchor="middle" fill="rgb(238,238,238)" dominant-baseline="central">World!</text>
+<polygon points="254.16,38.16 242.64,42.48 242.64,33.84" style="fill:rgb(238,238,238)"/>
+<path d="M182.16,38.16L248.4,38.16"  style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
 </svg>
 
diff --git a/ha-org.org b/ha-org.org
index 94943a3..4c03b74 100644
--- a/ha-org.org
+++ b/ha-org.org
@@ -586,7 +586,37 @@ And this example shows off the syntax colorization:
 For the results:
 #+ATTR_HTML: :width 300 :background white
 [[file:ha-org-pikchr-02.svg]]
+*** Mermaid
+At work, I’ve been integrating [[https://mermaidjs.github.io/][Mermaid]] into our documentation, =foobar=.
 
+Assuming we have installed the [[https://github.com/mermaid-js/mermaid-cli][Mermaid CLI]]:
+
+#+BEGIN_SRC sh
+npm install -g @mermaid-js/mermaid-cli
+#+END_SRC
+
+We edit the code with [[https://github.com/abrochard/mermaid-mode][mermaid-mode]]:
+
+#+BEGIN_SRC emacs-lisp
+  (use-package mermaid-mode
+    :config
+    (setq mermaid-mmdc-location "/opt/homebrew/bin/mmdc"))
+#+END_SRC
+
+We can make Mermaid diagrams in Emacs Org files using [[https://github.com/arnm/ob-mermaid][ob-mermaid]]:
+
+#+BEGIN_SRC emacs-lisp
+  (use-package ob-mermaid
+    :config
+    (setq ob-mermaid-cli-path "/opt/homebrew/bin/mmdc"))
+#+END_SRC
+
+#+BEGIN_SRC mermaid :file ha-org-mermaid.png :theme dark :background-color transparent
+  sequenceDiagram
+   A-->B: Works!
+#+END_SRC
+
+[[file:ha-org-mermaid.png]]
 *** Next Image
 When I create images or other artifacts that I consider /part/ of the org document, I want to have them based on the org file, but with a prepended number. Keeping track of what numbers are now free is difficult, so for a /default/ let's figure it out: