mermaid工具

最新推荐文章于 2025-02-20 16:22:02 发布

赶路人儿

最新推荐文章于 2025-02-20 16:22:02 发布

阅读量4.9w

点赞数 16

分类专栏： # nodejs web前端文章标签： mermaid

本文链接：https://blog.csdn.net/liuxiao723846/article/details/83544588

版权

web前端同时被 2 个专栏收录

294 篇文章

订阅专栏

nodejs

38 篇文章

订阅专栏

Mermaid是一款开源工具，支持流程图、甘特图与时序图绘制，采用类似Markdown的语法，便于快速创建各种图表。本文介绍Mermaid的在线编辑器使用方法，包括流程图、时序图及甘特图的画法，并演示如何通过命令行生成PNG和SVG格式的图表。

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

mermaid是一款开源的画流程图、甘特图、时序图工具，她提供了一种类似markdown的语法来创建各种图。

官网：https://mermaidjs.github.io/

在线编辑器：here

1、入门

我们先试用mermaid提供的在线编辑器，来熟悉一下mermaid的各种画图语法；

1）流程图

2）时序图：

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

效果如下：

3）甘特：

gantt
dateFormat  YYYY-MM-DD
title Shop项目交付计划

section 里程碑 0.1 
数据库设计          :active,    p1, 2016-08-15, 3d
详细设计            :           p2, after p1, 2d

section 里程碑 0.2
后端开发            :           p3, 2016-08-22, 20d
前端开发            :           p4, 2016-08-22, 15d

section 里程碑 0.3
功能测试            :       p6, after p3, 5d
上线               :       p7, after p6, 2d
交付               :       p8, afterp7, 2d

效果如下

2、使用：

1）mermaid提供了nodejs方式，在命令行上使用：

由于 mermaid 使用 nodejs 写的，所以需要 node 环境，这个不多说，根据自己的平台安装好 node 即可。安装 mermaid ：

npm install -g phantomjs && npm install -g mermaid

完成之后，就可以使用命令行了。先新建一个文本文件，我们这里就来展示一个甘特图，命名 demo.gantt，demo.gantt 文件内容就用上面的甘特图的例子，然后使用命令：

mermaid demo.gantt -w 1920 -s -p -o images

就可以在 images 目录下生成两个文件，一个是 PNG 图片，另一个是 SVG 矢量图。

可以用 mermaid -h 命令查看帮助，这里我贴上刚刚那条命令里用到的参数:

-s --svg       输出 SVG 替代 PNG（试验性的功能）。
-p --png       如果选择保存 SVG，那么加上这个选项可以同时保存 PNG。
-o --outputDir 保存文件的目录（如果不存在会自动创建），默认 `cwd`。
-w --width     生成的 PNG 图片宽度。

2）整合进 Markdown：

忽略

3）在html中使用：

官网上有很多例子可以参考https://unpkg.com/mermaid/ ，这里简单写一个

<!DOCTYPE html>
<html>
<head>
<script src="./mermaid.js"></script>
</head>
<body>


<div class="firstTest">
   graph LR;
    A--合并-->B;
    A-->C;
    B-->D;
    C-->D;
</div>
<script>     
 mermaid.init({noteMargin: 10}, ".firstTest");
</script>


</body>
</html>

效果：