doc: Add mermaid diagram support to Doxygen config

Part-of: <https://gitlab.freedesktop.org/monado/monado/-/merge_requests/2300>

doc/Doxyfile.in

···
 
 
 IMAGE_PATH             = @SRCDIR@/doc
+EXAMPLE_PATH           = @SRCDIR@/doc/mermaid
 
 USE_MDFILE_AS_MAINPAGE = @SRCDIR@/doc/mainpage.md
 
···
 ALIASES                += TODO=todo
 ALIASES                += ep{1}="<b>\1</b>. \xrefitem entrypoints \"OpenXR Entry Point\" \"OpenXR Entry Points\" \1"
 ALIASES                += obj{1}="\xrefitem objects \"OpenXR Object\" \"OpenXR Objects\" \1"
+ALIASES                += mermaid{1}="@htmlonly <div class=\"mermaid\"> ^^ @endhtmlonly @htmlinclude \"\1.mmd\" @htmlonly ^^ </div> @endhtmlonly"
 
 SHOW_GROUPED_MEMB_INC  = YES
 STRIP_CODE_COMMENTS    = NO
···
 FULL_SIDEBAR           = NO
 HTML_COLORSTYLE        = LIGHT # required with Doxygen >= 1.9.5
 HTML_HEADER            = @SRCDIR@/doc/header.html
+HTML_FOOTER            = @SRCDIR@/doc/footer.html
 HTML_EXTRA_STYLESHEET  = @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome.css
 HTML_EXTRA_FILES       = @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-darkmode-toggle.js \
                          @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-fragment-copy-button.js \
                          @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-paragraph-link.js \
                          @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-interactive-toc.js \
-                         @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-tabs.js
+                         @SRCDIR@/doc/doxygen-awesome-css/doxygen-awesome-tabs.js \
+                         @SRCDIR@/src/external/mermaid/mermaid.min.js

doc/footer.html

···
+<!--
+Copyright 2024, Collabora, Ltd.
+SPDX-License-Identifier: BSL-1.0
+-->
+<!--
+Generated by `doxygen -w header.html footer.html ignored.css` command and
+then modified based on https://github.com/tttapa/doxygen-mermaid
+-->
+<!-- HTML footer for doxygen 1.9.4-->
+<!-- start footer part -->
+<script>
+  mermaid.initialize({
+    startOnLoad: true,
+    theme: 'dark',
+    /* themeVariables: {
+      primaryColor: '#f4f4ff',
+      secondaryColor: 'rgba(244,244,255,0.9)',
+      tertiaryColor: '#F9FAFC',
+    },*/
+  });
+</script>
+<!--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>
+<!--END !GENERATE_TREEVIEW-->
+</body>
+</html>

doc/header.html

···
 -->
 
 <!--
-Generated by `doxygen -w header.html ignored.html ignored.css`command and
-then modified based on doxygen-awesome header.html file
+Generated by `doxygen -w header.html ignored.html ignored.css` command and
+then modified based on doxygen-awesome header.html file as well as
+https://github.com/tttapa/doxygen-mermaid
 -->
 
 <!-- HTML header for doxygen 1.9.4-->
···
 <script type="text/javascript" src="$relpath^doxygen-awesome-interactive-toc.js"></script>
 <script type="text/javascript" src="$relpath^doxygen-awesome-tabs.js"></script>
 <script type="text/javascript" src="$relpath^toggle-alternative-theme.js"></script>
+<script type="text/javascript" src="$relpath^mermaid.min.js"></script>
 <script type="text/javascript">
     DoxygenAwesomeFragmentCopyButton.init()
     DoxygenAwesomeDarkModeToggle.init()