Bring over Mermaid support from Cesium Native

Author: azrogers

Documentation/Assets/mermaid.min.js

@@ -283,7 +283,9 @@ TAB_SIZE               = 4
 # with the commands \{ and \} for these it is advised to use the version @{ and
 # @} or use a double escape (\\{ and \\})
 
-ALIASES                =
+ALIASES                = mermaid{1}="\htmlonly <div class=\"mermaid\"> \endhtmlonly \htmlinclude \"\1.mmd\" \htmlonly </div> \endhtmlonly" \
+                         mermaid-interactive{1}="\htmlonly <div class=\"mermaid interactive\"> \endhtmlonly \htmlinclude \"\1.mmd\" \htmlonly </div> \endhtmlonly" \
+                         svg-interactive{2}="\htmlonly <div class=\"svg interactive\" style=\"min-height: \2\"> \endhtmlonly \image html \"\1.svg\" \htmlonly </div> \endhtmlonly"
 
 # Set the OPTIMIZE_OUTPUT_FOR_C tag to YES if your project consists of C sources
 # only. Doxygen will then generate output that is more tailored for C. For
@@ -1077,7 +1079,7 @@ EXCLUDE_SYMBOLS        = CesiumMetadataConversions<*
 # that contain example code fragments that are included (see the \include
 # command).
 
-EXAMPLE_PATH           =
+EXAMPLE_PATH           = ./Documentation/Diagrams
 
 # If the value of the EXAMPLE_PATH tag contains directories, you can use the
 # EXAMPLE_PATTERNS tag to specify one or more wildcard pattern (like *.cpp and
@@ -1367,7 +1369,7 @@ HTML_HEADER            =
 # that doxygen normally uses.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-HTML_FOOTER            =
+HTML_FOOTER            = ./Documentation/footer.html
 
 # The HTML_STYLESHEET tag can be used to specify a user-defined cascading style
 # sheet that is used by each HTML page. It can be used to fine-tune the look of
@@ -1407,7 +1409,9 @@ HTML_EXTRA_STYLESHEET  = ./node_modules/doxygen-awesome-css/doxygen-awesome.css
 # files will be copied as-is; there are no commands or markers available.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-HTML_EXTRA_FILES       =
+HTML_EXTRA_FILES       = ./Documentation/Assets/mermaid.min.js \
+                         ./Documentation/Assets/mingcute.json.js \
+                         ./Documentation/Assets/panzoom.js
 
 # The HTML_COLORSTYLE tag can be used to specify if the generated HTML output
 # should be rendered with a dark or light theme.

Documentation/Assets/mingcute.json.js

@@ -56,4 +56,4 @@ There are detailed instructions for setting up a Cesium for Unreal development e
 - Run `npm install`
 - Run `npm run doxygen`
 
-The reference documentation will be written to `Documentation/Reference`.
+The reference documentation will be written to `Documentation/Reference`.

Documentation/Assets/panzoom.js

@@ -0,0 +1,79 @@
+<script type="text/javascript" src="$relpath^mermaid.min.js"></script>
+<script type="text/javascript" src="$relpath^mingcute.json.js"></script>
+<script type="text/javascript" src="$relpath^panzoom.js"></script>
+<script type="text/javascript">
+  let theme = "default";
+  // Detect browser dark mode and use dark theme for Mermaid if enabled
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = "dark";
+  }
+  mermaid.initialize({
+    theme: theme,
+    startOnLoad: true,
+    graph: {
+      useMaxWidth: true
+    }
+  });
+  mermaid.registerIconPacks([
+    {
+      name: "mingcute",
+      loader: () => window.mingcute
+    }
+  ]);
+  window.addEventListener("load", (ev) => {
+    document.querySelectorAll(".mermaid.interactive svg").forEach(svg => {
+      svg.parentElement.style.overflow = "hidden";
+      svg.parentElement.classList.add("pan-zoom-viewport");
+      panzoom(svg);
+    });
+    document.querySelectorAll(".svg.interactive object[type='image/svg+xml']").forEach(svg => {
+      // Make parent element the viewport
+      svg.parentElement.style.overflow = "hidden";
+      svg.parentElement.classList.add("pan-zoom-viewport");
+      svg.parentElement.style.minHeight = svg.parentElement.parentElement.style.minHeight;
+      panzoom(svg);
+    });
+  });
+</script>
+<style type="text/css">
+  .pan-zoom-viewport {
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    padding-bottom: 30px;
+  }
+
+  .pan-zoom-viewport::after {
+    content: "Drag to move, scroll to zoom";
+    color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    bottom: 5px;
+    right: 10px;
+  }
+
+  .pan-zoom-viewport svg {
+    min-height: 150px;
+  }
+</style>
+<!-- HTML footer for doxygen 1.9.1-->
+<!-- start footer part -->
+<!--BEGIN GENERATE_TREEVIEW-->
+<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
+  <ul>
+    $navpath
+    <li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer"
+          src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen" /></a> $doxygenversion </li>
+  </ul>
+</div>
+<!--END GENERATE_TREEVIEW-->
+<!--BEGIN !GENERATE_TREEVIEW-->
+<hr class="footer" />
+<address class="footer"><small>
+    $generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg"
+        width="104" height="31" alt="doxygen" /></a> $doxygenversion
+  </small></address>
+</div><!-- doc-content -->
+<!--END !GENERATE_TREEVIEW-->
+</body>
+
+</html>