安企CMS作为一款高效、可定制的企业级内容管理系统，致力于为用户提供简洁而强大的内容管理解决方案。在日常网站运营中，我们深知内容呈现的直观性对于用户理解和留存至关重要。面对复杂的业务流程、系统架构或操作步骤，传统的文字描述往往显得冗长且难以快速把握核心。此时，流程图作为一种图形化表达工具，能够极大地提升信息的传达效率。安企CMS结合第三方工具，能够方便地在网页中实现流程图的动态显示，为网站内容增添一份专业与活力。
在安企CMS中实现网页流程图的显示，首先需要确保内容编辑环境支持Markdown语法，因为流程图的编写将基于Markdown格式。您可以前往安企CMS后台的“全局设置”，选择“内容设置”选项，在此页面检查并启用Markdown编辑器。一旦Markdown编辑器被激活，您在创建或编辑任何文档时，就能够利用Markdown的灵活性来定义内容，包括流程图。
网页流程图的动态渲染能力通常依赖于特定的JavaScript库。安企CMS的模板机制允许我们灵活地引入这些外部资源。为了在网页上展示基于文本定义的流程图，我们推荐集成Mermaid.js。Mermaid.js是一个广受欢迎的开源库，它能够将简洁的Markdown风格文本转换为SVG图形，从而在网页上渲染出美观的流程图。您需要修改网站的模板文件，通常是名为 base.html 的文件。在该文件的 <head> 或 <body> 标签的底部，添加引入Mermaid.js库的脚本。
具体来说，在 base.html 中添加如下代码片段，用于加载和初始化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>
这段脚本通过ES模块的方式加载Mermaid.js，并调用mermaid.initialize({ startOnLoad: true })函数。startOnLoad: true参数指示Mermaid在页面完全加载后自动扫描页面内容，寻找并渲染所有符合Mermaid语法的图表代码。将此脚本放置在靠近</body>结束标签的位置，有助于避免阻塞页面的初始渲染。
当Mermaid.js成功集成到您的网站模板后，您便可以在安企CMS的Markdown编辑器中直接编写流程图的定义。Mermaid流程图的语法以graph关键字作为起始，紧随其后的是图表的布局方向（例如LR表示从左到右，TD表示从上到下），然后是构成流程图的各个节点和它们之间的连接关系。
例如，一个典型的Mermaid流程图定义可能如下所示：
graph LR
A[用户访问] --> B(提交表单)
B --> C{数据校验?}
C -- 是 --> D[保存数据]
C -- 否 --> E(返回错误)
D --> F[显示成功页面]
E --> B
您只需将这段Mermaid语法直接粘贴到安企CMS文档内容的Markdown编辑器区域即可。
在前端页面上，为了确保这些Mermaid流程图能够被正确地解析和显示，我们需要通过安企CMS的模板标签来获取并渲染文档内容。通常，文档内容存储在 archive 对象的 Content 字段中。archiveDetail 标签用于获取单个文档的详细信息。当Markdown编辑器处于启用状态时，archiveDetail 标签在获取 Content 内容时，会自动将Markdown格式的内容转换为HTML。因此，在您的文档详情页模板中，显示内容的部分应确保能够接收并安全地渲染这些HTML。
例如，在文档详情页的模板中，您可以使用以下代码来显示文档内容：
{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}{% endarchiveDetail %}
在这里，render=true 参数明确指示系统将Markdown内容渲染为HTML，而 |safe 过滤器则至关重要，它告诉模板引擎此HTML内容是安全的，不需要进行额外的转义，从而允许Mermaid.js正确识别并处理流程图的SVG或Canvas渲染指令。
通过以上步骤，您不仅能够在安企CMS中高效地管理您的文本内容，还能够无缝集成动态、可视化的流程图，极大地提升网站内容的表现力和用户的阅读体验。作为网站运营人员，利用好这些工具，将能为您的内容策略带来显著的优势。
常见问题解答 (FAQ)
Q1: 我已经按照步骤在内容中添加了Mermaid代码，并在模板中引入了Mermaid.js，但流程图仍然没有显示出来，这是什么原因？ A: 出现这种情况，通常需要进行以下排查：首先，请确认安企CMS后台“全局设置”中的“内容设置”里，Markdown编辑器功能是否已明确启用。其次，检查您的网站模板文件（如
base.html）中，Mermaid.js的CDN脚本链接是否正确无误，以及它是否被放置在能正常加载并执行的位置（建议<body>标签底部）。最后，在浏览器中打开包含流程图的页面，检查开发者工具的控制台是否有JavaScript错误报告，并确保在显示文档内容时，使用了{{archiveContent|safe}}这样的过滤器来避免HTML内容被二次转义，导致Mermaid无法识别图表定义。Q2: 除了通过CDN引入Mermaid.js，我可以直接将Mermaid.js文件下载到本地服务器部署吗？ A: 是的，完全可以。文档中提供的CDN链接
https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs仅为方便快速集成而设。如果您有本地化部署的需求，可以从Mermaid.js的官方渠道下载相应的JavaScript文件，并将其放置到您的安企CMS网站的静态资源目录中，例如/public/static/js/。然后，您只需修改base.html模板中引入Mermaid.js的<script>标签的src属性，使其指向您本地的Mermaid.js文件路径即可。Q3: Mermaid.js除了流程图，还支持其他类型的图表吗？安企CMS是否也能够显示这些图表？ A: 是的，Mermaid.js是一个功能强大的图表绘制库，除了流程图（flowchart），它还支持时序图（sequence diagram）、甘特图（gantt chart）、类图（class diagram）、状态图（state diagram）等多种类型的图表。只要您在安企CMS的Markdown编辑器中，按照Mermaid.js官方文档提供的语法编写这些图表的代码，并且Mermaid.js库已正确地在网站前端被引入并初始化，安企CMS就能够通过其Markdown渲染机制，将这些不同类型的图表在网页上以图形形式展现出来。安企CMS本身不对Mermaid支持的图表类型做额外限制，其展示能力直接取决于Mermaid.js库的功能。