利用AI大模型和Mermaid生成流程图

devtools/2025/1/12 7:03:21/

核心点1:利用大模型生成流程图的语句(Code)

  1. 确定业务流程

    • 用户需要明确要绘制的业务流程,包括主要步骤、决策点以及各步骤之间的关系。
    • 将确定的业务流程以文字形式描述出来。
  2. 生成Mermaid代码

    • 将描述好的业务流程交给大模型(如ChatGPT),让其生成相应的Mermaid代码。
    • 大模型会根据输入的业务流程描述,自动生成符合Mermaid语法的代码。

例如,假设我们要绘制一个用户登录的业务流程图,内容包括用户登录、检查用户权限、显示内容或权限错误以及用户注销等步骤。描述业务流程如下:

  • 用户登录
  • 检查用户权限
  • 如果权限有效,显示内容;否则显示权限错误
  • 用户可以选择注销

将上述业务流程描述交给ChatGPT,生成如下Mermaid代码:

PlainText

graph TB
A[用户登录]-->B[检查用户权限]
B--权限有效-->C[显示内容]
B--权限无效-->D[显示权限错误]
C-->E[用户操作]

核心点2:利用Mermaid的开源API将Code转换成流程图片

  1. 渲染流程图

    • 将生成的Mermaid代码放入支持Mermaid的环境中,如在线免费网站(Online FlowChart & Diagrams Editor - Mermaid Live Editor),进行渲染生成流程图。
    • 用户可以根据自己的需求对生成的流程图进行调整和优化。
  2. 下载或引用图片

    • 将生成的流程图按照自己需要的格式下载下来,或者直接引用当前图片的链接,将其嵌入到文档中。

Mermaid API的详细使用

Mermaid提供了丰富的API方法,使得在网页中创建和展示各种类型的图表变得非常方便。以下是一些关键步骤:

  • 初始化图表: 使用mermaid.initialize方法可以初始化一个流程图,该方法接受一个可选的配置对象作为参数,用于自定义图表的样式和行为。

  • 添加节点和消息: 使用mermaidAPI.add方法可以向流程图中添加节点或消息。节点定义字符串可以使用-->表示节点之间的连接关系。

  • 渲染图表: 使用mermaidAPI.render方法可以将流程图渲染到指定的元素中。渲染后,图表将自动根据元素的大小进行布局和缩放,以适应不同的屏幕尺寸。

示例代码与流程

以下是一个完整的示例流程,展示了如何使用大模型和Mermaid API生成业务流程图:

  1. 确定业务流程并描述: 例如,用户登录、检查权限、显示内容或权限错误、用户注销等步骤。

  2. 使用大模型生成Mermaid代码: 将业务流程描述交给ChatGPT或其他大模型,生成Mermaid代码。

  3. 在Mermaid环境中渲染: 将生成的Mermaid代码粘贴到支持Mermaid的在线网站(如Online FlowChart & Diagrams Editor - Mermaid Live Editor)中进行渲染。

  4. 下载或引用图片: 根据需要下载生成的流程图图片,或直接引用其链接嵌入到文档中。

注意事项

  • 确保大模型能够准确理解并生成符合Mermaid语法的代码。
  • 根据实际需求调整和优化生成的流程图。
  • 注意Mermaid API的版本兼容性,确保使用的API方法在当前版本中有效。

通过以上步骤,你可以高效地利用大模型和Mermaid实现业务流程图的快速生成,并将其应用于各种文档和项目中。

代码:

# Mermaid Live Editor APIapi_url = "https://mermaid.ink/img/"full_url = f"{api_url}{base64_str}"# 下载图片response = requests.get(full_url)if response.status_code == 200:# 确保目录存在os.makedirs(upload_dir, exist_ok=True)# 保存图片with open(output_path, 'wb') as f:f.write(response.content)print(f"图片已保存到: {output_path}")print(f"访问链接: {full_url}")return output_pathelse:print(f"错误: {response.status_code}")print(f"URL: {full_url}")return None


http://www.ppmy.cn/devtools/149816.html

相关文章

理解Apache Spark中的宽窄依赖

在Apache Spark中,宽窄依赖是理解其运行原理和RDD(弹性分布式数据集)数据结构的关键概念,以下是具体分析: 从Spark运行原理角度 宽依赖:宽依赖意味着一个父RDD的分区会被多个子RDD分区使用,通…

生成idea ui风格界面代码

创建一个类似 IntelliJ IDEA 的用户界面(UI)涉及多个组件和复杂的布局设计。为了简化这个过程,我们可以使用 **Java Swing** 或 **JavaFX** 来实现一个基本的 IDE 界面,模仿 IntelliJ IDEA 的主要布局元素,如菜单栏、工…

Axios:前沿科技浪潮下的 HTTP 交互革新引擎

目录 一、引言 二、Axios 基础 2.1 安装 2.2 基本使用 2.2.1 GET 请求 2.2.2 POST 请求 2.2.3 PUT 和 DELETE 请求 三、Axios 配置 3.1 全局配置 3.2 自定义配置 四、Axios 拦截器 4.1 请求拦截器 4.2 响应拦截器 五、Axios 高级用法 5.1 并发请求 5.2 取消请求…

Go语言如何实现高性能缓存服务

在Go语言中实现高性能缓存服务,需要综合考虑数据结构的选择、并发控制、内存管理以及持久化策略等多个方面。以下是一些关键步骤和最佳实践,可以帮助你构建高性能的缓存服务: 选择合适的数据结构: 使用哈希表(如Go的m…

【题解】—— LeetCode一周小结53

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 【题解】—— 每日一道题目栏 上接:【题解】—— LeetCode一周小结52 30.二叉树中的链表 题目链接:1367. 二叉树中的链…

【云计算】OpenStack云计算平台

OpenStack云计算平台框架搭建 1.先换源 先换成阿里源: curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2.安装框架 yum -y install centos-release-openstack-train 3.安装客户端 yum -y install python-openstackclient 但…

C# 告别FirstOrDefault

一、开篇:FirstOrDefault 的 “江湖地位” 在 C# 编程的世界里,FirstOrDefault 可谓是一位 “常客”,被广大开发者频繁地运用在各种项目场景之中。无论是 Windows 窗体应用程序,需要从数据集中检索第一条记录,或是满足…

UE5 打包项目

UE5 打包项目 flyfish 通过 “文件”->“打开项目”,然后在弹出的对话框中选择项目文件(通常是以.uproject为后缀的文件) 选择目标平台: 在 UE5 主界面中,找到 “平台”(Platforms)。根据…