当前位置: 首页 > 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;不…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

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

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

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

Mac flutter环境搭建

一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...