a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:hover {
outline: 0;
}
a:active {
outline: 0;
}
a:hover {
color: #005580 !important;
text-decoration: underline !important;
}
blockquote small:before {
content: '\2014 \00A0';
}
q:before {
content: "";
}
q:after {
content: "";
}
blockquote:before {
content: "";
}
blockquote:after {
content: "";
}

mermaid 语法

mermaid
usage

官网地址: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;
  1. 第一行的graph LRgraph指定是一个图,第二个LR指定图的方向,所有的方向关键词为:

    • TB - top bottom

    • BT - bottom top

    • RL - right left

    • LR - left right

    • TD - same as TB

  2. 之后的A,B,C等都是节点的标识(标识中不能使用空格)

  3. 节点默认只显示标识,但也可以通过如下方法控制其显示

    • A[aa bb] 显示字符串aa bb的方框

    • B(wo) 显示字符串wo的圆角框

    • C((我是C)) 显示我是C字符串的圆圈

    • D>我是D] 显示我是D的半方框

    • E{我是E} 显示我是E的正方形框

  4. 连线可以选择如下形式:

    • A-->B 箭头

    • A--B 无箭头线

    • A--hh dd--B或者A--|hh dd|B 线之间可以添加注释

    • A-.->B 虚线箭头

    • A-. hh .->B 添加了注释的虚线箭头

    • A==>B 加粗的箭头

    • A== hh ==>B 加注释加粗的箭头

  5. 子图可以使用subgraph id定义

graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
  1. 使用如下语法给节点添加点击行为

click nodeId callback

callbackjavascript回调函数

  1. 修改节点的显示样式

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;

或者使用如下方式修改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!
  1. 时序图使用sequenceDiagram关键词声明

  2. 参与者使用participant声明

  3. 消息声明是使用[参与者][发送方式][参与者]:消息内容形式声明

    发送方式有如下几种:

    • -> 无箭头的线

    • --> 无箭头的虚线

    • ->> 有箭头的实线

    • -->> 有箭头虚线

    • -x 有十字叉的实线

    • --x 有十字叉的虚线

  4. 可以通过ote right of [参与者]: 信息的方式添加备注(多行信息请使用<br/>)

  5. 添加循环

loop Loop text
... statements ...
end
  1. 添加判断使用如下语法

    有选择的:

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

甘特图

示例:

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
  1. 使用关键词gantt声明甘特图

  2. 使用关键词title声明标题

  3. 使用关键词section声明板块

  4. 板块后是任务的名称,任务类型,开始时间,持续时间等

时间参数

参数 示例 含义
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

mermaid 语法的更多相关文章

  1. 使用Mermaid画图

    流程图的示例 时序图的示例 甘特图的示例 FAQ 很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解.一般这种情况下,我们都会想使用图解来解释.但是,我们也不会想下载那些 ...

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

    近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢, ...

  3. Markdown语法说明及测试一览表

    标题: Markdown语法说明及测试一览表 作者: 梦幻之心星 347369787@QQ.com 标签: [Markdown, Typora, Markdown_Nice, CSS] 目录: [Ma ...

  4. Markdown画图(mermaid)学习

    简介 目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram mermaid(美人鱼), 是一个类似markdown,用文本语 ...

  5. 新版CSDN-markdown编辑器使用指南

    本文来自CSDN官方,分markdown原文和实际显示部分,推荐开两个窗口对比浏览 Markdown部分 @[TOC](这里写自定义目录dd标题) # 欢迎使用Markdown编辑器 你好! 这是你第 ...

  6. CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)

    CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...

  7. Typora中的Markdown教程

    Tutorial of markdown in Typora 工欲善其事,必先利其器 如上所说,这里给大家安利一款高BIG的利器Typora,这是一款文艺青年(装逼)必备的用于编写markdown的打 ...

  8. 计算机爱好者协会技术贴markdown第四期

    首先先让爱酱用CSDN自带的数学公式方法来闪瞎大家的钛合金狗眼: 有没有感觉到Markdown的强大!!!!! ## KaTeX数学公式 您可以使用渲染LaTeX数学表达式 [KaTeX](https ...

  9. 计算机爱好者协会技术贴markdown第一期

    本周爱酱给大家带来的是markdown的介绍和使用哦~ Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.由于是纯文本,所以可移植性特 ...

随机推荐

  1. H264 RTP封包原理(转载)

    1.  引言        随着信息产业的发展,人们对信息资源的要求已经逐渐由文字和图片过渡到音频和视频,并越来越强调获取资源的实时性和互动性.但人们又面临着另外一种不可避免的尴尬,就是在网络上看到生 ...

  2. html5-语义化标签(一)

    1.什么是语义化标签? 根据内容的结构化(内容化),选择合适标签 2.为什么要语义化 为了在没有css样式的情况下,页面也能很好的呈现出很好的内容结构.代码结构 方便其他设备的解析(屏幕阅读器.盲人阅 ...

  3. [2] 立方体(Box)图形的生成算法

    顶点数据的生成 bool YfBuildBoxVertices ( Yreal extentX, Yreal extentY, Yreal extentZ, YeOriginPose originPo ...

  4. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  5. SQL锁(转)

    说 明    Chaos 无法改写隔离级别更高的事务中的挂起的更改.   ReadCommitted 在正在读取数据时保持共享锁,以避免脏读,但是在事务结束之前可以更改数据,从而导致不可重复的读取或幻 ...

  6. bind原理图释

    (原文:http://blog.think-async.com/2010/04/bind-illustrated.html) 本文解释了bind 是如何工作的.为了清晰,我对图中的语法作了一些简化(例 ...

  7. _com_util::ConvertBSTRToString的使用问题

    #include <comutil.h> 然后调用_com_util::ConvertBSTRToString提示如下错误: error LNK2019: unresolved exter ...

  8. java编程思想 第四版 第六章 个人练习

    欢迎加群:239063848 进群须知:本群仅用于技术分享与交流.问题公布与解答 禁止闲聊.非诚勿扰 练习1:(1)在某个包中创建一个类,在这个类所处的包的外部创建该类的一个实例. import mi ...

  9. Silverlight 之 断点调试

    silverlight程序经常会遇到无法调试的情况,下面来总结解决方案. 一.问题描述 在Silverlight开发过程中,经常时不时的会碰到Silverlight无法调试的问题.如下几种情况: 1. ...

  10. android 实现QQ好友列表

    在某些Android开发群里,看到有些新手问怎么实现QQ好友列表,其实网上一搜挺多的.接触Android,也才一年的时间,大部分时间花在工作上(解bug...),界面上开发很少参与.自己维护的系统应用 ...