Question: How to activate mermaid from chunk* file?

[MODUSCarstenScholling]

Hello,

I've been using the classic template before. To get mermaid working, I had overwritten scripts.tmpl.partial like this:

<script type="text/javascript" src="{{_rel}}styles/mermaid.min.js"></script>
<script>
	mermaid.initialize({startOnLoad: false});
	mermaid.init(undefined, ".lang-mermaid");
</script>

'''mermaid
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#00838F',
      'primaryTextColor': '#fff',
      'lineColor': '#A7ADB6'
    },
    "flowchart": {
      "htmlLabels": true,
      "curve": "linear" }
  }
}%%
flowchart TB
  ReportSelections("Report Selections")
  ReportConfiguration("Report Configuration")
  ReportSelections ==> ReportConfiguration
'''

With the modern template, the mermaid module is included in a chunk* file. Is there a way to tell docfx to activate it and handle the resulting <div class="mermaid">?

[yufeih]

mermaid diagrams are activated with pre code.lang-mermaid selector: https://github.com/dotnet/docfx/blob/main/templates/modern/src/markdown.ts#L41C54-L41C54

[MODUSCarstenScholling]

Yes, that works, thanks. But is there a way to force docfx to render a working

<pre>
  <code class="lang-mermaid">
 ...
  </code>
</pre>

instead of the current

<div class="mermaid">
 ...
</div>

from the markdown in the question?
Unfortunately the documentation on specials is somewhat limited...

[MODUSCarstenScholling]

The solution

If you use markdig and set the docfx.config to use feature diagram (build/markdownEngineProperties/markdigExtensions/diagrams, then a fenced code block with the mermaid language info will output a <div class='mermaid'> instead of a pre/code block.

If the diagram extension is removed, then the internal handling automatically activates the mermaid drawing by building a pre/code.lang-mermaid block.