Mermaid：用代码绘制专业图表的革命性工具

老柴杂货铺 2025-02-18

235

一、什么是 Mermaid

Mermaid 是一种基于 JavaScript 的图表绘制工具，它使用简单的文本语法来生成各种类型的图表，如流程图、甘特图、时序图、饼图等。无需复杂的绘图技能，只需掌握基本的语法规则，就能轻松创建出专业、美观的可视化图表。

二、Mermaid 的优势

语法简洁
：Mermaid 的语法非常简单，易于学习和使用。即使你没有任何编程经验，也能快速上手。

兼容性强
：它可以在多种环境中使用，包括网页、Markdown 文档、VS Code 等编辑器，甚至是一些在线文档平台。

可视化效果好
：生成的图表清晰、美观，能够直观地展示信息之间的关系和结构。

动态更新
：当数据发生变化时，只需修改文本内容，图表就能自动更新，无需手动重新绘制。

三、Mermaid 的应用场景

项目管理

使用甘特图来规划项目进度，明确任务的开始时间、结束时间和依赖关系，让项目管理更加高效。

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

软件开发
通过流程图来描述程序的逻辑结构和工作流程，帮助开发人员更好地理解和协作。
```
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```
3.知识分享
在博客、文档中插入 Mermaid 图表，使复杂的知识更加易懂，提升读者的阅读体验。

4.会议汇报

用饼图、柱状图等展示数据，让汇报更加直观、有说服力。

四、如何使用 Mermaid

（一）安装和配置

在支持 Mermaid 的环境中，如 VS Code，安装相应的插件即可开始使用。如果是在网页中使用，需要引入 Mermaid 的 JavaScript 库。

（二）Flask 集成 Mermaid

安装依赖
：首先确保你已经安装了 Flask，如果没有安装，可以使用pip install flask进行安装。同时，为了在 Flask 应用中使用 Mermaid，还需要引入 Mermaid 的相关库。在 HTML 文件中，通过<script>标签引入 Mermaid 的 JavaScript 文件，例如：


<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

创建 Flask 应用
：在 Python 文件中创建一个简单的 Flask 应用，例如：

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('mermaid.html')
if __name__ == '__main__':
    app.run(debug=True)

编写 HTML 模板
：创建一个名为mermaid.html的 HTML 模板文件，在其中编写 Mermaid 语法来生成图表。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Mermaid in Flask</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({startOnLoad: true});
    </script>
</head>
<body>
    <div class="mermaid">
        graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;
    </div>
</body>
</html>

运行应用
：运行 Flask 应用，在浏览器中访问http://127.0.0.1:5000/，即可看到生成的 Mermaid 图表。

（三）编写语法

根据想要创建的图表类型，编写相应的 Mermaid 语法。例如，创建一个简单的流程图：

（四）生成图表

完成语法编写后，保存文件或刷新页面，就能看到生成的图表啦。

Mermaid 为我们提供了一种全新的信息表达方式，让我们能够用更直观、更有趣的方式展示复杂的信息。无论你是职场人士、学生还是技术爱好者，都不妨试试 Mermaid，相信它会给你带来意想不到的惊喜。如果你在使用过程中有任何问题或心得，欢迎在评论区留言分享哦！

更多mermaid语法请参考官方文档：https://mermaid.js.org/intro/

图表工具脚本

文章转载自老柴杂货铺，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。