Markdown Mermaid

  1. Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
  2. 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
  3. Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
  4. 接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表。
  5. 官网:https://mermaidjs.github.io/
  6. 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

原文地址:https://www.cnblogs.com/meilong/p/Markdown-Mermaid.html

时间: 2024-09-30 14:36:17

Markdown Mermaid的相关文章

Cmd Markdown 简明语法手册

转自地址: https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown 『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』 Cmd Markdown 简明语法手册 Cmd-Markdown 1. 斜体和粗体 使用 * 和 ** 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 --- 表示二级标题. 示例: 这是一个一

打造自己的Markdown编辑器

原文链接:  http://www.errdev.com/post/5/ Markdown以其简洁的语法赢得了广大程序猿的喜爱,搜了一下github上相关的web编辑器,星星比较多的 StackeditdillingerEpicEditor 前面两个是集成的编辑器,提供很多的功能,可是我想找一个能嵌入到当前web应用的,替换当前的WYSIWYG编辑器.只有后面一个是嵌入式的编辑器,但是试了一下提供的编辑功能随便不错,提供的API太少了,很多地方不能自定义. 还是自己来一发算了,这个也非常简单,因

markdown流程图画法小结

markdown流程图画法小结 markdown 画图 流程图 最简单的流程图为例 ```mermaid! graph TD  A --> B //在没有(),[].{}等括号的情况之下,图标默认名字就是字母  A --> C  C --> D  B --> D  ```  给图标添加名字,改变只有矩阵图形,在箭头上添加文字 ```mermaid! graph TD  A[Christmas] --> |get money| B(GO shopping)  B -->

Mermaid 学习

在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; A-->C; B-->D; C-->D; 时序图 sequence diagram sequenceDiagram participant Alice participant Bob Alice->John:Hello John, how are you? loop Healthcheck

微信PK10平台出租与Markdown里面的流程图

Markdown里面的流程图微信PK10平台出租[q-21528-76294] 网址diguaym.com 关于Markdown里面的序列图,请移步这里. 关于使用mermaid插件支持画流程图,请移步这里. 在众多的markdown编辑器中,作者使用Typora, 它具有实时渲染可见与编辑的特点, 并且还支持自定义渲染效果(只需要更改CSS文件即可). 该软件的流程图由flowchart.js支持, 另外也支持mermaid插件来画流程图,详见Markdown中使用mermaid画流程图(基础

MarkDown语法-示例2

@TOC 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识. 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验: 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行

使用Mermaid画图

流程图的示例 时序图的示例 甘特图的示例 FAQ 很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解.一般这种情况下,我们都会想使用图解来解释.但是,我们也不会想下载那些繁重的工具,比如Visio. Mermaid 是一个用来画流程图,甘特图等图形的工具.它是一个Javascript库,但是它也是一种语言,一种类似markdown的语言. 任何时候,你想要测试Mermaid语法,都可以使用这个在线编辑器. 流程图的示例 graph TD A --> B A -->

MarkDown基础语法大全

一.MarkDown是什么? Markdown是一种轻量级的「标记语言」,创始人为约翰·格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者.写作爱好者.程序员或研究员广泛使用.其常用的标记符号不超过十个,相对于更为复杂的 HTML 标记语言来说,Markdown 十分的轻量,学习成本也不需要太多,且一旦熟悉这种语法规则,会有沉浸式编辑的效果.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客,Markdown文件后缀为.md. 二.MarkDown标记语

Hexo引入Mermaid流程图和MathJax数学公式

近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序: 如果你要把文章发布到其他博客平台,如CSDN.博客园,在每一个平台上你都要插入10来多次图片,作为程序员,这种笨拙又耗时的方法,我实在不能忍. 于是愤而搜索,M