mermaid流程图工具_基于 Mermaid 的时序图、流程图和甘特图
简介
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表。
MinDoc 中 mermaid 图表是以``mermaid ` 开始的代码块。
流程图
图表方向
Mermaid 支持多种图表的方向,语法如下:
graph 方向描述
图表中的其他语句...
其中“方向描述”为
用词
含义
TB
从上到下
BT
从下到上
RL
从右到左
LR
从左到右
从上到下
AB
从下到上
AB
从右到左
AB
从左到右
AB
节点定义
即流程图中每个文本块,包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id,以及节点的文字。
表述
说明
id[文字]
矩形节点
id(文字)
圆角矩形节点
id((文字))
圆形节点
id>文字]
右向旗帜状节点
id{文字}
菱形节点
需要注意的是,如果节点的文字中包含标点符号,需要时用双引号包裹起来。
节点间的连线表述
说明
>
添加尾部箭头
-
不添加尾部箭头
–
单线
–text–
单线上加文字
==
粗线
==text==
粗线加文字
-.-
虚线
-.text.-
虚线加文字
子图表
使用以下语法添加子图表
subgraph 子图表名称
子图表中的描述语句...
end
对 fontawesome 的支持
使用 fa: #图表名称# 的语法添加 fontawesome。
举个例子:
graph TB
id1(圆角矩形)--普通线-->id2[矩形]
subgraph 子图表
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end
子图表普通线粗线虚线无箭头矩形菱形右向旗帜圆形圆角矩形
序列图
使用以下语法开始序列图
sequenceDiagram
[参与者1][消息线][参与者2]:消息体
...
例如:
sequenceDiagram
张三->>李四: 吃了吗?
李四->>张三: 吃了
张三李四吃了吗?吃了张三李四
参与者
上例中的张三、李四都是参与者,上例中的语法是最简单的,也可以明显表明参与者有哪些:
sequenceDiagram
participant 参与者 1
participant 参与者 2
...
participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3
消息线类型
描述
->
无箭头的实线
–>
无箭头的虚线
->>
有箭头的实线
–>>
有箭头的虚线
-x
末端为叉的实线(表示异步)
–x
末端为叉的虚线(表示异步)
处理中
在消息线末尾增加 + ,则消息接收者进入当前消息的“处理中”状态;
在消息线末尾增加 - ,则消息接收者离开当前消息的“处理中”状态。
或者使用以下语法直接说明某个参与者进入“处理中”状态:
activate 参与者
标注
语法如下
Note 位置表述 参与者: 标注文字
其中位置表述可以为
表述
含义
right of
右侧
left of
左侧
over
在当中,可以横跨多个参与者
循环
语法如下
loop 循环的条件
循环体描述语句
end
判断alt 条件 1 描述
分支 1 描述语句
else 条件 2 描述 # else 分支可选
分支 2 描述语句
else ...
...
end
如果遇到可选的情况,即没有 else 分支的情况,使用如下语法:
opt 条件描述
分支描述语句
end
举个例子sequenceDiagram
participant z as 张三
participant l as 李四
loop 日复一日
z->>l: 吃了吗您呐?
l-->>z: 吃了,您呢?
activate z
Note left of z: 想了一下
alt 还没吃
z-xl: 还没呢,正准备回去吃
else 已经吃了
z-xl: 我也吃过了,哈哈
end
opt 大过年的
l-->z: 祝您新年好啊
end
end
张三李四吃了吗您呐?吃了,您呢?想了一下还没呢,正准备回去吃我也吃过了,哈哈alt[ 还没吃 ][ 已经吃了 ]祝您新年好啊opt[ 大过年的 ]loop[ 日复一日 ]张三李四
甘特图(gantt)
甘特图是一类条形图,由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。
示例:
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
01/0601/1301/20T1T2T3S1S2S3
先看一个复杂的甘特图:
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 jison :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
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
渲染后如下:
01/0601/1301/20Completed taskActive taskFuture taskFuture task2Completed task in the critical lineImplement parser and jisonCreate tests for parserFuture task in critical lineCreate tests for rendererAdd to mermaidDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageA sectionCritical tasksDocumentationLast sectionAdding GANTT diagram functionality to mermaid标记
简介
title
标题
dateFormat
日期格式
section
模块
Completed
已经完成
Active
当前正在进行
Future
后续待处理
crit
关键阶段
日期缺失
默认从上一项完成后
关于日期的格式可以参考:
中文演示
gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2016-07-05, 5d
详细设计 :2016-07-08, 10d
编码 :2016-07-15, 10d
测试 :2016-07-22, 5d
section 发布验收
发布: 2d
验收: 3d
渲染后:
06/2707/0407/1107/1807/2508/01需求分析可行性报告概念验证概要设计详细设计编码测试发布验收项目确定项目实施发布验收项目开发流程
第三方接口
打开上面这个网站, 这个网站提供动态生成各种图的http接口
像这样使用, 接口根据传入的参数返回图
使用
官网中介绍Markdown中是这样使用的
![Alt text](https://g.gravizo.com/svg?
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
)
不过在 MinDoc 直接这样写是不行的, 需要进行编码, 找到官网靠近底部的 Test/Encoder, 这里提供一个简单的编码器, 输入你想生成的图 如:
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
点击编码, 把右边的链接复制过来, 放在Markdown的图片标签里就可以了
![digraph](https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20%20main%20-%3E%20parse%20-%3E%20execute%3B%0A%20%20%20main%20-%3E%20init%3B%0A%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20execute%20-%3E%20make_string%3B%0A%20%20%20execute%20-%3E%20printf%0A%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20main%20-%3E%20printf%3B%0A%20%20%20execute%20-%3E%20compare%3B%0A%20%7D)
效果如下
参考
文档更新时间: 2018-10-30 10:04 作者:Minho
mermaid流程图工具_基于 Mermaid 的时序图、流程图和甘特图相关推荐
- c语言源码转流程图工具在线,c语言源码转流程图工具_应用|1+1构造地表最强流程图工具...
大家知道我是一个"24K资深"通信工程师,所以日常画画拓扑图.信令流程图.产品逻辑图等等都是必备技能,但是苦无Visio久矣,所以每次画图都一个脑袋两个大. 每次不是在Word里就 ...
- mermaid流程图工具_MarkDown绘图mermaid流程graph
[注]更多详情请参阅mermaid流程图官方文档. 1. 绘图方向 命令 方向 TB(TD) 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状 命令 形状 A[text] 文本 ...
- java时序图工具_基于时序数据库,实现百亿级话单实时全景监控分析
背景 随着流量业务的高速发展以及已经到来的5G时代,业务支撑系统的规模不断增大.服务不断增多,业务.应用和系统运行性能指标数据持续以指数级的速度增长,每日计费话单量已突破百亿.系统监控的实时性.准确性 ...
- soapui工具_基于开源的API测试工具!不再为web服务负载测试而发愁
通过一个可视化.拖拽式的界面,LoadUI允许您实时.交互式地创建.配置和重分配负载测试.在单一测试环境下,LoadUI提供完整的测试覆盖,支持所有标准的协议和技术.它功能强大,能从任意数量的本地和远 ...
- binlog工具_基于Binlog实时同步数仓,有哪些不为人知的坑?
最近看到一篇文章<基于Canal与Flink实现数据实时增量同步>,主要讲解的是基于Flink有关于MySQL Binlog数据采集的方案,看了一下实践方法和具体代码操作,感觉有一些欠考虑 ...
- python代码检查工具_基于Python3的漏洞检测工具 ( Python3 插件式框架 )
[TOC] Python3 漏洞检测工具 -- lance lance, a simple version of the vulnerability detection framework based ...
- 白盒测试基本路径生成工具_基于基本最短路径列生成的车辆路径问题
论文作者:Alain Chabrier 论文发表日期:2005 摘要 车辆路径问题的列生成模型通常包含一个基本的最短路径子问题.由于该问题已知算法的最坏情况复杂度过高,其基本路径约束通常被松弛.实际上 ...
- 基于python的性能测试工具_基于 Python 的性能测试工具 locust 与 LR 的简单对比[转发]...
背景 最近自己开发了一个小的接口,功能测完了,突然想测下性能,原来做性能测试,我一直用的是HP的LoadRunner,前一段时间正好看过locust,想想就用这个来测测性能吧. 由于对LR比较熟,正好 ...
- java生成iso9660工具_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo_20210212 v7.0.0 正式版发布,此次版本更新如下: 1.新增对DB2数据库的支持 2.新增按字段生成文件,支持把字段.JSON.XML数据转换成任何代码 3.新增大量新的自 ...
最新文章
- Dalvik解释器源码到VMP分析
- android intent.putextras,关于android:如何使用putExtra()和getExtra()来表示字符串数据
- 转:JS动态加载JS
- 基于springboot多模块项目使用maven命令打成war包放到服务器上运行的问题
- 【报告分享】中科院-地球大数据支撑可持续发展目标报告.pdf
- ZooKeeper监控
- shipyard中文版发布
- linux环境搭建之tftp tftpd服务器
- linux系统富士通打印机驱动,PRIMERGY:驱动下载 - 富士通中国
- centos7通过startx后进入图形界面,使用eog命令提示unable to open display
- 通达信最新 行情服务器,通达信数据接收服务器地址及端口号
- 深入浅出FPGA-4-数字电路设计基础
- Push failed Dst refspec V1.0.0 matches more than one.
- Docker镜像压缩和优化
- 文件的打开和关闭,fopen()和fclose
- HDU2567:寻梦
- TextMeshPro创建中文字体库
- myeclipse中修改字体大小
- AttributeError: module 'easygui' has no attribute 'msgbox'错误
- fis2 入门--fis3使用
热门文章
- 原生导航栏控件navigationbar使用说明
- 哦耶OYE-0001 OpenWrt路由器折腾记(by quqi99)
- [Software]Vivado 2018.2 安装及激活教程
- apose-cell-22.6 excel转换pdf水印去除
- Excel2010条件格式结合公式和格式刷使用存在严重bug
- 修改yum源为国内yum源和本地yum源
- STM32 (基于HAL库) 硬件IIC读写任意AT24CXX芯片
- nginx url实现二次转发
- Macbook电池出现“建议维修”的解决办法
- 无线电视服务器主机名,电视服务器主机名怎么填