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

AI生成图表化:深入探索Mermaid

在这里插入图片描述

引言

在使用生成式AI时,只要你提出让AI帮你生成mermaid图,AI的生成就会出现丰富的图形!

在现代文档编写中,图表的使用不仅能增强文档的可读性,还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具,凭借其简洁的语法和强大的功能,逐渐成为技术文档、博客、项目管理等领域的宠儿。本文将详细介绍 Mermaid 的使用方法,并推荐一些相关的资源和工具。

Mermaid 是什么?

Mermaid 是一个基于 JavaScript 的图表绘制工具,它允许用户通过简单的文本语法来创建流程图、序列图、甘特图、类图等多种类型的图表。它的设计理念是让图表的创建变得像编写代码一样简单和直观。

Mermaid 的优势

  • 简洁的语法:Mermaid 使用类似 Markdown 的语法,易于学习和使用。
  • 跨平台兼容:可以在任何支持 JavaScript 的环境中运行,包括网页、Markdown 编辑器、笔记应用等。
  • 多种图表支持:支持多种图表类型,满足不同场景的需求。
  • 开源与社区支持:作为开源项目,Mermaid 拥有活跃的社区,持续更新和改进。

图表类型

Mermaid 支持的图表类型包括但不限于:

  • 流程图 (Flowchart):用于展示流程和决策逻辑。
  • 序列图 (Sequence Diagram):用于描述对象之间的交互。
  • 甘特图 (Gantt Chart):用于项目管理和时间线规划。
  • 类图 (Class Diagram):用于展示类之间的关系和结构。
  • 状态图 (State Diagram):用于描述系统或对象的状态变化。
  • 实体关系图 (ER Diagram):用于数据库设计和数据模型。
  • 饼图 (Pie Chart):用于展示数据的比例分布。

集成到 Markdown

Mermaid 可以很容易地集成到 Markdown 中,很多 Markdown 编辑器和平台都支持 Mermaid 语法。例如,在 StackEdit 中,你可以直接使用 Mermaid 语法来绘制图表。

深入使用 Mermaid

流程图

流程图是 Mermaid 中最常用的图表类型之一。下面是一个更复杂的流程图示例:

graph TDA[开始] --> B{判断}B -->|| C[操作1]B -->|| D[操作2]C --> E[判断2]D --> EE -->|| F[操作3]E -->|| G[操作4]F --> H[结束]G --> H
开始
判断
操作1
操作2
判断2
操作3
操作4
结束

这个流程图展示了如何处理多个决策点和分支。

序列图

序列图用于展示对象之间的交互。以下是一个简单的序列图示例:

sequenceDiagramparticipant Aliceparticipant BobAlice->>Bob: Hello Bob, how are you?alt is sickBob->>Alice: Not so good :(else is wellBob->>Alice: Feeling fresh like a daisyend
Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Alice Bob

这个序列图展示了 Alice 和 Bob 之间的对话,包含了条件分支。

甘特图

甘特图在项目管理中非常有用。下面是一个项目时间线的甘特图示例:

gantttitle 项目时间线dateFormat  YYYY-MM-DDsection 项目阶段需求分析       :done,    des1, 2024-12-01, 2024-12-07设计阶段       :active,  des2, after des1, 7d开发阶段       :         des3, after des2, 14d测试阶段       :         des4, after des3, 7d上线准备       :         des5, after des4, 3d
2024-12-01 2024-12-03 2024-12-05 2024-12-07 2024-12-09 2024-12-11 2024-12-13 2024-12-15 2024-12-17 2024-12-19 2024-12-21 2024-12-23 2024-12-25 2024-12-27 2024-12-29 2024-12-31 2025-01-01 2025-01-03 2025-01-05 2025-01-07 需求分析 设计阶段 开发阶段 测试阶段 上线准备 项目阶段 项目时间线

这个甘特图展示了一个项目的时间线,帮助团队成员了解项目进度。

类图

类图用于展示类之间的关系和结构。以下是一个简单的类图示例:

classDiagramclass Animal {+String name+int age+eat()+sleep()}class Dog {+String breed+bark()}Animal <|-- Dog
Animal
+String name
+int age
+eat()
+sleep()
Dog
+String breed
+bark()

这个类图展示了 AnimalDog 之间的继承关系。

饼图

饼图用于展示数据的比例分布。以下是一个简单的饼图示例:

pietitle 市场份额"Chrome" : 60"Firefox" : 20"Safari" : 10"Edge" : 5"Others" : 5
60% 20% 10% 5% 5% 市场份额 Chrome Firefox Safari Edge Others

这个饼图展示了不同浏览器的市场份额。

推荐资源

支持 Mermaid 的笔记本

强烈推荐阅读 oioihoii 的博文,其中详细介绍了如何在 StackEdit 中使用 Mermaid。StackEdit 是一个基于浏览器的 Markdown 编辑器,支持 Mermaid 语法,并且可以将笔记内容存储在 Gitee 或 GitHub 上,实现多平台同步和在线共享。

Mermaid 图转 PNG 工具

如果你需要将 Mermaid 图表转换为 PNG 格式,可以使用 Min2k 的 Mermaid 图转 PNG 工具。这个工具支持中文输入,非常方便。

实践应用

示例:项目管理甘特图

gantttitle 项目时间线dateFormat  YYYY-MM-DDsection 项目阶段需求分析       :done,    des1, 2024-12-01, 2024-12-07设计阶段       :active,  des2, after des1, 7d开发阶段       :         des3, after des2, 14d测试阶段       :         des4, after des3, 7d上线准备       :         des5, after des4, 3d
2024-12-01 2024-12-03 2024-12-05 2024-12-07 2024-12-09 2024-12-11 2024-12-13 2024-12-15 2024-12-17 2024-12-19 2024-12-21 2024-12-23 2024-12-25 2024-12-27 2024-12-29 2024-12-31 2025-01-01 2025-01-03 2025-01-05 2025-01-07 需求分析 设计阶段 开发阶段 测试阶段 上线准备 项目阶段 项目时间线

这个甘特图展示了一个项目的时间线,帮助团队成员了解项目进度。

示例:系统状态图

stateDiagram-v2[*] --> 启动启动 --> 运行中运行中 --> 暂停 : 暂停按钮运行中 --> 停止 : 停止按钮暂停 --> 运行中 : 恢复按钮停止 --> [*]
暂停按钮
停止按钮
恢复按钮
启动
运行中
暂停
停止

这个状态图展示了一个系统的基本状态转换。

结论

Mermaid 不仅简化了图表的创建过程,还增强了文档的表达能力。无论你是技术文档作者、项目经理还是博主,Mermaid 都能为你的工作带来便利和效率。通过本文推荐的资源和工具,你可以更深入地探索和应用 Mermaid,提升文档的专业性和可读性。

参考文献:

  • Mermaid 官方文档
  • StackEdit 官方网站
  • Min2k 的 Mermaid 图转 PNG 工具

希望这篇博客能为你提供有价值的信息,欢迎在评论区分享你的使用心得或问题。

相关文章:

AI生成图表化:深入探索Mermaid

引言 在使用生成式AI时&#xff0c;只要你提出让AI帮你生成mermaid图&#xff0c;AI的生成就会出现丰富的图形&#xff01; 在现代文档编写中&#xff0c;图表的使用不仅能增强文档的可读性&#xff0c;还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具…...

25.DDD数量关系

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 关系型数据库的数量关系领域模型的数量关系实现聚合数量关系聚合内聚合间具体说明代码 数量关系是本质吗&#xff1f;领域对象之…...

Linux应用开发————线程池

线程池 定义&#xff1a;简单来说&#xff0c;就是存放多个线程的池子。当创建线程池时&#xff0c;就给池中存放一些线程&#xff0c;如果有任务要执行&#xff0c;就从池中取出一个线程执行任务&#xff0c;依次类推&#xff1b;当所有线程都在执行任务时&#xff0c;其他任务…...

Spring Boot 集成阿里云OSS 完成文件上传下载

前言&#xff1a; 文件上传下载在项目开发中是一个非常常见的业务场景&#xff0c;在云服务上还没有兴起的时候&#xff0c;一般来说都会把文件单独存放到文件服务器上&#xff0c;随着云服务的兴起&#xff0c;各类云服务厂商都提供了 OSS 服务&#xff0c;本篇我们分享 Spri…...

使用ERA5数据绘制风向玫瑰图的简易流程

使用ERA5数据绘制风向玫瑰图的简易流程 今天需要做一个2017年-2023年的平均风向的统计,做一个风向玫瑰图&#xff0c;想到的还是高分辨率的ERA5land的数据&#xff08;0.1分辨率&#xff0c;逐小时分辨率&#xff0c;1950年至今&#xff09;。 风向&#xff0c;我分为了16个&…...

测试脚本并发多进程:pytest-xdist用法

参考&#xff1a;https://www.cnblogs.com/poloyy/p/12694861.html pytest-xdist详解&#xff1a; https://www.cnblogs.com/poloyy/p/14708825.html 总 https://www.cnblogs.com/poloyy/category/1690628.html...

数据可视化的Python实现

一、GDELT介绍 GDELT ( www.gdeltproject.org ) 每时每刻监控着每个国家的几乎每个角落的 100 多种语言的新闻媒体 -- 印刷的、广播的和web 形式的&#xff0c;识别人员、位置、组织、数量、主题、数据源、情绪、报价、图片和每秒都在推动全球社会的事件&#xff0c;GDELT 为全…...

【Linux系列】Linux 系统配置文件详解:`/etc/profile`、`~/.bashrc` 和 `~/.bash_profile`

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能

前言 这次的标题有点长&#xff0c;主要是想要表述的功能点有点多&#xff1b; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分&#xff0c;可以单击预览大图&#xff0c;同时在预览界面可以双指放大缩小图片并且可以移动查看图片&#xff0c;双击放大&#xff0…...

游戏引擎学习第45天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程&#xff0c;展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹&#xff0c;而另一版本是角色会完全停下来。这种方式感觉不太自然&#xff0c;因为在游戏中&#xff0c;…...

electron常用方法

一&#xff0c;,electron设置去除顶部导航栏和menu 1&#xff0c;electron项目 在创建BrowserWindow实例的main.js页面添加frame&#xff1a;false属性 2&#xff0c;electron-vue项目 在src/main/index.js文件下找到创建窗口的方法&#xff08;createWindow&#xff09;&…...

【Spark】Spark Join类型及Join实现方式

如果觉得这篇文章对您有帮助&#xff0c;别忘了点赞、分享或关注哦&#xff01;您的一点小小支持&#xff0c;不仅能帮助更多人找到有价值的内容&#xff0c;还能鼓励我持续分享更多精彩的技术文章。感谢您的支持&#xff0c;让我们一起在技术的世界中不断进步&#xff01; Sp…...

meta llama 大模型一个基础语言模型的集合

LLaMA 是一个基础语言模型的集合&#xff0c;参数范围从 7B 到 65B。我们在数万亿个 Token 上训练我们的模型&#xff0c;并表明可以专门使用公开可用的数据集来训练最先进的模型&#xff0c;而无需诉诸专有的和无法访问的数据集。特别是&#xff0c;LLaMA-13B 在大多数基准测试…...

JAVA爬虫获取1688关键词接口

以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码&#xff1a; 一、获取API接口访问权限 要使用1688关键词接口&#xff0c;首先需要获取API的使用权限&#xff0c;并了解接口规范。以下是获取API接口的详细步骤&#xff1a; 注册账号&#xff1a;在1688平台注册一…...

操作系统——内存管理

1、什么是虚拟内存&#xff1f;它是如何实现的&#xff1f;虚拟内存与物理内存之间有什么关系&#xff1f; 虚拟内存是操作系统提供的一种内存管理机制&#xff0c;它使程序认为自己拥有连续的内存空间&#xff0c;但实际上内存可能被分散存储在物理内存和磁盘交换空间中。 虚…...

android studio 模拟器不能联网?

模拟器路径&#xff1a; C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe.关闭所有AVD设备实例 导航至&#xff1a; C:\Users\userName\AppData\Local\Android\Sdk\emulator查看模拟器名称 AdministratorDESKTOP-6JB1OGC MINGW64 ~/AppData/Local/…...

CTF-WEB: 目录穿越与模板注入 [第一届国城杯 Ez_Gallery ] 赛后学习笔记

step1 验证码处存在逻辑漏洞,只要不申请刷新验证码就一直有效 字典爆破得到 admin:123456 step2 /info?file../../../proc/self/cmdline获得 python/app/app.py经尝试,读取存在的目录时会返回 A server error occurred. Please contact the administrator./info?file.…...

数据结构6.4——归并排序

基本思想&#xff1a; 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。将已有的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个…...

【html 常用MIME类型列表】

本表仅列出了常用的MIME类型&#xff0c;完整列表参考文档。 浏览器通常使用 MIME 类型&#xff08;而不是文件扩展名&#xff09;来确定如何处理 URL&#xff0c;因此 Web 服务器在响应头中添加正确的 MIME 类型非常重要。 如果配置不正确&#xff0c;浏览器可能会曲解文件内容…...

Linux之vim编辑器

vi编辑器是所有Unix及linux系统下标准的编辑器&#xff0c;类似于Windows系统下的记事本。很多软件默认使用vi作为他们编辑的接口。vim是进阶版的vi&#xff0c;vim可以视为一种程序编辑器。 前言&#xff1a; 1.文件准备 复制 /etc/passwd文件到自己的目录下&#xff08;不…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...