In AnQi CMS, the Markdown editor brings great flexibility to content creation, and when we need to embed dynamic and intuitive charts such as flowcharts and sequence diagrams in articles, Mermaid is undoubtedly a powerful tool to enhance the expression of content.How can I elegantly embed Mermaid flowcharts in the Markdown content of Anqi CMS and ensure that they display normally on the front-end page?This is actually a process that extends the background editing capability to the front-end rendering, and the entire configuration process is very intuitive.

第一步：Ensure the security CMS Markdown editor is enabled

At the initial design of Anqi CMS, modern content management needs were considered, and built-in support for Markdown was included.To make the Mermaid flowchart recognizable and renderable, you first need to confirm that your security CMS backend has enabled the Markdown editor.

This is usually inBackground -> Global Settings -> Content SettingsConfigure in progress.Find the relevant options, select or ensure that the Markdown editor is enabled.Once enabled, you will enjoy the convenience of Markdown while editing articles, including features such as inserting code blocks, lists, links, and of course, the specific code block syntax required by Mermaid.

第二步：Write Mermaid flowchart code in the content

Mermaid charts are generated based on a specific text syntax.After enabling the Markdown editor, you can insert Mermaid code in the content field of any article, single page, or custom content model in the form of a Markdown code block.mermaid.

For example, a simple Mermaid flowchart code might look like this:

graph LR
    A[Start] --> B(Processing);
    B --> C{Condition Judgment?};
    C -- 是 --> D[Operation 1];
    C -- 否 --> E[Operation 2];
    D --> F[End];
    E --> F;

When you insert this code into the content editor, the Markdown renderer of the AnQi CMS will identify this special code block in the background and convert it to the corresponding HTML structure.However, simply converting to HTML is not enough to display exquisite flowcharts in the browser, because the final rendering of Mermaid charts requires the use of a client-side JavaScript library.

Third step: Configure the front-end template to support Mermaid rendering

This is the most critical step to implement Mermaid flowchart display on the front-end. Although Anqi CMS can handle Markdown and generate HTML, the JavaScript library of Mermaid itself needs to be introduced to your website's front-end page in order to display those withmermaidThe marked HTML elements are dynamically converted into visual charts.

You need to modify the template file used by the current website, which is usually the public header file of the website, for examplebase.htmlorbash.htmlThese files are inherited by all pages, ensuring that the Mermaid library loads on all pages that may contain flowcharts.

The specific steps are:

  1. Log in to the AQ CMS backend, navigate toTemplate Design -> Template Management.

  2. Find the template you are currently using (there will usually be a 'In Use' mark).

  3. Click on the template name to enter details, then find and editbase.htmlorbash.htmlFile. These files typically define the<head>region and common structures.

  4. In<head>at the bottom of the</head>tag before the tag is closed, insert the following JavaScript code snippet:

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

    This code includes the Mermaid library via CDN and bymermaid.initialize({ startOnLoad: true });指示Mermaid在页面加载完成后自动扫描并渲染所有带有Mermaid标记的代码块。

  5. 保存您对模板文件的修改。

验证与优化

If the chart does not display or there are error messages in the browser console, you can perform the following checks:

  • Check the syntax of the Markdown code block:Ensure Mermaid code is strictly enclosed inmermaid` 和between.
  • Check JavaScript inclusion:Confirmbase.htmlIn the template file, the Mermaid introduction code is correct, and the network connection is normal, the CDN resources can be loaded.
  • Clear cache:Click in the Anqi CMS backendUpdate the cache，Sometimes browser cache also needs to be cleared manually.
  • Mermaid version:The Mermaid version specified in the CDN link (}]@10) May be updated over time. If you encounter compatibility issues, you can try to check the official Mermaid documentation, update to the latest stable version.

Through such configuration, the CMS not only helps you efficiently manage content, but also leverages the powerful capabilities of Mermaid to present complex logic and processes in a直观可视化的way to your readers, greatly enhancing the reading experience and understanding efficiency of the content.

Common Questions and Answers (FAQ)

1.Why is the flowchart not displayed on the front-end page even though I have enabled Markdown editor and inserted Mermaid code in the background?

This is usually because you forget to include the Mermaid JavaScript rendering library in the website's frontend template.The Markdown editor of AnQi CMS can recognize and process Mermaid code blocks, but it only converts them into a specific HTML structure.base.htmlIn or similar public template files, manually add the CDN link and initialization code for the Mermaid library.Please refer to the section "Configure the front-end template to support Mermaid rendering" in the article for the operation.

2. Can I insert HTML instead of Mermaid flowcharts directly in the Markdown editor? For example, using SVG code.

Theoretically, Markdown editors can directly display SVG or plain HTML elements after rendering to HTML.However, drawing flowcharts directly with SVG or complex HTML can be very cumbersome and difficult to maintain.Mermaid's advantage lies in its concise text syntax, allowing you to quickly generate complex charts as if you were writing code, and then the JavaScript library automatically converts them into beautiful SVG images.If you pursue efficiency and maintainability, Mermaid is a better choice.For simple static HTML content, directly inserting HTML is feasible, but for dynamic charts, using Mermaid with a JavaScript library is the correct solution.

3. Does Mermaid support dynamic data, such as reading data from a database to generate charts?

Mermaid itself is a client-side rendering JavaScript library that generates charts based on the static text syntax you provide in Markdown. This means that itnot directly supported