How to display web flowcharts in AnQi CMS?
AnQi CMS is a high-efficiency, 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 know that the intuitiveness of content presentation is crucial for user understanding and retention.Faced with complex business processes, system architectures, or operational steps, traditional text descriptions are often long-winded and difficult to quickly grasp the core.At this time, flowcharts, as a graphic expression tool, can greatly enhance the efficiency of information transmission.The Anqi CMS combined with third-party tools can conveniently display dynamic flowcharts on web pages, adding a touch of professionalism and vitality to the website content.
To implement the display of web flowcharts in Anqi CMS, it is first necessary to ensure that the content editing environment supports Markdown syntax, as the writing of flowcharts will be based on Markdown format.You can go to the "Global Settings" in the AnQi CMS background, 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 while creating or editing any document, including flowcharts.
The dynamic rendering capability of web flowcharts usually depends on specific JavaScript libraries.The Anqi CMS template mechanism allows us to flexibly introduce these external resources.We recommend integrating Mermaid.js to display text-defined flowcharts on the web.Mermaid.js is a widely popular open-source library that can convert concise Markdown-style text into SVG graphics, thus rendering beautiful flowcharts on web pages.You need to modify the website template file, usually namedbase.htmlfile. In the file.<head>or<body>At the bottom of the tag, add the script to import 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 using the ES module method and callsmermaid.initialize({ startOnLoad: true })Function.startOnLoad: trueThe parameter indicates that Mermaid automatically scans the page content after it is fully loaded, searching for and rendering all chart code that conforms to the Mermaid syntax. Place this script near</body>The position of the closing tag, which helps prevent blocking the initial rendering of the page.
After Mermaid.js is successfully integrated into your website template, you can directly write the definition of the flowchart in the Anqicms Markdown editor.The syntax of Mermaid flowcharts starts withgraphThe keyword starts, followed by the layout direction of the chart (for exampleLRindicating from left to right,TDThe representation from top to bottom, followed by the individual nodes and their connections that make up the flowchart.
For example, a typical Mermaid flowchart definition may look like this:
graph LR
A[User access] --> B(Submit form)
B --> C{Data validation?}
C -- Yes --> D[Save data]
C -- No --> E(Return error)
D --> F[Display success page]
E --> B
You just need to paste this Mermaid syntax directly into the Markdown editor area of the Anqi CMS document.
On the front-end page, 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 Anqi CMS. Usually, the document content is stored inarchivethe object'sContentin the field.archiveDetailThe tag is used to obtain detailed information about a single document. When the Markdown editor is enabled, archiveDetailtags are being retrievedContentWhen content is present, it will automatically convert Markdown formatted content to HTML.Therefore, the part of the document detail page template should ensure that it can receive and safely render this HTML.
For example, in the document detail page template, 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, and|safeThe filter is crucial, it tells the template engine that this HTML content is safe, does not require additional escaping, and thus allows 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 Anqi CMS, but also seamlessly integrate dynamic, visual flowcharts, greatly enhancing the expression of website content and the reading experience of users.As a website operator, making good use of these tools will bring significant advantages to your content strategy.
Frequently Asked Questions (FAQ)
Q1: I have followed the steps to add Mermaid code to the content and included Mermaid.js in the template, but the flowchart still does not display. What could be the reason?A: This situation usually requires the following investigation: First, please confirm that the Markdown editor function is explicitly enabled in the "Global Settings" of the Anqie CMS backend. Second, check your website template files (such as
base.html）In, is the CDN script link of Mermaid.js correct and has it been placed in a position that can be loaded and executed normally（recommended<body>The label at the bottom). Finally, open the page containing the flowchart in the browser, check the developer console for any JavaScript error reports, and ensure that the document content is displayed using{{archiveContent|safe}}This filter avoids double escaping of HTML content, causing Mermaid to fail to recognize chart definitions.Q2: Can I directly download the Mermaid.js file to my local server for deployment instead of using CDN?A: Yes, absolutely. The CDN link provided in the document
https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjsSet for convenience and quick integration. If you have a need for localized deployment, you can download the corresponding JavaScript file from the official Mermaid.js channel and place it in the static resource directory of your security CMS website, for example/public/static/js/. Then, you just need to modifybase.htmlThe template to include Mermaid.js's<script>label'ssrcThe property should point to the local Mermaid.js file path.Q3: Does Mermaid.js support other types of charts besides flowcharts? Can Anqi CMS also display these charts?A: Yes, Mermaid.js is a powerful chart drawing library that supports various types of charts such as flowchart, sequence diagram, gantt chart, class diagram, and state diagram.If you write the code for these charts in the AnqiCMS Markdown editor according to the syntax provided by the official Mermaid.js documentation, and the Mermaid.js library is correctly introduced and initialized in the front-end of the website, AnqiCMS can display these different types of charts in graphic form on the web page through its Markdown rendering mechanism.The Anqi CMS does not impose any additional restrictions on the chart types supported by Mermaid, and its display capabilities depend directly on the functionality of the Mermaid.js library.