Mermaid语法

使用Markdown 流程图制作: Mermaid

引自:

https://mermaid-js.github.io/mermaid/#/

sequenceDiagram

使用 sequenceDiagram 进行渲染,标识使用语法如:json, java,js等

语法

注释

可以使用 %% 添加注释,解析时不会显示

participant 定义参与者

使用 participant 定义参与者:

ps :

participant zw as zhenwei

participant ww as wangwu

指定参与者有 zhenwei, wangwu 并使用别名 zw, ww代指

zhenwei wangwuhellohimorningzhenwei wangwu

类型	描述
->	实线无箭头
->	虚线无箭头
->>	带箭头的实线
->>	带箭头的虚线
-X	实线，末端带有叉号（异步）

Note: 备注

使用 Note 添加备注

可以使用 over, left, right等位置词指定当前注释的相对位置

sequenceDiagram
participant zw as zhenwei
participant ww as wangwu
note over zw,ww: say
zw ->> +ww: hello
ww -->> -zw: hi
note right of ww: kk
zw --X ww: morning

zhenwei wangwusayhellohikkmorningzhenwei wangwu

loop: 循环

使用 loop 表达循环

sequenceDiagram
participant zw as zhenwei
participant ww as wangwu
zw ->> +ww: hello
ww -->> -zw: hiloop 我是备注:聊鬼话
zw --X ww: 吃饭了么
end

zhenwei wangwuhellohi吃饭了么loop[ 我是备注:聊鬼话 ]zhenwei wangwu

alt: 条件

条件语句

sequenceDiagram
zhenwei->>wangwu: hello,wangwu
alt 反应5秒
wangwu -->> zhenwei: hi,daye
else what fk
zhenwei -->> wangwu: have you eaten
end

zhenweiwangwuhello,wangwuhi,dayehave you eatenalt[ 反应5秒 ][ what fk ]zhenweiwangwu

par: 并发

par 表示并行发生

sequenceDiagram
participant zw as zhenwei
participant ww as wangwu
participant zs as zhangsanpar 打招呼
zw ->> +ww: hello
ww -->> -zw: hi
and 同时
zw ->> +zs: hello
zs -->> -zw: daye
end

zhenwei wangwuzhangsanhellohihellodayepar[ 打招呼 ][ 同时 ]zhenwei wangwuzhangsan

rect: 背景色

背景色
不知为何不识别

sequenceDiagram
rect rgb(1111, 255, 0)
zhenwei ->> zhangsan: 吃饭了么?
rect rgb(0, 0, 255, .11)
zhangsan -->> zhenwei: 你呢?
end
end

sequenceDiagram
rect rgb(1111, 255, 0)
zhenwei ->> zhangsan: 吃饭了么?
rect rgb(0, 0, 255, .11)
zhangsan -->> zhenwei: 你呢?
end
end

sequenceNumbers

使用 sequenceNumbers 或 autonumber 为箭头添加自动序号
使用autonumber 无效, 望解答

sequenceDiagramautonumberAlice->>John: Hello John, how are you?loop HealthcheckJohn->>John: Fight against hypochondriaendNote right of John: Rational thoughts!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!

markdown 做图 : Mermaid语法相关推荐

markdown 流程图js_在Markdown中用mermaid语法绘制图表
Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~ Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Merma ...
markdown绘图插件----mermaid简介
作者:黄永刚 mermaid简介当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点 ...
【Mermaid 语法详细教程 01】流程图（Flowchart / graph）
说明 mermaid是一种解决文字图形转换的方案,用于在markdown标记语言中利用文本绘图,本文内容保证适合mermaid 8.8.3的内容,向上更新的内容不论. 本篇作为mermaid教程系列的 ...
markdown绘图插件 ---- mermaid简介
mermaid简介当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点,这是一个类似 ...
Markdown做笔记或写博客
Markdown做笔记或写博客使用Markdown语法做笔记或写博客,为了使笔记更加好看,条理清晰,还可以上传到博客上,CSDN,博客园等等,做成网页,不需要学习Web前端的知识,就可以做出漂酿的网 ...
Markdown 11种基本语法
Markdown 11种基本语法现在是我在学习Markdown时做的笔记.学完这些Markdown的基本使用已经不成问题. 1. 标题设置(让字体变大,和word的标题意思一样) 在Markdown ...
直接用自己服务器做图床可以吗_我花 9 块钱搭了一个“私人图床”
背景之前一直把简书当做自己的私人"图床"来用,因为简书的Markdown编辑器非常稳定,实时保存加图片ctrl+v复制进去就能用的特征让我一直坚持在简书上首发自己写的东西,然后图 ...
直接用自己服务器做图床可以吗_图床趣事
作为一个社畜苦逼程序员,已经使用Markdown编写笔记已经持续了很久时间了. Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber).它允许人们使用易读易写的纯文 ...
海龟作图python小猪佩奇_python海龟做图20秒完成小猪佩奇，附源码！
Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具备近二十年的发展历史,成熟且稳定.它包含了一组完善并且容易理 ...

markdown 做图 : Mermaid语法