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 1header 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界朋友们

微信扫描关注微信号：（原创投稿有惊喜！！！）

  1. 序列图的样式的定制需要在可以渲染CSS的地方才可使用，具体可以查阅参考。 ↩
  2. 甘特图的样式的定制需要在可以渲染CSS的地方才可使用，具体可以查阅参考。 ↩

转载于:https://www.cnblogs.com/wuyida/p/6301240.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/429962.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java NIO 教程

Java NIO 教程

NIO 概述 NIO有三个核心组件&#xff1a; 通道&#xff08;Channels&#xff09;缓冲器&#xff08;Buffers&#xff09;选择器&#xff08;Selectors&#xff09; 实际上&#xff0c;NIO的组件和类远不止这三个&#xff0c;但这个三个组件是核心。至于其它组件&#xff0c;…
阅读更多...
threejs相机和渲染器

threejs相机和渲染器

渲染器 渲染器其实代表的是canvas标签。 渲染器的类型 WebGLRender 使用WebGL来渲染图形&#xff0c;速度较快&#xff0c;但是有些机器不支持WebGL。 CanvasRender 使用canvas2d来渲染图形&#xff0c;在较老的版本上&#xff0c;主要是用来渲染2D图形。现在这个渲染器在…
阅读更多...
threejs概览

threejs概览

threejs术语和概念 threejs的API很长&#xff0c;有很多概念和术语&#xff0c;理解了这些概念和术语&#xff0c;才能更好的使用threejs。这些概念和术语都藏在API右侧的大纲中&#xff0c;下图简单整理了一下这些概念&#xff1a; 这些概念又分为四个大类&#xff08;见上图…
阅读更多...
leetcode数组汇总_[LeetCode] 300. 最长上升子序列

leetcode数组汇总_[LeetCode] 300. 最长上升子序列

题目链接&#xff1a; https://leetcode-cn.com/problems/longest-increasing-subsequence难度&#xff1a;中等通过率&#xff1a;43.0%题目描述:给定一个无序的整数数组&#xff0c;找到其中最长上升子序列的长度。示例: 输入: [10,9,2,5,3,7,101,18] 输出: 4 解释:…
阅读更多...
threejs创建平面几何形状

threejs创建平面几何形状

创建平面几何形状 平面几何形状有三种&#xff1a;点&#xff0c;线&#xff0c;面三种&#xff0c;下面说说用threejs创建这几种形状的方法。 创建点 创建点可以使用Points类。 function createPoints(){//创建一个Geometry&#xff0c;并添加点let geometry new THREE.G…
阅读更多...
threejs精灵(Sprite)

threejs精灵(Sprite)

Sprite精灵 Sprite叫精灵&#xff0c;计算机图形学中&#xff0c;精灵指包含于场景中的二维图像或动画&#xff08;wiki&#xff09;。在threejs中&#xff0c;这样说明Sprtite&#xff08;doc&#xff09; : A sprite is a plane that always faces towards the camera , ge…
阅读更多...
threejs加载3D模型例子

threejs加载3D模型例子

加载3D模型 首先要引入ColladaLoader加载器&#xff0c;Collada是一个3D模型交换方案&#xff0c;即不同的3D模型可以通过Collada进行相互转换&#xff0c;言外之意&#xff0c;threejs可以使用Collada将3D模型的数据转换成自己支持的格式&#xff0c;从而在浏览器上渲染出来。…
阅读更多...
threejs纹理

threejs纹理

纹理 纹理用来表现物体的细节。理论上可以将物体的每个细节建模出来&#xff0c;但是这样时间成本和性能成本都太高&#xff0c;因此&#xff0c;将物体的一些细节用纹理来表示。 图片纹理 图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。 …
阅读更多...
threejs对象拾取

threejs对象拾取

对象拾取 对象拾取也就是要获得鼠标事件发生位置的图形对象。在threejs中&#xff0c;是通过Raycaster 对象来拾取对象的&#xff0c;ray是射线&#xff0c;caster是投射器&#xff0c;从字面上即可理解其工作原理是&#xff1a;从某个方向发射一条射线&#xff0c;穿过鼠标所…
阅读更多...
threejs指定对象旋转中心

threejs指定对象旋转中心

指定对象旋转中心 默认情况下&#xff0c;对象的旋转中心都是自身的中心。对于组对象而言&#xff0c;也是如此。因此&#xff0c;可以利用这个特点&#xff0c;实现对象绕任何点旋转&#xff0c;也就是指定旋转中心。比如我们想要下图的对象绕A点旋转 我们可以添加我们的对…
阅读更多...
threejs设置对象层次

threejs设置对象层次

设置层次 threejs提供了层次的支持。和相机处于同一层次的对象可见&#xff0c;否则不可见。在threejs中&#xff0c;最多可以设置32层&#xff0c;默认的层次是1。层次在有些系统中很有用&#xff0c;可以将不同的模式的对象设成不同的层次&#xff0c;这样&#xff0c;切换模…
阅读更多...
Text段、Data段和BSS段

Text段、Data段和BSS段

不同的compiler在编译的过程中对于存储的分配可能略有不同&#xff0c;但基本结构大致相同。 大体上可分为三段&#xff1a;Text段、Data段和BSS段。 text段用于存放代码&#xff0c;通常情况下在内存中被映射为只读&#xff0c;但data和bss是可写的。 数据存放通常分成如下几个…
阅读更多...
threejs渲染器剔除模式

threejs渲染器剔除模式

渲染器剔除模式 渲染器可以设置成舍弃某些面&#xff0c;如前面、背面等&#xff0c;在【WebGLRenderer Constants】中对此有说明。默认情况下&#xff0c;是剔除掉背面&#xff0c;也就是背对着相机的面。下面看看例子&#xff1a; 首先创建一个正方形&#xff0c;给每个面不…
阅读更多...
threejs路径

threejs路径

路径 引用百度百科的解释&#xff1a; 路径通常指存在于多种计算机图形设计软件中的以贝塞尔曲线为理论基础的区域绘制方式。路径在Canvas、SVG上都有相关定义&#xff0c;一般用来创建形状。在threejs中&#xff0c;也可以用来创建形状&#xff0c;除此之外&#xff0c;还可…
阅读更多...
OpenGL ES 纹理设置

OpenGL ES 纹理设置

纹理过滤纹理采样最近点采样线性纹理采样MIPMAP纹理纹理过滤 纹理拉伸&#xff1a;重复拉伸和截取拉伸 用于指定纹理坐标超过(00.0,1.0)范围时所发生的行为&#xff0c;使用glTexParameterf函数指定&#xff0c;GL_TEXTURE_WRAP_S 定义 s 坐标超出范围[0.0, 1.0]的情况&#xf…
阅读更多...
ubuntu联网不稳定，时断时连问题的解决办法

ubuntu联网不稳定，时断时连问题的解决办法

概览 ubuntu联网不稳定&#xff0c;时断时连问题的解决办法现象网络一会儿连上&#xff0c;过一会又自动断开&#xff0c;再等一会儿又断了。问题原因可能是受ipv6的影响解决办法关闭掉ipv6 详细步骤 1、编辑连接&#xff0c;打开“ipv6 settings”&#xff0c;将method设置…
阅读更多...
搭建GitLab+Jenkins持续集成环境图文教程

搭建GitLab+Jenkins持续集成环境图文教程

GitLab是一个代码仓库&#xff0c;用来管理代码。Jenkins是一个自动化服务器&#xff0c;可以运行各种自动化构建、测试或部署任务。所以这两者结合起来&#xff0c;就可以实现开发者提交代码到GitLab&#xff0c;Jenkins以一定频率自动运行测试、构建和部署的任务&#xff0c;…
阅读更多...
threejs-经纬度转换成xyz坐标的方法

threejs-经纬度转换成xyz坐标的方法

用threejs做3D应用时&#xff0c;很经常会接触到球状物体&#xff0c;比如说地球&#xff0c;要定义球上的一点&#xff0c;用经纬度是常用的办法。现在&#xff0c;我们要在北京这个地方标一个点&#xff0c;北京的坐标为——北纬39.9”&#xff0c;东经116. 3”&#xff0c;该…
阅读更多...
dashboard windows 前端开发环境搭建

dashboard windows 前端开发环境搭建

dashboard是kubernetes的云管平台UI界面&#xff0c;正常情况下&#xff0c;其是在linux下开发的&#xff0c;但是&#xff0c;有些特殊情况下&#xff0c;我们也可能希望在windows上搭建起dashboard的开发环境 这里我们将搭建的开发环境的结构如下&#xff1a; windows上只运…
阅读更多...
Visual Studio2012打开时弹出“遇到异常：这可能是由某个扩展导致的”错误的解决办法...

Visual Studio2012打开时弹出“遇到异常：这可能是由某个扩展导致的”错误的解决办法...

Visual Studio2012打开时弹出“遇到异常&#xff1a;这可能是由某个扩展导致的”错误的解决办法&#xff1a; 具体问题如下&#xff1a; 分析原因&#xff1a;网上搜集了以下&#xff0c;出现异常的原因是安装了第三方控件&#xff0c;然后删除是没有删除干净&#xff0c;导致日…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023