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

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...