Markdown:Mermaid 画图
目录
- 安装
- 基本语法
- 流程图
- 时序图
- 甘特图
- 总结
Mermaid 是一款用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它可以将简单的文本描述转化为美观的图表,方便开发者进行可视化展示。
安装
Mermaid 可以直接在浏览器中使用,也可以在 Node.js 环境中使用。在浏览器中使用可以通过 CDN 引入,例如:
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.14.0/dist/mermaid.min.js"></script>
在 Node.js 中使用可以通过 npm 安装:
npm install mermaid
基本语法
Mermaid 的语法非常简单,只需要在代码块中使用 mermaid
关键字,并在代码块中编写 Mermaid 语法即可。例如:
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
这段代码会生成一个简单的流程图,其中 graph
是关键字,LR
表示从左到右布局,A-->B
表示从节点 A 到节点 B 有一条箭头。
流程图
流程图可以通过 graph
关键字生成,例如:
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
时序图
时序图可以通过 sequenceDiagram
关键字生成,例如:
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John->>+Alice: I'm doing great, thanks!
甘特图
甘特图可以通过 gantt
关键字生成,例如:
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 设计
需求分析 :done, des1, 2014-01-06,2014-01-08
概要设计 :done, des2, 2014-01-09,2014-01-11
详细设计 :done, des3, 2014-01-12,2014-01-14
section 开发
编码 :active, dev1, 2014-01-17, 10d
单元测试 : dev2, after dev1, 5d
集成测试 : dev3, after dev2, 5d
section 发布
发布 : pub, after dev3, 2d
测试 : test, after pub, 3d
总结
Mermaid 是一款简单易用的图表生成库,可以帮助开发者快速生成流程图、时序图、甘特图等图表。通过本文的介绍,相信大家已经掌握了 Mermaid 的基本使用方法。
声明:资源可能存在第三方来源,若有侵权请联系删除!