Mermaid 学习

VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid

流程图

flowchart

graph LR;
A-->B;
A-->C;
B-->D;
C-->D;

时序图

sequence diagram

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
prevail...
   John-->Alice:Great!
   John->Bob: How about you?
   Bob-->John: Jolly good!

甘特图

gantt diagram

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 json      :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

Graph

graph LR
    A --> B

这是申明一个由左到右,水平向右的图。

graph LR
A -->B

可能方向有:

  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - same as TB

节点与形状

默认节点

graph LR
id1
  • 注意:id 显示在节点内部。

graph LR
id1

文本节点

graph LR
id[This is the text in the box];

展示如下:

graph LR
id[This is the text in the box];

圆角节点

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));

graph LR
id((This is the text in the circle));

非对称节点(asymetric shape)

graph LR
id>This is the text in the box]

graph LR
id>This is the text in the box]

菱形节点(rhombus)

graph LR
id{This is the text in the box}

graph LR
id{This is the text in the box}

连接线

节点间的连接线有多种形状,而且可以在连接线中加入标签:

箭头形连接

graph LR;
  A-->B;

graph LR;
A-->B;

开放行连接

graph LR
A --- B

graph LR
A --- B

标签连接

graph LR
A -- This is the label text --- B;

graph LR
A -- This is the label text --- B;

箭头标签连接

A–>|text|B 或者 A– text –>B

graph LR
A-- text -->B

虚线(dotted link,点连线)

-.->-.-

graph LR
A-.->B

graph LR
A-.-B

标签虚线

graph LR
A-.text.->B

graph LR
A-.text.->B

粗实线

==>

graph LR
A==>B

标签粗线

=\=text\==>=\=text\===

graph LR
A==text==>B

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 LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]

子图(Subgraphs)

subgraph title
graph definition
end

示例:

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

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

基础 fontawesome 支持

想加入来自frontawesome的图表字体,详情请点击:fontawdsome

引用的语法为:++fa:#icon class name#++

graph TD
      B["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 TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camerra-retro perhaps?);

更多参考:mermaid docs

图表(graph)

定义连接线的样式

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;

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;

备注:上面的样式参考 CSS 样式。

样式类

为了方便样式的使用,可以定义类来使用样式

类的定义示例:

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

对节点使用样式类:

class nodeId className;

同时对多个节点使用相同的样式类:

class nodeId1,nodeId2 className;

可以在CSS中提前定义样式类,应用在图表的定义中。

graph LR
      A-->B[AAABBB];
      B-->D;
      class A cssClass;

默认样式类:

当没有指定样式的时候,默认采用。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

示例:

graph LR
    classDef 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)

示例:

sequenceDiagram
Alice->John: Hello John, how are you ?
John-->Alice:Great!
Alice->>John: dont borther me !
John-->>Alice:Great!
Alice-xJohn: wait!
John--xAlice: Ok!

sequenceDiagram
    Alice->John: Hello John, how are you ?
    John-->Alice:Great!
    Alice->>John: dont borther me !
    John-->>Alice:Great!
    Alice-xJohn: wait!
    John--xAlice: Ok!

如果想让 John 出现在前面,mermaid 通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改:

sequenceDiagram
  participant John
  participant Alice
  Alice-xJohn:Hello John,how are you?
  John-->>Alice:Great!

sequenceDiagram
  participant John
  participant Alice
  Alice-xJohn:Hello John,how are you?
  John-->>Alice:Great!

箭头的六种样式:

  • ->
  • –>
  • ->>
  • –>>
  • -x
  • –x

便签

给序列图增加便签:

具体规则:

[right of | left of | over][Actor]:Text

示例:

sequenceDiagram
  participant John
  Note left of John: Text in note

sequenceDiagram
  participant John
  Note left of John: Text in note

跨越两个 Actor 的便签:

sequenceDiagram
  Alice->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

示例:

sequenceDiagram
  Alice->>John: Hello!
  loop Reply every minute
    John->>Alice:Great!
  end

sequenceDiagram
  Alice->>John: Hello!
  loop Reply every minute
    John->>Alice:Great!
  end

选择 ALT

在序列图中选择的表达。规则如下:

alt Describing text
...statements...
else
...statements...
end

或者使用 opt (推荐在没有 else 的情况下使用)

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

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)

甘特图是一类条形图,由 Karol Adamiechi 在 1896 年提出, 而在 1910 年 Henry Gantt 也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

示例:

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

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

更加丰富的:

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

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

header 1 header 2
title 标题
dateFormat 日期格式
section 模块
Completed 已经完成
Active 当前正在进行
Future 后续待处理
crit 关键阶段
日期缺失 默认从上一项完成后

关于日期的格式可以参考:

范例

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        di{Diamond with  line break} -.-> ro(Rounded)
        di==>ro2(Rounded square shape)
    end

    e --> 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 green
    class di orange

graph TB
sq[Square shape] --> ci((Circle shape))

subgraph A subgraph
di{Diamond with line break} -.-> ro(Rounded)
di==>ro2(Rounded square shape)
end

e --> od3>Really long text with linebreak
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 green
class di orange

原文地址:https://www.cnblogs.com/q735613050/p/9368331.html

时间: 2024-10-15 14:41:01

Mermaid 学习的相关文章

&lt;老友记&gt;学习笔记

这是六个人的故事,从不服输而又有强烈控制欲的monica,未经世事的千金大小姐rachel,正直又专情的ross,幽默风趣的chandle,古怪迷人的phoebe,花心天真的joey——六个好友之间的情路坎坷,事业成败和生活中的喜怒哀乐,无时无刻不牵动着彼此的心,而正是正平凡的点点滴滴,却成为最令人感动与留恋的东西. 人物:1.瑞秋•格林(RACHEL GREENE)由珍妮佛•安妮斯顿(Jennifer Aniston)扮演 瑞秋是莫妮卡的高中同学,在与牙医未婚夫的婚礼上脱逃至莫妮卡处. 2.罗

决策树模型与学习《一》

html { } :root { } html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif } body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0p

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习(吐血超详细总结)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处