markdown绘图插件----mermaid简介
作者:黄永刚
mermaid简介
当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。
mermaid解决这个痛点,这是一个类似markdown语法的脚本语言,通过JavaScript实现图表的生成。
先来看个例子:
1.流程图(flowchart)
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
生成的图表如下所示:
2. 时序图(sequence diagram)
sequenceDiagramparticipant Aliceparticipant BobAlice->John:Hello John, how are you?loop HealthcheckJohn->John:Fight against hypochondriaendNote right of John:Rational thoughts <br/>prevail...John-->Alice:Great!John->Bob: How about you?Bob-->John: Jolly good!
生成的图表如下所示:
3.甘特图(gantt diagram)
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dfuture task : des3, after des2, 5dfuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and json :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to ,mermaid :1d
生成的表如下:
下游项目
Mermaid 是由Knut Sveidqbist发起旨在轻便化的文档撰写。所有开发者:开发者列表
- Gitbook-plugin
- Light table
- Confluence plugin
- Using mermaid via docpad
- Using mermaid in Jekvll
- Using mermaid via Octopress
- Mardown editor Haroopad
- Plugin for atom
- Markdown Plus
- LightPaper 1.2+
- Vim Plugin
以上的这些都有集成mermaid或者开发相关的插件。
Graph
graph LRA --> B
这是申明一个由左到右,水平向右的图。\
可能方向有:
- TB - top bottom
- BT - bottom top
- RL - right left
- LR - left right
- TD - same as TB
节点与形状
默认节点
graph LR
id1
注意:’id’显示在节点内部。
文本节点
graph LR
id[This is the text in the box];
圆角节点
graph LR
id(This is the text in the box);
圆节点(The form of a circle)
graph LR
id((This is the text in the circle));
非对称节点(asymetric shape)
graph LR
id>This is the text in the box]
菱形节点(rhombus)
graph LR
id{This is the text in the box}
连接线
节点间的连接线有多种形状,而且可以在连接线中加入标签:
箭头形连接
graph LR;A-->B;
开放行连接
graph LR
A --- B
标签连接
graph LR
A -- This is the label text --- B;
箭头标签连接
A–>|text|B\
或者\
A– text –>B
graph LRA-- text -->B
虚线(dotted link,点连线)
-.->
graph LR
A-.->B
-.-.
graph LR
A-.-.B
标签虚线
-.text.->
graph LR
A-.text.->B
粗实线
==>
graph LR
A==>B
===
graph LR
A===B
标签粗线
=\=text\==>
graph LR
A==text==>B
=\=text\===
graph LR
A==text===B
特殊的语法
使用引号可以抑制一些特殊的字符的使用,可以避免一些不必要的麻烦。
graph LR\
d1[“This is the (text) in the box”]
graph LR
d1["This is the (text) in the box"]
html字符的转义字符
转义字符的使用语法:
流程图定义如下:
graph LR\
A[“A double quote:#quot;”] –> B[“A dec char:#9829;”]
渲染后的图如下:
graph LRA["A double quote:#quot;"]-->B["A dec char:#9829;"]
子图(Subgraphs)
subgraph title\
graph definition\
end
示例:
graph TBsubgraph onea1 --> a2ensubgraph twob2 --> b2endsubgraph threec1 --> c2endc1 --> a2
结果:
基础fontawesome支持
如果想加入来自frontawesome的图表字体,需要像frontawesome网站上那样引用的那样。\
详情请点击:fontawdsome
引用的语法为:++fa:#icon class name#++
graph TDB["fa:fa-twitter for peace"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camerra-retro perhaps?);
渲染图如下:
graph TDB["fa:fa-twitter for peace"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camera-retro perhaps?);
以上reference:
1.mermaid docs
第二部分—图表(graph)
定义连接线的样式
graph LRid1(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;
渲染结果:
graph LRid1(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;
备注:这些样式参考CSS样式。
样式类
为了方便样式的使用,可以定义类来使用样式
类的定义示例:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
对节点使用样式类:
class nodeId className;
同时对多个节点使用相同的样式类:
class nodeId1,nodeId2 className;
可以在CSS中提前定义样式类,应用在图表的定义中。
graph LRA-->B[AAABBB];B-->D;class A cssClass;
默认样式类:\
当没有指定样式的时候,默认采用。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
示例:
graph LRclassDef default fill:#f90,stroke:#555,stroke-width:4px;id1(Start)-->id2(Stop)
结果:
graph LR
classDef default fill:#f90,stroke:#555,stroke-width:4px;
id1(Start)-->id2(Stop)
序列图(sequence diagram)1
序列图
示例:
sequenceDiagramAlice->>John: Hello John, how are you ?John-->>Alice: Great!Alice--->>John: Huang,you are better .John-->>Alice: yeah, Just not bad.
sequenceDiagramAlice->>John: Hello John, how are you ?John-->>Alice: Great!Alice->>John: Hung,you are better .John-->>Alice: yeah, Just not bad.
观察上面的图,如果想让John出现在前面,如何控制,mermaid通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改:
sequenceDiagram\
participant John\
participant Alice\
Alice->>John:Hello John,how are you?\
John–>>Alice:Great!
sequenceDiagramparticipant Johnparticipant AliceAlice-xJohn:Hello John,how are you?John-->>Alice:Great!
消息的语法:
实线或者虚线的使用:
[Actor][Arrow][Actor]:Message text\
Arrow的六种样式:
- ->
- –>
- ->>
- –>>
- -x
- –x
示例:
sequenceDiagramAlice->John: Hello John, how are you ?John-->Alice:Great!Alice->>John: dont borther me !John-->>Alice:Great!Alice-xJohn: wait!John--xAlice: Ok!
便签
给序列图增加便签:\
具体规则:\
[right of | left of | over][Actor]:Text
\
示例:
sequenceDiagramparticipant JohnNote left of John: Text in note
结果:
跨越两个Actor的便签:
sequenceDiagramAlice->John:Hello John, how are you?Note over Alice,John:A typical interaction
sequenceDiagram
Alice->>John:Hello John, how are you?
Note over Alice,John:A typical interaction
循环Loops
在序列图中,也可以使用循环,具体规则如下:
loop Loop text
... statements...
end
示例:
sequenceDiagramAlice->>John: Hello!loop Reply every minuteJohn->>Alice:Great!end
渲染结果:
选择ALT
在序列图中选择的表达。规则如下:
alt Describing text
...statements...
else
...statements...
end
或者使用opt(推荐在没有else的情况下使用)
opt Describing text
...statements...
end
示例:
sequenceDiagramAlice->>Bob: Hello Bob, how are you?alt is sickBob->>Alice:not so good :(else is wellBob->>Alice:Feeling fresh like a daisy:)endopt Extra responseBob->>Alice:Thanks for askingend
渲染结果如下:
甘特图(gantt)2
甘特图是一类条形图,由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。
示例:
gantt
dateFormat YYYY-MM-DDsection S1
T1: 2014-01-01, 9dsection S2
T2: 2014-01-11, 9dsection S3
T3: 2014-01-02, 9d
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
先来看一个大的例子:
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to mermaid :1dsection DocumentationDescribe gantt syntax :active, a1, after des1, 3dAdd gantt diagram to demo page :after a1 , 20hAdd another diagram to demo page :doc1, after a1 , 48hsection Last sectionDescribe gantt syntax :after doc1, 3dAdd gantt diagram to demo page : 20hAdd another diagram to demo page : 48h
获得的图渲染后如下:
header 1 | header 2 |
---|---|
title | 标题 |
dateFormat | 日期格式 |
section | 模块 |
Completed | 已经完成 |
Active | 当前正在进行 |
Future | 后续待处理 |
crit | 关键阶段 |
日期缺失 | 默认从上一项完成后 |
关于日期的格式可以参考:
- string-format
- Time-Formatting
Demo
graph TBsq[Square shape] --> ci((Circle shape))subgraph A subgraphdi{Diamond with line break} -.-> ro(Rounded)di==>ro2(Rounded square shape)ende --> od3>Really long text with linebreak<br>in an Odd shape]cyr[Cyrillic]-->cyr2((Circle shape Начало));classDef green fill:#9f6,stroke:#333,stroke-width:2px;classDef orange fill:#f96,stroke:#333,stroke-width:4px;class sq,e greenclass di orange
reference
mermaid docs
本文原创首发于公众号:老王和他的IT界朋友们
微信扫描关注微信号:(原创投稿有惊喜!!!)
- 序列图的样式的定制需要在可以渲染CSS的地方才可使用,具体可以查阅参考。 ↩
- 甘特图的样式的定制需要在可以渲染CSS的地方才可使用,具体可以查阅参考。 ↩
转载于:https://www.cnblogs.com/wuyida/p/6301240.html
markdown绘图插件----mermaid简介相关推荐
- markdown绘图插件 ---- mermaid简介
mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点,这是一个类似 ...
- Markdown(四)——绘图工具mermaid之状态图stateDiagram
前言:在做软件工程时经常会需要用到绘图来帮助理解软件构造,CSDN的编辑器集成了插入绘图工具mermaid,以下是对其常用语法的一些记录整理 状态图 以下是学习mermaid语法的官网:https ...
- FusionCharts绘图插件详解
目前在做项目完成数据统计,需要将统计数据进行图形化分析.将数据做成各种图表,即柱状图和折线图,由此接触了FusionCharts绘图插件,经过查询资料和做Demo,将项目功能完成,特此总结以备将来查阅 ...
- CASS最强绘图插件信心工具箱免费下载使用
CASS最强绘图插件信心工具箱免费下载使用 功能简介 CAD如图层控制 我的选择易 地形符号(图块)替换 删除KZD旁的GCD 围墙绘制修改 快速画阳台 植被抽稀(图块.文字) 高程点自动移位 植被自 ...
- 异常强大的Markdown编辑插件-Markdown Preview Enhanced
最近使用Markdown写作,了解到以下这些Markdown写作工具 MaHua 在线markdown编辑器 百度搜索Markdown时,它排在非常靠前的位置 马克飞象- 专为印象笔记打造的Markd ...
- wPaint在线绘图插件
wPaint在线绘图插件 一.总结 一句话总结: 1.搜画图插件的时候关键词应该搜什么? jquery画图插件 js画图插件 jquery绘图插件 这些 二.在线绘图插件--wPaint 的实际应用 ...
- 【Android 插件化】插件化简介 ( 组件化与插件化 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- Python3 matplotlib的绘图函数subplot()简介
Python3 matplotlib的绘图函数subplot()简介 一.简介 matplotlib下, 一个 Figure 对象可以包含多个子图(Axes), 可以使用 subplot() 快速绘制 ...
- vim 环境写 markdown 的插件推荐
vim 环境写 markdown 的插件推荐 本文将介绍在vim环境写markdown文档或者博文的一些好用插件 markdown语法高亮及识别 博主使用vim-markdown做语法高亮.安装方法很 ...
最新文章
- strtok()函数详解
- 反转链表:输入一个链表的头结点,反转该链表并输出反转后的链表的头结点。...
- JavaScript常用工具类整理(总结版)
- 大疆地理围栏系统预防无人机闯入机场
- 信息学奥赛一本通 1119:矩阵交换行 | OpenJudge NOI 1.8 01 矩阵交换行
- use 在php 用法中的总结
- 微软解释:关于Outlook 2007的争议
- Unity3d优化文章
- 【算法导论33】跳跃表(Skip list)原理与java实现
- CI(持续集成)/CD(持续部署)
- win7中计算机被改为了句号,WIN7中中文输入法快捷键无法修改的解决方法.doc
- [python]一个遍历多层文件夹,然后替换文件内容和目录名称的案例
- 【不积跬步,无以致千里】五个常用的Linux监控脚本代码
- python怎样保存在桌面_python3应用windows api对后台程序窗口及桌面截图并保存的方法...
- Maxthon3资源嗅探器给力 MP3下载地址得来全不费功夫!
- 如何修改UG标题文字
- Himall商城枚举帮助类EnumHelper(2)
- VirtualBox的下载与安装
- Android px转dip px转sp法则
- Swift中的下标(subscript)
热门文章
- 新概念英语第二册课文电子版_新概念英语第二册课文学生(Victoria)朗读
- IP包的生成和发送接口(1)
- 2019.02.09 bzoj4455: [Zjoi2016]小星星(容斥原理+dp)
- 客户将数据库迁移上云的常用办法
- (理论)数据库建模三步骤:概念模型-逻辑模型-物理模型
- linux 下 .sh 文件语法
- [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.3 例 --- 电偶极辐射
- 实战 IE8 开发人员工具
- 微软启动了自爆程序,让我们一起帮它倒计时
- c语言数据结构kmp中next计算,数据结构——关于KMP算法中next函数的详细解析