Anqi CMS is an efficient and customizable enterprise-level content management system, committed to providing users with a simple yet powerful content management solution.In the daily operation of websites, we fully understand that the intuitiveness of content presentation is crucial for user understanding and retention.When facing complex business processes, system architectures, or operational steps, traditional text descriptions often appear lengthy and difficult to quickly grasp the core.At this moment, flowcharts as a graphical expression tool can greatly enhance the efficiency of information communication.The AnQi CMS combined with third-party tools can conveniently implement dynamic flowchart displays on web pages, adding a touch of professionalism and vitality to the website content.

To display web process diagrams in AnQi CMS, it is first necessary to ensure that the content editing environment supports Markdown syntax, as the process diagrams will be based on Markdown format.You can go to the 'Global Settings' section of the AnQi CMS backend, select the 'Content Settings' option, and check and enable the Markdown editor on this page.Once the Markdown editor is activated, you can use the flexibility of Markdown to define content when creating or editing any document, including flowcharts.

The dynamic rendering capability of web flow charts usually depends on specific JavaScript libraries.The template mechanism of AnQi CMS allows us to flexibly introduce these external resources.To display a flowchart defined based on text on a web page, we recommend integrating Mermaid.js.Mermaid.js is a popular open-source library that can convert concise Markdown-style text into SVG graphics, rendering attractive flowcharts on web pages.base.htmlThe file. In that file.<head>or<body>At the bottom of the tag, add the script to include the Mermaid.js library.

Specifically, inbase.htmlAdd the following code snippet to load and initialize Mermaid.js:

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

This script loads Mermaid.js via the ES module approach and callsmermaid.initialize({ startOnLoad: true })function.startOnLoad: trueThe parameter indicates that Mermaid automatically scans the page content after the page is fully loaded, looking for and rendering all chart code that conforms to the Mermaid syntax. Place this script near</body>The position of the end tag is helpful to avoid blocking the initial rendering of the page.

After successfully integrating Mermaid.js into your website template, you can directly write the definition of a flowchart in the Markdown editor of Aiqi CMS.graphKeywords start, followed by the layout direction of the chart (for example,LRmeans from left to right,TDIndicates from top to bottom), followed by the nodes that make up the flowchart and their interconnections.

For example, a typical Mermaid flowchart definition may look like this:

graph LR
    A[User Access] --> B(Submit Form)
    B --> C{Data Validation?}
    C -- 是 --> D[Save Data]
    C -- 否 --> E(Return Error)
    D --> F[Display Success Page]
    E --> B

You simply need to paste this Mermaid syntax directly into the Markdown editor area of the Anqi CMS document content.

On the front-end page, in order to ensure that these Mermaid flowcharts can be correctly parsed and displayed, we need to retrieve and render the document content through the template tags of the Safe CMS. Typically, the document content is stored inarchiveObjects'Contentfield in.archiveDetailtag to retrieve the detailed information of a single document. When the Markdown editor is enabled,archiveDetailtag in retrievingContentWhen content is entered, Markdown format content will be automatically converted to HTML.Therefore, in the template of your document detail page, the content display section should ensure that it can receive and safely render these HTML.

For example, in the template of the document detail page, you can use the following code to display the document content:

{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}{% endarchiveDetail %}

Here,render=trueThe parameter explicitly indicates that the system will render Markdown content as HTML,|safeThe filter is crucial, it tells the template engine that this HTML content is safe and does not require additional escaping, allowing Mermaid.js to correctly identify and process the SVG or Canvas rendering instructions for flowcharts.

By following these steps, you can not only efficiently manage your text content in the Anqi CMS, but also seamlessly integrate dynamic, visual flowcharts, greatly enhancing the expressiveness of the website content and the reading experience of users.As a website operator, making good use of these tools can give a significant advantage to your content strategy.

Common Questions and Answers (FAQ)

  • Q1: I have added Mermaid code in the content according to the steps and have included Mermaid.js in the template, but the flowchart still does not display. What is the reason for this?A: This situation usually requires the following investigation: First, please confirm that the Markdown editor function is explicitly enabled in the "Global Settings" under the "Content Settings" in the Aqijian CMS backend. Second, check your website template files (such asbase.htmlIn the code, is the CDN script link of Mermaid.js correct and accurate, as well as whether it is placed in a position that can be loaded and executed normally (recommended<body>Tag bottom). Finally, open the page containing the flowchart in a web browser, check the developer console for any JavaScript error reports, and ensure that the document content is displayed using{{archiveContent|safe}}This filter is used to prevent HTML content from being escaped twice, which causes Mermaid to fail to recognize chart definitions.

  • Q2: Can I directly download the Mermaid.js file to my local server for deployment, besides introducing it through CDN?A: Yes, absolutely. The CDN link provided in the documenthttps://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjsSet for convenience and fast integration./public/static/js/Then, you just need to modifybase.htmlThe template to include Mermaid.js<script>TagssrcSet the property, pointing to the path of your local Mermaid.js file.

  • Q3: Does Mermaid.js support other types of charts besides flowcharts? Can Anq CMS also display these charts?