markdown绘图插件----mermaid简介

最新推荐文章于 2025-06-15 13:35:48 发布

转载

最新推荐文章于 2025-06-15 13:35:48 发布 · 5.7k 阅读

33 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/257147

文章标签：

#markdown #开发工具 #javascript #ViewUI

Mermaid是一款轻量级的脚本语言，用于在Markdown文档中创建流程图、时序图和甘特图。它通过JavaScript实现，解决了在文档撰写中便捷绘图的问题。本文介绍了Mermaid的基本语法，包括不同类型的图表、节点形状、连接线样式、子图、特殊语法和Font Awesome图标支持，并提供了多个示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：黄永刚

mermaid简介

这里写图片描述

当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。

mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。
先来看个例子:

1.流程图(flowchart)

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

生成的图表如下所示：

这里写图片描述
2. 时序图(sequence diagram)

sequenceDiagram
　　　participant Alice
　　　participant Bob
　　　Alice->John:Hello John, how are you?
　　　loop Healthcheck
　　　　　John->John:Fight against hypochondria
　　　end
　　　Note right of John:Rational thoughts <br/>prevail...
　　　John-->Alice:Great!
　　　John->Bob: How about you?
　　　Bob-->John: Jolly good!

生成的图表如下所示：

这里写图片描述

3.甘特图(gantt diagram)

gantt
　　　dateFormat　YYYY-MM-DD
　　　title Adding GANTT diagram functionality to mermaid
　　　section A section
　　　Completed task　　:done, des1, 2014-01-06,2014-01-08
　　　Active task 　　　　:active, des2, 2014-01-09, 3d
　　　future task 　　　　:　　　  des3, after des2, 5d
　　　future task2　　　　:　　　  des4, after des3, 5d
　　　section Critical tasks
　　　Completed task in the critical line　:crit, done, 2014-01-06,24h
　　　Implement parser and json　　　　　　:crit, done, after des1, 2d
　　　Create tests for parser　　　　　　　:crit, active, 3d
　　　Future task in critical line　　　　　:crit, 5d
　　　Create tests for renderer　　　　　　:2d
　　　Add to ,mermaid　　　　　　　　　　　:1d