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 TD
    A[开始] --> B{判断}
    B -->|| C[操作1]
    B -->|| D[操作2]
    C --> E[判断2]
    D --> E
    E -->|| F[操作3]
    E -->|| G[操作4]
    F --> H[结束]
    G --> H
开始
判断
操作1
操作2
判断2
操作3
操作4
结束

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

序列图

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

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Alice Bob

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

甘特图

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

gantt
    title 项目时间线
    dateFormat  YYYY-MM-DD
    section 项目阶段
        需求分析       :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 需求分析 设计阶段 开发阶段 测试阶段 上线准备 项目阶段 项目时间线

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

类图

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

classDiagram
    class 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 之间的继承关系。

饼图

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

pie
    title 市场份额
    "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 工具。这个工具支持中文输入,非常方便。

实践应用

示例:项目管理甘特图

gantt
    title 项目时间线
    dateFormat  YYYY-MM-DD
    section 项目阶段
        需求分析       :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 工具

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/936079.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

iOS runtime总结数据结构,消息传递、转发和应用场景

runtime篇 首先看一下runtiem底层的数据结构 首先从objc_class这么一个结构体&#xff08;数据结构&#xff09;开始&#xff0c;objc_class继承于objc_object。 objc_object当中有一个成员变量叫isa_t&#xff0c;那么这个isa_t指针就指向一个objc_class类型的类对象&#xff…

前端编辑器JSON HTML等,vue2-ace-editor,vue3-ace-editor

与框架无关 vue2-ace-editor有问题&#xff0c;ace拿不到&#xff08;brace&#xff09; 一些组件都是基于ace-builds或者brace包装的 不如直接用下面的&#xff0c;不如直接使用下面的 <template><div ref"editor" class"json-editor"><…

QT:在线安装与离线安装

QT 学习系列 QT&#xff1a;在线安装与离线安装 QT 学习系列一、安装&#xff08;一&#xff09;离线安装windows系统Linux 系统Mac 系统 &#xff08;二&#xff09;在线安装 二、 环境变量配置三、验证总结 一、安装 &#xff08;一&#xff09;离线安装 windows系统 获取…

国产固态继电器的演变:可靠的电源解决方案

家用国产固态继电器(SSR)已成为各行各业的基石&#xff0c;性能可靠、设计紧凑、效率高。这些先进的开关设备取代了传统的机电继电器&#xff0c;具有静音运行、使用寿命更长、可靠性更高等诸多优点。家用SSR专为从工业自动化到家用电器等各种应用而设计&#xff0c;展示了本地…

Java-DataX 插件机制示例

示例代码 DataXPluginExample: DataX 项目的plugin 机制学习https://gitee.com/wendgit/data-xplugin-example/ 摘要 DataXPluginExample 是一个我编写的专门解读DataX插件机制的示例项目&#xff0c;旨在深入解析和掌握DataX的插件机制。本示例通过简洁明了的实现方式&#…

Ubuntu boot-repair安装过程

本教程只是在UBuntu系统无法引导才使用的方法&#xff0c;有可能需要提前使用U盘刻录UBuntu镜像去引导。 假如winUBuntu双系统&#xff0c;找不到紫色的UBuntu界面了&#xff0c;请参考&#xff1a;windows10ubuntu双系统开机引导界面不见的解决办法_双系统不出现引导界面-CSD…

苹果公司即将为iPhone和智能家居改用自主研发的蓝牙和Wi-Fi芯片

美股快讯&#xff1a;苹果公司即将为iPhone和智能家居改用自主研发的蓝牙和Wi-Fi芯片 苹果公司计划从明年开始在其设备上改用国产芯片进行蓝牙和Wi-Fi连接&#xff0c;此举将逐步淘汰目前由博通提供的部分部件。这种代号为Proxima的芯片已经开发了数年&#xff0c;现在计划用于…

汽车车牌识别数据集,支持YOLO,COCO,VOC格式的标注,8493张图片,可识别多种环境下的车牌

汽车车牌识别数据集&#xff0c;支持YOLO&#xff0c;COCO&#xff0c;VOC格式的标注&#xff0c;8493张图片&#xff0c;可识别多种环境下的车牌 数据集分割 训练组82&#xff05; 6994图片 有效集12&#xff05; 999图片 测试集6% 500图片 预处理 自动…

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪 发表在IJCV 2023年 作者&#xff1a;Weitao Feng, Lei Bai, Yongqiang Yao, Fengwei Yu & Wanli Ouyang 研究目标&#xff1a;多目标跟踪的帧率无关性研究 IJCV 在计算机视觉领域的影响力非常…

day11 性能测试(3)——Jmeter 断言+关联

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、复习 2、查看结果树 多个http请求原因分析 3、作业 4、Jmeter断言 4.1 响应断言 4.1.1 案例 4.1.2 小结 4.2 json断言 4.2.1 案例 4.2.2 小结 4.3 断言持续时间 4.3.1 案例 4.3.2 小结 4.…

高项 - 信息化发展

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 博文更新参考时间点&#xff1a;2024-11-09 高项 - 章节与知识点汇总&#xff1a;点击跳转 文章目录 高项 - 信息化发展信息与信息化信息信息系统信息化 现代化基础设施新型基础设施建设工业互联网车联网 现代化创…

PostgreSQL中事件触发器Event Trigger

在PostgreSQL中&#xff0c;事件触发器&#xff08;Event Trigger&#xff09;是一种特殊的触发器类型&#xff0c;它允许你在特定的数据库系统事件发生时执行特定的操作。与普通的触发器不同&#xff0c;事件触发器并不与特定的表或视图相关联&#xff0c;而是与数据库级别的全…

移远EC200A-CN的OPENCPU使用GO开发嵌入式程序TBOX

演示地址&#xff1a; http://134.175.123.194:8811 admin admin 演示视频&#xff1a; https://www.bilibili.com/video/BV196q2YQEDP 主要功能 WatchDog 1. 守护进程 2. OTA远程升级 TBOX 1. 数据采集、数据可视化、数据上报&#xff08;内置Modbus TCP/RTU/ASCII,GPS协…

深度学习中的多通道卷积与偏置过程详解

目录 ​编辑 多通道卷积的深入理解 &#x1f50d; 卷积核的多维特性 &#x1f30c; 卷积操作的细节 &#x1f527; 多通道卷积的优势 &#x1f31f; 偏置过程的深入理解 &#x1f3af; 偏置的两种实现方式 &#x1f6e0;️ 偏置的作用与重要性 &#x1f308; 多通道卷…

在服务器自主选择GPU使用

比如说&#xff0c;程序使用第 2 张显卡&#xff08;从 0 开始计数&#xff09;。它的作用是告诉系统和深度学习框架&#xff08;如 PyTorch 或 TensorFlow&#xff09;只可见某些 GPU。 export CUDA_VISIBLE_DEVICES1 然后再查看当前使用的显卡&#xff1a; echo $CUDA_VIS…

Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析)内含实际案例教学

摘要 用Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析),包含画布创建、节点设计、拖拽实现(实际案例)、节点连线、交互功能,后续文章持续更新。 注:本文章可以根据目录进行导航 文档支持 AntVX6使用文档 https://x6.antv.antgroup.com/tutorial…

jmeter CLI Mode 传参实现动态设置用户数

一.需求 CLI 运行模式下每次运行想要传入不同的用户数&#xff0c;比如寻找瓶颈值的场景&#xff0c;需要运行多次设置不同的用户数。 二.解决思路 查看官方API Apache JMeter - Users Manual: Getting Started api CLI Mode 一节中提到可以使用如下参数做属性的替换&#…

SpringCloudAlibaba教程之注册中心Nacos

目录 概念 架构 设计原则 架构分层 用户层 业务层 内核层 插件 单机部署 1.下载安装包 2.安装nacos 3.启动nacos 快速开始 1.添加Maven依赖 2.添加配置 3.启动 集群部署 搭建步骤 1.搭建数据库&#xff0c;初始化数据库表结构 2.配置nacos 3.启动nacos集群…

Python大数据可视化:基于python的电影天堂数据可视化_django+hive

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 电影数据 看板展示 我的信息 摘要 电影天堂数据可视化是…

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg 一、全屏截图并保存到StreamingAssets路径下 Texture2D screenShot;//保存截取的纹理public Image image; //显示截屏的Imagepublic void Jietu(){StartCoroutine(ScrrenCapture(new Rect(0, 0, Screen.width…