doxygen-mermaid 🧜‍♀️

This is an example of how to include Mermaid graphs in doxygen documentation.

You can view the result at https://tttapa.github.io/doxygen-mermaid/Doxygen.

Step-by-step instructions

Add the Mermaid JavaScript code to the doxygen header and footer. Use the following command to generate the HTML files:

doxygen -w html header.html footer.html stylesheet.css

You can remove the stylesheet, we don't need it for this guide. Add the following script after the opening <body> tag in header.html

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

and add the following script before the closing </body> tag in footer.html. Feel free to change the theme.

<script>
  mermaid.initialize({
    startOnLoad: true,
    theme: 'base', 
    themeVariables: {
      primaryColor: '#f4f4ff',
      secondaryColor: 'rgba(244,244,255,0.9)',
      tertiaryColor: '#F9FAFC',
    },
  });
</script>

Make doxygen use the custom HTML header and footer by adding the following options to your Doxyfile:
```
HTML_HEADER = header.html
HTML_FOOTER = footer.html
```

Add a doxygen alias command for Mermaid graphs. Edit the ALIASES option in your Doxyfile to include:

ALIASES = mermaid{1}="@htmlonly <div class=\"mermaid\"> ^^ @endhtmlonly @htmlinclude \"\1.mmd\" @htmlonly ^^ </div> @endhtmlonly"

Add the graphs folder to your doxygen example path by editing the EXAMPLE_PATH option in your Doxyfile:
```
EXAMPLE_PATH = graphs
```
Add some Mermaid graph files with extension .mmd in the graphs folder.
Include the graphs somewhere in the documentation using the @mermaid command:
```
/**
 * @mermaid{filename}
 */
```
(With filename the filename of the graph without the .mmd extension.)

tttapa / doxygen-mermaid

doxygen-mermaid 🧜‍♀️

Step-by-step instructions

About

Languages