[FEATURE] Mermaid integration

[sanderblijlevens]

Overview of the feature

I would like to add mermaid diagrams to my documentation.

Motivation for or Use Case

Sometimes an images says more that a thousand words, that is why we would like to add mermaid diagrams to our documentation. Currently mermaid is not support by Compodoc while I think it is a nice feature a lot of people would benefit from.

Related issues

This feature is requested before in #600 and #1278 and @matteopini-horsa even showed how this could be implemented with a few lines of code (https://github.com/compodoc/compodoc/pull/1278/files). This example shows that is a small change which shouldn't break any features.

If there is any more work that needs to be done to merge this feature please let me know, I'm happy to do this work since we really love Compodoc!

[JoshJancula]

For everyone else waiting on this feature, here is a patch solution based on @matteopini-horsa's proposed changes

Step 1) create file patch-compodoc.js & add the code below

#!/usr/bin/env node
const fs = require('fs');

const compoMod = `${process.cwd()}/node_modules/@compodoc/compodoc`;
const updates = [
  { // filename 'index-cli-Cr-tk_1e.js' is unique to compodoc v1.1.24, this will need to be updated to reflect the correct path for whichever version you're on
    target: `${compoMod}/dist/index-cli-Cr-tk_1e.js`,
    search: `if (!language) {`,
    replace: `if (language === 'mermaid') {
      //  setting the mermaid css class will enable the diagram to be rendered
      return '<div class="mermaid">'+code+'</div>';
  }
  if (!language) {`,
  },
  {
    target: `${compoMod}/src/templates/page.hbs`,
    search: `<script src="{{relativeURL data.depth }}js/lazy-load-graphs.js"></script>`,
    replace: `<script src="{{relativeURL data.depth }}js/lazy-load-graphs.js"></script>
    <!-- loading mermaid library -->
   <script src=" 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'"></script>`,
  },
];

for (const update of updates) {
  const data = fs.readFileSync(update.target);
  const patched = data.toString().replace(update.search, update.replace);
  fs.writeFileSync(update.target, patched);
}
console.log('successfully patched compodoc');

Step 2) update your docs script to something like below

node ./patch-compodoc.js && npx @compodoc/compodoc -p tsconfig.json -s