base.htmlof<head>Part, add a specific Mermaid JavaScript reference.If this code is missing, or if the path to this code is incorrect or fails to load, then your Mermaid diagram will not be recognized and drawn by the browser.

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

Another important reason is the settings of the content editor.AnQi CMS supports Markdown editor, and Mermaid flowcharts are usually written in inline code blocks within Markdown content.If your document is being edited in the background and the Markdown editor is not enabled, the system may not recognize the Mermaid text code as a diagram but will output it as plain text.You need to go to the AnQiCMS background "Global Settings" -> "Content Settings" to confirm that the Markdown editor option is checked and saved.Only when the Markdown editor is enabled, the system will parse and convert the Markdown syntax in the content (including Mermaid code blocks).

Moreover, syntax errors in the Mermaid code itself may also cause the diagram to not display.Even if you correctly introduce the JavaScript library and enable the Markdown editor, if there are syntax errors inside the Mermaid code block, such as missing necessary symbols, incorrect connectors, or incomplete structure, then the Mermaid library will fail when trying to parse it.In this case, the browser console (usually opened by pressing F12) may display JavaScript errors.It is recommended that you use an online Mermaid editor (such as Mermaid Live Editor) to validate your Mermaid code before rendering, to exclude any issues with the code itself.

The website cache may also be an interference factor. After changing the configuration or template files of AnQiCMS, especially when modifyingbase.htmlAfter such a core template file, old cache data may cause the front-end page to not update in time.At this time, you need to go to the AnQiCMS backend, find the "Update Cache" feature, manually clear the website cache, and it is recommended to clear the local cache of your browser, then re-access the page to see the effect.

Finally, potential conflicts with browser environments and other scripts on the page may occasionally affect the rendering of Mermaid.Some browser extensions or other JavaScript libraries loaded on the page may inadvertently interfere with the normal operation of the Mermaid library.Although this situation is relatively rare, if the aforementioned methods fail to solve the problem, you can try testing in different browsers or temporarily disabling some browser extensions to troubleshoot.Check the browser console for network requests, ensure that Mermaid's CDN resources are loaded successfully and are not blocked or failed due to network issues.

Frequently Asked Questions

1. Where can I find and editbase.htmlHow to add Mermaid script to the file?

You can find the template management in the "Template Design" area of the AnQiCMS backend. Under the currently enabled template directory, there is usually a folder namedbase.html(or a similar general layout file) file. You can directly modify it through the background online editing function and paste the Mermaid JavaScript script into<head>The label inside. Please note that modifying the template file directly should be done with caution, it is recommended to back up the relevant files before making changes.

How to confirm that the AnQiCMS Markdown editor is enabled?

3. My Mermaid code works normally in the online editor, but it still does not display on the AnQiCMS page, what should I do?

If the Mermaid code itself is not problematic, the issue may be with the loading or execution of the Mermaid JavaScript library. First, please check again.base.htmlIs the path of the Mermaid script included correctly, ensure there are no spelling mistakes.Next, open the browser's developer tools (usually press F12), switch to the "Console" (console) and "Network" (network) panels.mermaid.esm.min.mjs