这个JavaScript图标库有点强大！

随着发展，现代 Web 设计在改善体验和功能的同时，对于美观的追求也越来越高，可视化、交互式、动态等元素和效果似乎已成为标配。

早之前也给大家介绍过几款主流的图表库，似乎漏掉了这个，今天就重新给大家介绍一下~

Mermaid

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

它可以帮助用户以简单、直观的方式创建各种类型的图表，包括流程图、时序图、甘特图等。

Mermaid 的优点是它的简单性和可移植性。用户可以轻松地将其图表定义嵌入到任何支持 HTML、Markdown中，比如 Typora、FlowUs 息流、VisionOn、PowerPoint、IDE、vscode当中使用。

同时 Mermaid 也有在线编辑器，如果你只是轻量级、偶尔使用，推荐 Mermaid 在线渲染编辑器~

快速入门指南

1.流程图（Flowchart）

一个简单的流程图，graph 关键字用于定义一个图表，LR 参数指定图表方向为从左到右。

graph LR
   A-->B;
   B-->C;
   C-->D;

2. 序列图（Sequence Diagram）

sequenceDiagram 关键字用于定义一个序列图。然后，我们定义了两个对象 A 和 B，并使用 ->> 和 -->> 符号连接它们，表示对象之间的消息传递顺序。消息文本可以放在冒号后面。

sequenceDiagram
   A->>B: Message 1
   B-->>A: Message 2

3. 甘特图（Gantt Chart）

gantt 关键字用于定义一个甘特图，title 用于定义图表标题，dateFormat 用于定义日期格式。然后，我们定义了一个部分 Section以及task

gantt
   title Example Gantt Chart
   dateFormat  YYYY-MM-DD
   section Section
   task 1: 2024-05-01, 18d
   task 2: 2024-05-13, 14d
   task 3: 2024-05-27, 7d

4. 饼图（Pie Chart）

pie 关键字用于定义一个饼图，title 用于定义图表标题，再定义多个数据就可以实现一个饼图

pie
   title 5月支出
   "交通": 500
   "吃饭": 1300
   "人情": 3000

还有更多如状态图、实体关系图、象限图、思维导图、需求图等等，都是可以实现的。

Mermaid是一个基于文本的流程图和时序图生成工具，对于程序员来说具有很高的价值，对于普通用户来说也是不错的选择，不需要你懂代码照样可以实现图表。

感兴趣的小伙伴不妨去试一试~

Github地址：https://github.com/mermaid-js/mermaid 中文网：https://mermaid.nodejs.cn/