Markdown Mermaid
- Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
- 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
- Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
- 接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表。
- 官网:https://mermaidjs.github.io/
- Github:https://github.com/knsv/mermaid
流程图
图表方向
Mermaid 支持多种图表的方向,语法如下:
graph 方向描述
图表中的其他语句...
其中“方向描述”为
用词 | 含义 |
---|---|
TB | 从上到下 |
BT | 从下到上 |
RL | 从右到左 |
LR | 从左到右 |
节点定义
即流程图中每个文本块,包括开始、结束、处理、判断等。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
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 | 末端为叉的虚线(表示异步) |
处理中
在消息线末尾增加 + ,则消息接收者进入当前消息的“处理中”状态;
在消息线末尾增加 - ,则消息接收者离开当前消息的“处理中”状态。
或者使用以下语法直接说明某个参与者进入“处理中”状态
标注
语法如下
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
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
张三->李四: 嘿,小四儿, 写博客了没?
Note right of 李四: 李四愣了一下,说:
李四-->张三: 忙得吐血,哪有时间写。
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?
st->op->cond
cond(yes)->e
cond(no)->op
Markdown Mermaid的更多相关文章
- markdown mermaid序列图
序列图(时序图) 序列图是一种交互图,它显示了进程如何相互操作以及按什么顺序操作. sequenceDiagram participant l as 大灰狼 participant y as 小羊 l ...
- markdown mermaid流程图
流程图 所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点 节点 flowchart LR i ...
- markdown mermaid状态图
状态图 状态图是一种用于计算机科学和相关领域描述系统行为的图.状态图要求描述的系统由有限数量的状态组成. 语法: stateDiagram-v2 [*] --> Still Still --&g ...
- Markdown中使用mermaid画流程图
Markown语法简单,用来写文档是个不错的选择. 但是Markdown 语法并不直接支持画图,当然方法还是有的. 本人用的Markdown编辑器为vscode,在里面直接安装merdaid插件即可使 ...
- markdown绘图插件----mermaid简介
作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点 ...
- Markdown教程<2> mermaid图形绘制(1)
Markdown教程<2> mermaid图形绘制(1) 博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎,可以使用mermaid直接画出流程图,时序图,甘特 ...
- Markdown画图(mermaid)学习
简介 目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram mermaid(美人鱼), 是一个类似markdown,用文本语 ...
- Atom读写MarkDown插件选择,以及墙内安装markdown-preview-enhanced,及markdown和mermaid使用教程
1.Atom自带markdown-preview 功能太少,需要大量拓展. 2.markdown-preview-plus 功能还不错,但是其中的滚动条插件markdown-scroll-sync和最 ...
- 基于 Cmd MarkDown 的 markdown 语法学习
首先我要打一个属于干货的广告:CmdMarkDown 是非常好用的markdown编辑器软件,支持全平台,由作业部落出品,分为客户端与WEB端两种使用场景. 本篇博客学习的markdown语法都是基于 ...
随机推荐
- 【luoguP2252】 取石子游戏
题目链接 定义\(f[i][j]\)表示\(a=i,b=j\)时是必胜态还是必败态,博弈DP可以解决\(a,b \leq 100\) 的情况 然后就可以找规律了,发现\(f[i][j]=0\)的情况很 ...
- C实现Linux之touch命令
Linux 的 touch 命令用来修改文件时间戳,或者新建一个不存在的文件,使用方式如下: touch [-acm][-r ref_file(参照文件)|-t time(时间值)] file(文件名 ...
- 安装-consul服务发现集群
centos 7.4.x consul 1.2.2 list: 172.16.16.103 172.16.16.112 172.16.16.115 下载: #cd /usr/local/ #wget ...
- Redis哨兵、复制、集群的设计原理与区别
一 前言 谈到Redis服务器的高可用,如何保证备份的机器是原始服务器的完整备份呢?这时候就需要哨兵和复制. 哨兵(Sentinel):可以管理多个Redis服务器,它提供了监控,提醒以及自动的故障转 ...
- MVC发布出现:未能将文件bin\xxx.xml 复制到 obj\Release\PackageTmp\bin\xxx.xml,未能找到文件
之前写的项目好好的,也可以发布,然后今天要发布MVC项目,一直报错,报下面这个错误 莫名其妙搞了好久,没搜到合理的解决方案,结果就只能瞎搞了. 突然想起了,我前几天犯贱把项目根目录下的bin文件夹和o ...
- .NET 微服务 学习目录
概述 微服务在Java端已经有很成熟的框架可以使用,之前.NET一直没有比较成熟的网关,最近发现 Ocelot 这个.NET开源的微服务网关功能越来越强大,正好照着微软的官方文档学些一下.NET的微服 ...
- Oracle GoldenGate 同步数据至Hbase
该方法没试过,先记下再说 1.软件版本说明: Goldengate 12c 12.2.0.1 for Oracle(源端) Goldengate 12c 12.3.0.1 for Bigdata (目 ...
- BussinessSkinForm 入门教程
BussinessSkinForm 入门教程 By 刘家君(qufo) 作者:刘家君 工作单位:福建省 泉州鹭燕医药有限公司 职务:网络管理员 网名:qufo Mail:qufo@tom.com,qu ...
- JDK安装及配置——Linux系统
一.首先下载JDK版本 链接如下:https://www.oracle.com/technetwork/java/javase/downloads/index.html 截止写博客时,最新版已经到12 ...
- 【leetcode-22】括号生成
给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...