Markdown教程<2> mermaid图形绘制(1)

博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎,可以使用mermaid直接画出流程图,时序图,甘特图等,比较方便,下面介绍一下在markdown中使用mermaid绘制图表

注意:本文包含较多mermaid图表,打开本网页后需要等待一段时间加载完成方可显示图表。可以观看浏览器标题栏,直至本网页不处于加载状态(转圈圈)或者图表已经显示为止。


1. 流程图

使用graph来声明一张新的图以及图的绘制方向,具体方法为:

graph TD
start --> stop
graph TD
start --> stop

其中TD声明了图的绘制顺序为由上到下,其他可以填写的顺序为:

  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - 与TB一样
graph LR
start --> stop
graph LR
start --> stop

节点与形状

默认节点

graph LR
node
graph LR
node

可以看到,默认情况下节点名称被显示在矩形框内。

有文本的节点

当然也可以为节点设置文本,在设置文本的同时需要指定节点的形状。

graph LR
node1[这是一段文字]
graph LR
node1[这是一段文字]

圆角节点

graph LR
node1(这是一段文字)
graph LR
node1(这是一段文字)

圆节点

graph LR
node1((这是一段文字))
graph LR
node1((这是一段文字))

不对称形状节点

graph LR
node1>这是一段文字]
graph LR
node1>这是一段文字]

菱形节点

graph LR
node1{这是一段文字}
graph LR
node1{这是一段文字}

节点之间连接线

节点之间通过连接线/边连接。所以可以设置连接线的形状,或者把一段文本附着到线上。

箭头连接线

graph LR
A --> B
graph LR
A --> B

直线

graph LR
A --- B
graph LR
A --- B

直线中带有文字

graph LR
A --this is a text--- B
graph LR
A --this is a text--- B

或者

graph LR
A ---|this is a text| B
graph LR
A ---|this is a text| B

箭头中带有文字

graph LR
A --this is a text--> B
graph LR
A --this is a text--> B

虚线连接

graph LR
A -.- B
graph LR
A -.- B

虚线箭头连接

graph LR
A -.-> B
graph LR
A -.-> B

虚线带有文本

graph LR
A -.this is a text.- B
graph LR
A -.this is a text.- B

虚线箭头带有文本

graph LR
A -.this is a text.-> B
graph LR
A -.this is a text.-> B

大箭头(thick link)

graph LR
A ==> B
graph LR
A ==> B

大箭头(thick link)带有文本

graph LR
A ==this is a text==> B
graph LR
A ==this is a text==> B

用于转义

graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

子图

subgraph title
graph definition
end

例如:

graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2

节点交互

可以讲一个点击事件绑定到一个节点上,点击可以出发一个javascript callback或者一个链接来在新的窗口打开

graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
<script>
var callback = function(){
alert('A callback was triggered');
}
<script>
graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"

添加样式

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
linkStyle 0 stroke:#ff3,stroke-width:4px;
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
linkStyle 0 stroke:#ff3,stroke-width:4px;

使用linkStyle num来为第num条边指定样式

使用style node_name来为名称为node_name的节点指定样式

最后,一个小例子

graph LR
A[Hard edge] --Link text--> B(Round edge)
B --> C{Decision}
C --One--> D[Result one]
C --Two--> E[Result two]
linkStyle 3 stroke:#ff3,stroke-width:4px;
graph LR
A[Hard edge] --Link text--> B(Round edge)
B --> C{Decision}
C --One--> D[Result one]
C --Two--> E[Result two]
linkStyle 3 stroke:#ff3,stroke-width:4px;

[1]:本文内容来源于mermaid官方手册

Markdown教程<2> mermaid图形绘制(1)的更多相关文章

  1. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  2. markdown绘图插件----mermaid简介

    作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点 ...

  3. 【Windows编程】系列第五篇:GDI图形绘制

    上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数 ...

  4. 13个JavaScript图表(JS图表)图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  5. 推荐12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web  ...

  6. C#中的GDI+图形绘制方法

    GDI+图形绘制方法 1.首先对于绘制图形,必须的先将命名空间导入:using System.Drawing.Drawing2D; 2.然后在一个事件中写入程序 首先先将Graphics这个对象实例化 ...

  7. cocos2d-x 图形绘制

    转自:http://blog.csdn.net/zhy_cheng/article/details/8480048 图形绘制的话,在cocos2d-x自带的TestCpp里有,包括绘制点,直线,多边形 ...

  8. 图形绘制 Canvas Paint Path 详解

    图形绘制简介        Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...

  9. HTML5图形绘制学习(1)-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

随机推荐

  1. Exclusive access control to a processing resource

    A data processing system is provided with multiple processors that share a main memory. Semaphore va ...

  2. UWP 中的各种文件路径(用户、缓存、漫游、安装……)

    原文 UWP 中的各种文件路径(用户.缓存.漫游.安装……) UWP 提供了多种不同文件路径访问方式,对应到不同的文件路径中.可能我们只是简单用 ApplicationData.Current 获取一 ...

  3. HDU 4357 String change 法冠军

    意甲冠军: 鉴于a串b串,问我们能否a变b串 办法:自选a的2快报,ascil+=1 然后交换位置,能够操作自如倍. 3个月3以上就能T^T 2法官将着眼于暴力 #include <cstdio ...

  4. WPF loading加载动画库

    原文:WPF loading加载动画库 1. 下载Dll        https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA 2.在项目中添加引用       ...

  5. 带农历日历的DatePicker控件!Xamarin控件开发小记

    原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePi ...

  6. thinkphp 删除所有缓存 Rumtime 以及 Html 静态缓存

    <?php /** * This is not a free software, All Copyright @F.Z.B * Date: 14-8-12 下午4:08 * File: Cach ...

  7. 利用花生壳对windows server进行远程桌面

    花生壳内网穿透 http://service.oray.com/question/1824.html windows server "允许远程协助连接这台计算机" 需要在服务器管理 ...

  8. WPF支持OneWay,TwoWay,OneTime,Default和OneWayToSource

    原文:WPF支持OneWay,TwoWay,OneTime,Default和OneWayToSource 无论是目标属性还是源属性,只要发生了更改,TwoWay 就会更新目标属性或源属性. OneWa ...

  9. c# WebApi POST请求同时包含数据及其文件

    原因:创建.net WebApi的接口API.IIS作为服务端.安卓作为客户端发送json文件及其文件. Android端使用xUtils3.0实现文件上传 java代码: //要传递给服务器的jso ...

  10. NSLocalizedDescription=Request failed: unacceptable content-type: text/html 解决方法

    使用AFNetworking请求一个网站出现了以下错误 Error Domain=com.alamofire.error.serialization.response Code=- "Req ...