当前位置：首页 > news >正文

《AI大模型趣味实战》第10集：开发一个基于Mermaid的AI绘图网站

news 2025/9/15 12:08:52

《AI大模型趣味实战》第10集：开发一个基于Mermaid的AI绘图网站

抱歉不按顺序出牌，先出一个第10集，第1到第9集慢慢来，后续也不会按顺序，总之凑满36集，可能或补充12集。
AI大模型趣味实战专栏所有36个主题预告，请阅读预告篇
https://blog.csdn.net/yweng18/article/details/145838940

主题：用AI生成流程图、架构图等

在现代软件开发和系统设计中，流程图、架构图、时序图等图表工具是不可或缺的。然而，手动绘制这些图表往往耗时且繁琐。本文将带你了解如何结合 Mermaid 和 AI大模型，开发一个能够根据自然语言描述自动生成图表的 Web 应用，并将其集成到 Flask 框架中。最终，我们还将实现导出功能，支持用户下载 SVG 格式的图表。

废话不多说，先上系统实际运行截图

在这里插入图片描述

全部源代码如下，两个文件，注意，要先下载 ollama并启动运行，作为本地大模型资源为系统提供AI生成接口，至少下载一个ollama大模型，我用的是 qwen2.5:latest 版本，ollama 不知道怎么部署的请自行搜索：

main.py, 主程序文件
./templates/index.html 新建一个templates文件夹，放置前端页面

建议通过 python -m venv merimaid_ai 创建虚拟环境，请在bash或cmd窗口中安装以下依赖模块：

演示程序的 python 版本：3.11.5

#安装 flask 框架
pip install flask
#运行主程序
# 必须先启动ollama并下载一个大模型，7B左右的规格就行，glm4 9B规格，qwen2.5 7B规格都可以
#不本地部署，直接调用 大模型 API 也可以，修改一下 generate_mermaid_code(prompt) 函数方法的代码即可。
python main.py

main.py 主程序文件源代码

from flask import Flask, request, render_template
import requestsapp = Flask(__name__)# 假设你有一个大模型 API 的访问函数
def generate_mermaid_code(prompt):#对prompt进行处理prompt = '''请根据以下用户需求,请生成并返回Mermaid语句:{prompt}.具体格式要求如下：#1  根据用户意图,生成合适的Mermaid语法#2. 只生成Mermaid语法,不要生成任何其他内容#3. 如果用户需求不明确,请返回一个带有单个文字框的Mermaid语法,文字框内容为"用户需求不明确，请重新输入"#4. 如果用户需求明确,请返回Mermaid语法#5. 如果用户需求是绘制甘特图，请生成英文版的Mermaid语句。''' + prompt# 调用本地 Ollama 模型 APIresponse = requests.post('http://localhost:11434/api/generate', json={#"model": "glm4:latest","model": "qwen2.5:latest",             "prompt": prompt,"stream": False # 设置为False，确保返回完整的响应})# 检查响应状态if response.status_code == 200:# 假设返回的 JSON 中有一个 'text' 字段包含生成的 Mermaid 代码#mermaid_code = response.json().get('text', '')mermaid_code = response.json()['response'].replace('```mermaid', '').replace('```', '')print(mermaid_code)else:mermaid_code = "生成失败，请重试。"return mermaid_code@app.route('/', methods=['GET', 'POST'])
def index():mermaid_code = ""  # 初始化 mermaid_codeis_generated = False  # 初始化生成状态if request.method == 'POST':user_input = request.form['user_input']# 调用大模型生成 Mermaid 语法mermaid_code = generate_mermaid_code(user_input)if mermaid_code:  # 如果生成成功is_generated = Truereturn render_template('index.html', mermaid_code=mermaid_code, is_generated=is_generated)if __name__ == '__main__':app.run(debug=True)

./templates/index.html 前端页面源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mermaid图形生成器</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script>mermaid.initialize({startOnLoad:true});</script><style>body {display: flex;height: 100vh;background: #004d00; /* 墨绿色背景 */color: white;font-family: Arial, sans-serif;}.left-panel {width: 20%; /* 左侧占 20% */padding: 20px; /* 添加内边距 */display: flex;flex-direction: column; /* 垂直排列 */justify-content: flex-start; /* 顶部对齐 */background: #0ca00c; /* 白色背景 */}.right-panel {width: 80%; /* 右侧占 80% */padding: 20px; /* 添加内边距 */display: flex;flex-direction: column; /* 垂直排列 */align-items: center; /* 水平居中对齐 */background: #f0d47a; /* 白色背景 */}.mermaid {background: rgba(255, 255, 255, 0.1);padding: 20px;border-radius: 10px;width: 100%; /* 适应右侧宽度 */max-height: 400px; /* 设置最大高度 */overflow-y: auto; /* 允许垂直滚动 */}#mermaid_output {width: 100%; /* 设置输出框的宽度 */height: 100px; /* 设置输出框的高度 */background: rgb(206, 228, 109); /* 设置背景 */color: rgb(24, 7, 7); /* 设置文本颜色 */border: none; /* 去掉边框 */border-radius: 5px; /* 圆角 */padding: 10px; /* 内边距 */margin-top: 10px; /* 添加上边距 */}#download_button {margin-top: 10px; /* 添加上边距 */}h1 {width: 100%; /* 使标题占据整行 */text-align: left; /* 左对齐 */margin: 0; /* 去掉默认的外边距 */}   </style><script>function clearInput() {document.getElementById('user_input').value = '';document.getElementById('mermaid_output').value = '';document.getElementById('download_button').disabled = true; // 禁用下载按钮}function enableDownloadButton() {document.getElementById('download_button').disabled = false; // 启用下载按钮}function downloadImage() {const mermaidCode = document.getElementById('mermaid_output').value;const svgElement = document.querySelector('.mermaid svg');const serializer = new XMLSerializer();const svgString = serializer.serializeToString(svgElement);const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'mermaid_diagram.svg'; // 设置下载文件名document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url); // 释放 URL 对象}</script>
</head>
<body><div class="left-panel"><h1>Mermaid-AI</h1><br><h1>图形生成器</h1><br>   <form method="POST"><label for="user_input">请输入你的绘图需求（点击右下区域文字标签可以快速复制需求样本）：</label><br><textarea id="user_input" name="user_input" style="width: 100%;height: 100px; resize:none;"></textarea><br><br><div><br><input type="submit" value="生成Mermaid图形" style="width: 100%;height: 68px;" color="black" margin="10px"><button type="button" onclick="clearInput()" style="width: 100%;height: 68px; margin-top: 10px;">清空</button><button type="button" id="download_button"  style="width: 100%;height: 68px; margin-top: 10px;" onclick="downloadImage()" style="width: 100%;height: 68px;">下载图片</button> <!-- 新增的下载按钮 --></div><label for="mermaid_output">生成的Mermaid语句:</label><br><textarea id="mermaid_output" readonly style="width: 100%; height: 250px;">{{ mermaid_code|safe }}</textarea> <!-- 新增的文本框 --></form>     </div><div class="right-panel"><h2 style="color: rgb(24, 18, 18);">生成的Mermaid图形:</h2><br><div class="mermaid" style="width: 100%; height: 100%;">{{ mermaid_code|safe }}</div><div><h3 style="color: rgb(24, 18, 18);">示例需求:</h3><span onclick="document.getElementById('user_input').value='我需要一个流程图来表示用户登录系统的过程。首先用户输入用户名和密码，然后系统验证信息是否正确。如果正确，显示欢迎页面；如果不正确，提示重新输入。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">我需要一个流程图来表示用户登录系统的过程。首先用户输入用户名和密码，然后系统验证信息是否正确。如果正确，显示欢迎页面；如果不正确，提示重新输入。</span><span onclick="document.getElementById('user_input').value='绘制一个流程图，展示在线购物的步骤：用户浏览商品 -> 添加到购物车 -> 确认订单 -> 选择支付方式 -> 完成支付 -> 显示订单成功页面。';" style="cursor: pointer; color:    rgb(24, 18, 18); text-decoration: underline; display: block;">绘制一个流程图，展示在线购物的步骤：用户浏览商品 -> 添加到购物车 -> 确认订单 -> 选择支付方式 -> 完成支付 -> 显示订单成功页面。</span><span onclick="document.getElementById('user_input').value='创建一个流程图，表示学生选课的过程：学生登录系统 -> 浏览课程列表 -> 选择课程 -> 提交选课申请 -> 系统确认选课结果 -> 显示选课成功或失败。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">创建一个流程图，表示学生选课的过程：学生登录系统 -> 浏览课程列表 -> 选择课程 -> 提交选课申请 -> 系统确认选课结果 -> 显示选课成功或失败。</span><span onclick="document.getElementById('user_input').value='我需要一个流程图，表示文件上传的逻辑：用户选择文件 -> 检查文件格式是否正确 -> 如果正确，上传文件；如果不正确，提示错误并重新选择文件。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">我需要一个流程图，表示文件上传的逻辑：用户选择文件 -> 检查文件格式是否正确 -> 如果正确，上传文件；如果不正确，提示错误并重新选择文件。</span><span onclick="document.getElementById('user_input').value='绘制一个流程图，表示审批流程：员工提交请假申请 -> 主管审核 -> 如果通过，通知 HR 部门；如果不通过，通知员工修改申请。';" style="cursor: pointer; color:  rgb(24, 18, 18); text-decoration: underline; display: block;">绘制一个流程图，表示审批流程：员工提交请假申请 -> 主管审核 -> 如果通过，通知 HR 部门；如果不通过，通知员工修改申请。</span><span onclick="document.getElementById('user_input').value='我需要一个时序图，展示用户与银行系统的交互过程：用户发起转账请求 -> 系统验证账户余额 -> 如果余额充足，执行转账操作；否则，返回余额不足的提示';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">我需要一个时序图，展示用户与银行系统的交互过程：用户发起转账请求 -> 系统验证账户余额 -> 如果余额充足，执行转账操作；否则，返回余额不足的提示</span><span onclick="document.getElementById('user_input').value='创建一个时序图，表示在线客服系统的对话流程：用户发送问题 -> 系统接收问题并分配给客服 -> 客服回复问题 -> 用户收到回复。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">创建一个时序图，表示在线客服系统的对话流程：用户发送问题 -> 系统接收问题并分配给客服 -> 客服回复问题 -> 用户收到回复。</span><span onclick="document.getElementById('user_input').value='绘制一个时序图，表示 API 调用的交互：客户端发送 HTTP 请求 -> 服务器接收请求并处理 -> 返回 JSON 数据 -> 客户端解析数据并显示结果。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">绘制一个时序图，表示 API 调用的交互：客户端发送 HTTP 请求 -> 服务器接收请求并处理 -> 返回 JSON 数据 -> 客户端解析数据并显示结果。</span><span onclick="document.getElementById('user_input').value='我需要一个时序图，表示快递物流的跟踪过程：用户下单 -> 商家发货 -> 物流公司接收包裹 -> 包裹运输中 -> 快递员派送 -> 用户签收。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">我需要一个时序图，表示快递物流的跟踪过程：用户下单 -> 商家发货 -> 物流公司接收包裹 -> 包裹运输中 -> 快递员派送 -> 用户签收。</span><span onclick="document.getElementById('user_input').value='创建一个时序图，表示多人协作编辑文档的过程：用户 A 修改文档 -> 文档保存到云端 -> 用户 B 同步更新 -> 用户 C 查看最新版本。';" style="cursor: pointer; color: rgb(24, 18, 18); text-decoration: underline; display: block;">创建一个时序图，表示多人协作编辑文档的过程：用户 A 修改文档 -> 文档保存到云端 -> 用户 B 同步更新 -> 用户 C 查看最新版本。</span><span onclick="document.getElementById('user_input').value='我需要一个甘特图，表示一个项目的开发计划：项目启动（第 1 周） -> 需求分析（第 2-3 周） -> 设计阶段（第 4-5 周） -> 开发阶段（第 6-10 周） -> 测试阶段（第 11-12 周） -> 上线（第 13 周）。请输出英文。';" style="cursor: pointer; color:    rgb(17, 8, 8); text-decoration: underline; display: block;">我需要一个甘特图，表示一个项目的开发计划：项目启动（第 1 周） -> 需求分析（第 2-3 周） -> 设计阶段（第 4-5 周） -> 开发阶段（第 6-10 周） -> 测试阶段（第 11-12 周） -> 上线（第 13 周）。请输出英文</span><span onclick="document.getElementById('user_input').value='绘制一个甘特图，表示一个活动策划的时间安排：确定主题（第 1 天） -> 制定预算（第 2 天） -> 场地预订（第 3-4 天） -> 宣传推广（第 5-7 天） -> 活动执行（第 8 天） -> 总结反馈（第 9 天）。请输出英文';" style="cursor: pointer; color: rgb(12, 6, 6); text-decoration: underline; display: block;">绘制一个甘特图，表示一个活动策划的时间安排：确定主题（第 1 天） -> 制定预算（第 2 天） -> 场地预订（第 3-4 天） -> 宣传推广（第 5-7 天） -> 活动执行（第 8 天） -> 总结反馈（第 9 天）。请输出英文</span><span onclick="document.getElementById('user_input').value='创建一个甘特图，表示一个软件版本发布的里程碑：需求收集（第 1-2 周） -> 开发（第 3-6 周） -> 内部测试（第 7 周） -> 用户测试（第 8 周） -> 正式发布（第 9 周）。请输出英文';" style="cursor: pointer; color: rgb(12, 6, 6); text-decoration: underline; display: block;">创建一个甘特图，表示一个软件版本发布的里程碑：需求收集（第 1-2 周） -> 开发（第 3-6 周） -> 内部测试（第 7 周） -> 用户测试（第 8 周） -> 正式发布（第 9 周）。请输出英文</span><span onclick="document.getElementById('user_input').value='我需要一个类图，表示一个简单的学校管理系统：Student 类有属性 name 和 student_id，方法 enroll() 和 submit_assignment()；Teacher 类有属性 name 和 teacher_id，方法 assign_homework() 和 grade_assignment()。';" style="cursor: pointer; color: rgb(14, 11, 11); text-decoration: underline; display: block;">我需要一个类图，表示一个简单的学校管理系统：Student 类有属性 name 和 student_id，方法 enroll() 和 submit_assignment()；Teacher 类有属性 name 和 teacher_id，方法 assign_homework() 和 grade_assignment()。</span><span onclick="document.getElementById('user_input').value='绘制一个类图，表示一个电子商务系统：Product 类有属性 name 和 price，方法 get_details()；Order 类有属性 order_id 和 products，方法 calculate_total()；Customer 类有属性 name 和 address，方法 place_order()。';" style="cursor: pointer; color: rgb(14, 11, 11); text-decoration: underline; display: block;">绘制一个类图，表示一个电子商务系统：Product 类有属性 name 和 price，方法 get_details()；Order 类有属性 order_id 和 products，方法 calculate_total()；Customer 类有属性 name 和 address，方法 place_order()。</span></div></div>
</body>
</html>

一、Mermaid的基本语法与功能

Mermaid 是一种轻量级的标记语言，用于生成各种类型的图表，包括流程图、时序图、甘特图、类图等。它的语法简单易学，非常适合快速绘制图表。

常见的 Mermaid 图表类型

流程图 (Flowchart)
示例：
时序图 (Sequence Diagram)
示例：
甘特图 (Gantt Chart)
示例：
类图 (Class Diagram)
示例：

Mermaid 的强大之处在于其语法简洁，同时支持动态渲染，非常适合嵌入到网页中。

二、使用大模型生成Mermaid代码

为了实现用户通过自然语言描述生成图表的功能，我们需要借助 AI 大模型的能力。大模型可以根据用户的输入，生成符合 Mermaid 语法的代码。

实现思路

用户输入自然语言需求
用户可以输入类似以下的需求：
- “我需要一个流程图来表示用户登录系统的过程。首先用户输入用户名和密码，然后系统验证信息是否正确。如果正确，显示欢迎页面；如果不正确，提示重新输入。”
- “创建一个甘特图，表示一个项目的开发计划：项目启动（第 1 周） -> 需求分析（第 2-3 周） -> 设计阶段（第 4-5 周） -> 开发阶段（第 6-10 周） -> 测试阶段（第 11-12 周） -> 上线（第 13 周）。”
大模型生成 Mermaid 代码
我们调用本地部署的 Ollama 大模型 API，将用户输入的自然语言转换为标准的 Mermaid 语法。例如，上述需求可能生成如下代码：
格式要求
为了确保生成的代码可以直接渲染，我们在程序中对大模型的输出进行了处理，去除了多余的内容，只保留纯 Mermaid 语法。

三、用户输入自然语言描述，自动生成图表

功能实现

前端界面
我们使用 HTML 和 CSS 构建了一个简单的 Web 页面，用户可以在左侧输入框中输入需求。页面右侧会实时显示生成的图表。
后端逻辑
后端基于 Flask 框架，主要实现了以下功能：
- 接收用户输入。
- 调用大模型 API 生成 Mermaid 代码。
- 将生成的代码嵌入到 HTML 中，并通过 Mermaid.js 渲染为图表。

核心代码片段

@app.route('/', methods=['GET', 'POST'])
def index():mermaid_code = ""  # 初始化 mermaid_codeis_generated = False  # 初始化生成状态if request.method == 'POST':user_input = request.form['user_input']# 调用大模型生成 Mermaid 语法mermaid_code = generate_mermaid_code(user_input)if mermaid_code:  # 如果生成成功is_generated = Truereturn render_template('index.html', mermaid_code=mermaid_code, is_generated=is_generated)

四、集成到Flask Web应用中

我们将整个功能集成到了一个 Flask Web 应用中，用户可以通过浏览器访问并使用该工具。

关键点

前后端分离
前端负责展示界面和用户交互，后端负责处理用户输入并生成图表。
Mermaid.js 渲染
在 HTML 中引入 Mermaid.js，通过 <div class="mermaid"> 嵌入生成的 Mermaid 代码，页面加载时自动渲染为图表。
示例需求预设
为了方便用户使用，我们在页面中提供了 15 条预设的需求样本文字，用户可以直接点击复制并提交。

五、提供导出功能（SVG）

为了让用户能够保存生成的图表，我们还实现了导出功能，支持下载 SVG 格式的图片。

实现方式

提取 SVG 元素
使用 JavaScript 提取页面中渲染的 SVG 元素。

const svgElement = document.querySelector('.mermaid svg');
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElement);

生成下载链接
将 SVG 字符串转换为 Blob 对象，并生成下载链接。

const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'mermaid_diagram.svg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

总结

通过本文的介绍，我们完成了一个基于 Mermaid 和 AI 大模型的绘图网站的开发。该网站具有以下特点：

用户可以通过自然语言描述生成流程图、时序图、甘特图等。
图表实时渲染，支持动态更新。
提供导出功能，支持下载 SVG 格式的图表。