概述

Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图、序列图、甘特图等等。

它的官方网站是 https://mermaid-js.github.io/mermaid/#/

另外有一个在线的测试网站 https://mermaid.live

强烈建议用这个来编写,因为有语法智能提示,还能实时看到效果。写好后,再复制到你的文档里面来,mermaid 还提供了可以将图形文本生成网页地址,或者图形链接的功能,可以很方便地进行分享

如何使用

博客园默认就支持mermaid,它的语法很简单,下面是一个简单的例子

```mermaid
graph LR;
A[Wiki supports Mermaid] --> B[Visit https://mermaidjs.github.io/ for Mermaid syntax];
```

在文章中呈现的样子如下

graph LR;
A[Wiki supports Mermaid] --> B[Visit https://mermaidjs.github.io/ for Mermaid syntax];

流程图(Flowchart)

用来描述一个系统流程,通常在需求分析阶段很有用

基本用法

graph LR
A(员工发起审批)--> B{经理是否审批}
B --> |同意| C[财务报销]
B --> |拒绝| A
C --> E(结束)
graph LR
A(员工发起审批)--> B{经理是否审批}
B --> |同意| C[财务报销]
B --> |拒绝| A
C --> E(结束)

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/flowchart

  1. graph 定义了一个流程图
  2. LR 表示从左(LEFT)至右(RIGHT),水平流程图。如果不写,则是从上至下(TD:TOP DOWN, 或TB:TOP BUTTOM)
  3. A,B,C,D,E 这些都是节点的代号,可以用任意字符,通常用简单的英文字母即可。mermaid内部会记录和复用这些节点代号,类似于变量的机制
  4. --> 表示连接线,包括方向。在箭头后面跟着的 |文字| 是定义要显示在连接线上的文字

    还支持 --- , -- 文字 --> 等组合用法

  5. 代号后面的文本,用来作为节点的显示文本(如果提供了的话)。
  6. () 表示一个带有圆角的矩形,{}表示一个判断条件,[] 表示一个没有圆角的矩形

    还支持([]), [[]],(()),[()],{{}},{//},{\},((())) 等多种组合用法

序列图(Sequence)

序列图是一种交互图,它显示了进程如何相互作用以及以何种顺序运行。

基本用法

sequenceDiagram
actor user as 小明
participant client as Outlook 客户端
participant website as Azure Blob storage
participant aad as Azure Active Directory
participant sbux as Starbucks backend service user ->> client : 打开星巴克插件
client->>+ website : 访问网页
website-->>- user : 要求登录
user->>+ aad : 身份验证
aad-->>- website : 授权成功
user->>+ website : 门店查询
website-->> sbux : 接口调用
sbux -->> website : 返回门店列表
website -->> user : 返回
sequenceDiagram
actor user as 小明
participant client as Outlook 客户端
participant website as Azure Blob storage
participant aad as Azure Active Directory
participant sbux as Starbucks backend service

user ->> client : 打开星巴克插件
client->>+ website : 访问网页
website-->>- user : 要求登录
user->>+ aad : 身份验证
aad-->>- website : 授权成功
user->>+ website : 门店查询
website-->> sbux : 接口调用
sbux -->> website : 返回门店列表
website -->> user : 返回

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/sequenceDiagram

  1. sequenceDiagram 定义这是一个序列图
  2. 顶部的参与者定义,并不是必须的,但用这种语法定义更加清晰 actor是指人,participant一般是指系统, 用 as 语法可以重命名
  3. 参与者之间连接符, 常见的有 ->,-->,->>,-->>,-x,--x,-),--), 两个短线表示虚线,一个短线表示实线
  4. 在箭头的右侧的 +,- 指的是UML中的 activate 的意思
  5. 还支持并行 par语法,循环 loop 语法等,可以参考官方文档

甘特图(Gantt)

甘特图用来表示项目计划或进度

基本用法

gantt
title 项目进度
dateFormat YYYY-MM-DD
axisFormat %m-%d
excludes sunday,monday,tuesday,friday,2014-03-01
section 第一阶段
需求分析 :crit, a1, 2014-01-01, 30d
设计评审 :after a1, 20d section 第二阶段
第一批测试 :done, 2014-01-12 , 12d
第二批测试 :24d
客户验收 :milestone,2h
gantt
title 项目进度
dateFormat YYYY-MM-DD
axisFormat %m-%d
excludes sunday,monday,tuesday,friday,2014-03-01
section 第一阶段
需求分析 :crit, a1, 2014-01-01, 30d
设计评审 :after a1, 20d

section 第二阶段
第一批测试 :done, 2014-01-12 , 12d
第二批测试 :24d
客户验收 :milestone,2h

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/gantt

  1. gantt 表示这是一个甘特图
  2. title 定义甘特图的标题
  3. dateFormat 定义甘特图中日期显示的格式,更多格式可以参考 https://mermaid-js.github.io/mermaid/#/gantt?id=input-date-format
  4. section 定义一个一个的区域,可以包含一个或多个任务
  5. 任务定义语法: 任务名称:别名,开始日期,天数
  6. 状态的修饰语法 active(表示还没有完成,会显示为蓝色), done(表示已完成, 会显示为灰色),crit(表示关键任务,会显示为红色)
  7. 任务时长:d(天),w(周),h(小时),m(分钟)
  8. 任务可以有一个别名,例如上面的 a1 ,然后在其他任务中可以引用依赖,例如 after a1
  9. 如果某个任务没有写开始日期,默认就是在上一个任务之后
  10. excludes 是指要排除哪些日期,可以写具体的日期,也可以写 weekends(周末),或具体的工作日,如 sunday,monday 这样的语法,可以写多种的组合
  11. milestone 表示里程碑

在博客文章中使用mermaid 定义流程图,序列图,甘特图的更多相关文章

  1. Flask——向博客文章中添加图片

    未添加图片样式 添加图片设置: 1.允许渲染img标签 在数据库文章模型allowed_tags中添加img 2.给clean函数加个参数attributes=attrs, attrs = { '*' ...

  2. WordPress 博客文章中google adsense广告展示方法之一

    http://log.medcl.net/item/2011/08/diving-into-elasticsearch-4-installation-and-configuration/ 看到这个网站 ...

  3. 年度十佳 DevOps 博客文章(前篇)

    如果说 15 年你还没有将 DevOps 真正应用起来,16 年再不实践也未免太落伍了.国内 ITOM 领军企业 OneAPM 工程师为您翻译整理了,2015 年十佳 DevOps 文章,究竟是不是深 ...

  4. VM 映像 PowerShell 教学系列博客文章

     编辑人员注释:本文章是与Microsoft Azure工程的项目经理Kay Singh共同撰写的 正如我在第一篇博客文章中所承诺的,我又回来了,为大家分步介绍如何在PowerShell中使用VM ...

  5. SQL Sever 博客文章目录(2016-07-06更新)

    SQL Server方面的博客文章也陆陆续续的写了不少了,顺便也将这些知识点整理.归纳一下下.方便自己和他人查看. MS SQL 数据类型 三大数据库对比研究系列--数据类型 MS SQL 表和视图 ...

  6. 年度十佳 DevOps 博客文章(后篇)

    如果说 15 年你还没有将 DevOps 真正应用起来,16 年再不实践也未免太落伍了.在上篇文章中我们了解到 15 年十佳 DevOps 博客文章的第 6-10 名,有没有哪一篇抓住了您的眼球,让您 ...

  7. Flask 学习 十 博客文章

    提交和显示博客文章 app/models.py 文章模型 class Post(db.Model): __tablename__ = 'posts' id = db.Column(db.Integer ...

  8. 一文搞定scrapy爬取众多知名技术博客文章保存到本地数据库,包含:cnblog、csdn、51cto、itpub、jobbole、oschina等

    本文旨在通过爬取一系列博客网站技术文章的实践,介绍一下scrapy这个python语言中强大的整站爬虫框架的使用.各位童鞋可不要用来干坏事哦,这些技术博客平台也是为了让我们大家更方便的交流.学习.提高 ...

  9. HelloDjango 第 08 篇:开发博客文章详情页

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...

随机推荐

  1. SpringCloud个人笔记-02-Feign初体验

    项目结构 sb_cloud_product <?xml version="1.0" encoding="UTF-8"?> <project x ...

  2. yum下载安装mysql服务

    1.下载mysql源码 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2.安装mysql源 yum ...

  3. 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题

    前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...

  4. java基础-字符流

    字符流 * 字符流是可以直接读写字符的IO流 * 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写出.    FileReader * FileRea ...

  5. java基础-File

    File类 * File更应该叫做一个路径, 文件路径或者文件夹路径    * 路径分为绝对路径和相对路径  * 绝对路径是一个固定的路径,从盘符开始  * 相对路径相对于某个位置,在eclipse下 ...

  6. 开源.net core 验证码 - LazyCaptcha

    LazyCaptcha 介绍 LazyCaptcha是仿EasyCaptcha和SimpleCaptcha,基于.Net Standard 2.1的图形验证码模块. 项目地址 效果展示 Captcha ...

  7. SpringMVC快速使用——基于注解

    SpringMVC快速使用--基于注解 1.引入依赖 <!-- 定义Spring版本 --> <properties> <spring.verson>5.3.8&l ...

  8. 夯实基础上篇-图解 JavaScript 执行机制

    讲基础不易,本文通过 9 个 demo.18 张 图.2.4k 文字串讲声明提升.JavaScript 编译和执行.执行上下文.调用栈的基础知识.

  9. docker安装elastic search和kibana

    安装目标 使用docker安装elastic search和kibana,版本均为7.17.1 安装es 1. docker pull 去dockerhub看具体版本,这里用7.17.1 docker ...

  10. 2021.12.06 平衡树——Treap

    2021.12.06 平衡树--Treap https://www.luogu.com.cn/blog/HOJQVFNA/qian-xi-treap-ping-heng-shu 1.二叉搜索树 1.1 ...