mermaid(markdown)语法
官网地址:http://knsv.github.io/mermaid/index.html
图
例如从左到右的一个有向图
graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;
![](http://images.cnitblog.com/blog/628966/201505/091404513607498.png)
第一行的
graph LR
中graph
指定是一个图,第二个LR
指定图的方向,所有的方向关键词为:TB - top bottom
BT - bottom top
RL - right left
LR - left right
TD - same as TB
之后的A,B,C等都是节点的标识(标识中不能使用空格)
节点默认只显示标识,但也可以通过如下方法控制其显示
A[aa bb]
显示字符串aa bb
的方框B(wo)
显示字符串wo
的圆角框C((我是C))
显示我是C
字符串的圆圈D>我是D]
显示我是D
的半方框E{我是E}
显示我是E
的正方形框
连线可以选择如下形式:
A-->B
箭头A--B
无箭头线A--hh dd--B
或者A--|hh dd|B
线之间可以添加注释A-.->B
虚线箭头A-. hh .->B
添加了注释的虚线箭头A==>B
加粗的箭头A== hh ==>B
加注释加粗的箭头
子图可以使用
subgraph id
定义
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
![](http://images.cnitblog.com/blog/628966/201505/091404516881698.png)
使用如下语法给节点添加点击行为
click nodeId callback
callback
是javascript
回调函数
修改节点的显示样式
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
![](http://images.cnitblog.com/blog/628966/201505/091404519853141.png)
或者使用如下方式修改class
class nodeId1 className;
class nodeId1,nodeId2 className;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
时序图
如下是一个基本的时序图
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->>John: Jolly good!
![](http://images.cnitblog.com/blog/628966/201505/091404523602327.png)
时序图使用
sequenceDiagram
关键词声明参与者使用
participant
声明消息声明是使用
[参与者][发送方式][参与者]:消息内容
形式声明
发送方式有如下几种:->
无箭头的线-->
无箭头的虚线->>
有箭头的实线-->>
有箭头虚线-x
有十字叉的实线--x
有十字叉的虚线
可以通过
ote right of [参与者]: 信息
的方式添加备注(多行信息请使用<br/>
)添加循环
loop Loop text
... statements ...
end
添加判断使用如下语法
有选择的:
alt Describing text
... statements ...
else
... statements ...
end
确定的:
opt Describing text
... statements ...
end
示例:
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
![](http://images.cnitblog.com/blog/628966/201505/091404527048755.png)
甘特图
示例:
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
![](http://images.cnitblog.com/blog/628966/201505/091404531575683.png)
使用关键词
gantt
声明甘特图使用关键词
title
声明标题使用关键词
section
声明板块板块后是任务的名称,任务类型,开始时间,持续时间等
时间参数
参数 | 示例 | 含义 |
---|---|---|
YYYY | 2014 | 4 digit year |
YY | 14 | 2 digit year |
Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
M MM | 1..12 | Month number |
MMM MMMM | January..Dec | Month name in locale set by moment.locale() |
D DD | 1..31 | Day of month |
Do | 1st..31st | Day of month with ordinal |
DDD DDDD | 1..365 | Day of year |
X | 1410715640.579 | Unix timestamp |
x | 1410715640579 | Unix ms timestamp |
H HH | 0..23 | 24 hour time |
h hh | 1..12 | 12 hour time used with a A. |
a A | am pm | Post or ante meridiem |
m mm | 0..59 | Minutes |
s ss | 0..59 | Seconds |
S | 0..9 | Tenths of a second |
SS | 0..99 | Hundreds of a second |
SSS | 0..999 | Thousandths of a second |
Z ZZ | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
mermaidsdfasdfafds 语法本文大撒反对dsf
mermaid(markdown)语法相关推荐
- 国产的markdown 语法的思维导图和大纲工具!
MarkMind 简介 MarkMind 是一款支持markdown语法的思维导图和大纲工具,主要特色就是在节点内部直接支持markdown语法. Markdown是一种纯文本格式的标记语言.通过简单 ...
- latex 甘特图_[简004] 史上'最全最精简'Markdown语法-速览速用
< Markdown Syntax by Andy - Saturday, March 16, 2019> 目录: 一.Markdown 基础常用语法速览速用 1. 标题1-6(" ...
- Markdown 语法介绍
Markdown 语法介绍 from:https://coding.net/help/doc/project/markdown.html 文章内容 1 Markdown 语法介绍 1.1 标题 1.2 ...
- markdown流程图多分支_提高生产力的好工具MarkDown语法学习
Python自动化测试开发班3月7号开课,2月15号前报名优惠800 什么是Markdown Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,而不像一般我们用 ...
- [Markdown语法][快速入门][CSDN]
Markdown语法 Markdown学习资料 [使用建议] 快捷键 目录 标题 文本样式 列表 链接 代码片 表格 注释 & 注脚 自定义列表 LateX数字公式 插入甘耐图 插入UML图 ...
- CSDN创作的markdown语法
我记录这个语法的目的就是发现CSDN产品经理的脑子被驴踢了 用markdown编辑器,只有第一次才会出现markdown语法,当你第二次再次编写时候,这个语法说明就找不到了,完全是空白的,产品经理完全 ...
- typora代码块语言linux命令,typora工具的使用以及MarkDown语法
typora工具 一.typora是什么 Typora 是一款支持实时预览的 Markdown 文本编辑器.它有 OS X.Windows.Linux 三个平台的版本,并且由于仍在测试中,是完全免费的 ...
- Markdown语法整理(详细版)
Markdown语法整理 目录 文章目录 1 概述 1.1 Markdown 1.2 Typora 2 标题和目录 2.1 标题 2.2 目录 3 段落和文本 3.1 缩进.对齐 3.3 斜体.粗体 ...
- Markdown语法大全(超级版)
Markdown语法大全(超级版) CSDN的参考文档并不全-- 文章目录 Markdown语法大全(超级版) 概述 设计理念 内联 HTML 语法 特殊字符自动转义 行内语法讲解 注释的表述 代码法 ...
最新文章
- 小组级git服务器搭建
- Python基础——for/while循环
- 多线程问题导致的JDBMonitor的bug分析
- ValueError: Masked arrays must be 1-D
- Activiti工作流引擎使用详解(一)
- 深入理解Spark 2.1 Core (六):Standalone模式运行的原理与源码分析
- Oracle 索引的维护
- php xml 添加节点 出问题,PHP往XML中添加节点的方法
- 埃氏筛秒素数题(洛谷P5723题题解,Java语言描述)
- 【报告分享】2019年中国95后洞察报告.pdf(附下载链接)
- original_keras_version = f.attrs[‘keras_version‘].decode(‘utf8‘)AttributeError: ‘str‘ object has no
- [转]malloc的内存用free释放后为何系统回收不了
- LED显示驱动(七):图层基本测试总结
- Silverlight 2 Beta 1学习资源
- 判断Windows服务是否启动
- 用什么软件测试钢结构受力,钢结构平台承载力检测
- 贴心的特效制作软件,抖音特效开放平台就能找到
- numpy 之average
- 鸿蒙负责人王成录被曝已离职:华为技术元老,1998年哈工大博士毕业后加入
- 【AI入门学习方法】