doxygen-mermaid
doxygen-mermaid copied to clipboard
Published
20 hours ago •
tttapa
tttapa
Include Mermaid graphs in doxygen documentation
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:
You can remove the stylesheet, we don't need it for this guide. Add the following script after the openingdoxygen -w html header.html footer.html stylesheet.css<body>tag inheader.html
and add the following script before the closing<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script></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
ALIASESoption in your Doxyfile to include:ALIASES = mermaid{1}="@htmlonly <div class=\"mermaid\"> ^^ @endhtmlonly @htmlinclude \"\1.mmd\" @htmlonly ^^ </div> @endhtmlonly" - Add the
graphsfolder to your doxygen example path by editing theEXAMPLE_PATHoption in yourDoxyfile:EXAMPLE_PATH = graphs - Add some Mermaid graph files with extension
.mmdin thegraphsfolder. - Include the graphs somewhere in the documentation using the
@mermaidcommand:
(With/** * @mermaid{filename} */filenamethe filename of the graph without the.mmdextension.)
tttapa