chore: use mermaid engine and mermaid in markdown (nodejs#2759)

crysmags · Feb 27, 2024 · 1b77138 · 1b77138
1 parent b5ca579
commit 1b77138
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/docs/api/api-lifecycle.md b/docs/api/api-lifecycle.md
@@ -21,10 +21,39 @@ An Undici [Client](Client.md) can be best described as a state machine. The foll
   * At any point in time, the *destroy* event will transition the `Client` from the **processing** state to the **destroyed** state, destroying any queued requests.
 * The **destroyed** state is a final state and the `Client` is no longer functional.
 
-![A state diagram representing an Undici Client instance](../assets/lifecycle-diagram.png)
-
-> The diagram was generated using Mermaid.js Live Editor. Modify the state diagram [here](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBpZGxlXG4gICAgaWRsZSAtLT4gcGVuZGluZyA6IGNvbm5lY3RcbiAgICBpZGxlIC0tPiBkZXN0cm95ZWQgOiBkZXN0cm95L2Nsb3NlXG4gICAgXG4gICAgcGVuZGluZyAtLT4gaWRsZSA6IHRpbWVvdXRcbiAgICBwZW5kaW5nIC0tPiBkZXN0cm95ZWQgOiBkZXN0cm95XG5cbiAgICBzdGF0ZSBjbG9zZV9mb3JrIDw8Zm9yaz4-XG4gICAgcGVuZGluZyAtLT4gY2xvc2VfZm9yayA6IGNsb3NlXG4gICAgY2xvc2VfZm9yayAtLT4gcHJvY2Vzc2luZ1xuICAgIGNsb3NlX2ZvcmsgLS0-IGRlc3Ryb3llZFxuXG4gICAgcGVuZGluZyAtLT4gcHJvY2Vzc2luZyA6IHByb2Nlc3NcblxuICAgIHByb2Nlc3NpbmcgLS0-IHBlbmRpbmcgOiBrZWVwYWxpdmVcbiAgICBwcm9jZXNzaW5nIC0tPiBkZXN0cm95ZWQgOiBkb25lXG4gICAgcHJvY2Vzc2luZyAtLT4gZGVzdHJveWVkIDogZGVzdHJveVxuXG4gICAgc3RhdGUgcHJvY2Vzc2luZyB7XG4gICAgICAgIHJ1bm5pbmcgLS0-IGJ1c3kgOiBuZWVkRHJhaW5cbiAgICAgICAgYnVzeSAtLT4gcnVubmluZyA6IGRyYWluQ29tcGxldGVcbiAgICAgICAgcnVubmluZyAtLT4gWypdIDoga2VlcGFsaXZlXG4gICAgICAgIHJ1bm5pbmcgLS0-IGNsb3NpbmcgOiBjbG9zZVxuICAgICAgICBjbG9zaW5nIC0tPiBbKl0gOiBkb25lXG4gICAgICAgIFsqXSAtLT4gcnVubmluZ1xuICAgIH1cbiAgICAiLCJtZXJtYWlkIjp7InRoZW1lIjoiYmFzZSJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ)
-
+A state diagram representing an Undici Client instance:
+
+```mermaid
+stateDiagram-v2
+  [*] --> idle
+  idle --> pending : connect
+  idle --> destroyed : destroy/close
+  
+  pending --> idle : timeout
+  pending --> destroyed : destroy
+
+  state close_fork <<fork>>
+  pending --> close_fork : close
+  close_fork --> processing
+  close_fork --> destroyed
+
+  pending --> processing : process
+
+  processing --> pending : keepalive
+  processing --> destroyed : done
+  processing --> destroyed : destroy
+
+  destroyed --> [*]
+
+  state processing {
+      [*] --> running
+      running --> closing : close
+      running --> busy : needDrain
+      busy --> running : drainComplete
+      running --> [*] : keepalive
+      closing --> [*] : done
+  }
+```
 ## State details
 
 ### idle

diff --git a/docs/assets/lifecycle-diagram.png b/docs/assets/lifecycle-diagram.png
diff --git a/index.html b/index.html
@@ -8,8 +8,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
   <link rel="icon" type="image/png" href="https://nodejs.org/static/images/favicons/favicon.png" />
-  <style>
-  </style>
 </head>
 <body>
   <div id="app"></div>
@@ -30,5 +28,35 @@
   </script>
   <!-- Docsify v4 -->
   <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <script type="module">
+    import mermaid from "//cdn.jsdelivr.net/npm/mermaid@10.8.0/+esm";
+    mermaid.initialize({ startOnLoad: true });
+    window.mermaid = mermaid;
+  </script>
+  <script>
+    const plugin = (config) => (hook) => {
+      hook.afterEach((html, next) => {
+          const container = document.createElement('div');
+          container.innerHTML = html;
+
+          const elements = container.querySelectorAll('pre[data-lang=mermaid]')
+          for (const element of elements) {
+              const replacement = document.createElement('div');
+              replacement.textContent = element.textContent;
+              replacement.classList.add('mermaid');
+              element.parentNode.replaceChild(replacement, element);
+          }
+
+          next(container.innerHTML);
+      });
+
+      hook.doneEach(() => mermaid.run(config));
+    }
+
+    window.$docsify = window.$docsify || {};
+
+    window.$docsify.plugins = window.$docsify.plugins || []
+    window.$docsify.plugins.push(plugin(window.$docsify.mermaidConfig || { querySelector: ".mermaid" }));
+  </script>
 </body>
 </html>