Markdown绘图mermaid实用教程_markdown mermaid_落子无悔!的博客-CSDN博客

安宇雨 - 随手采集
2023-03-09 09:41:19
随手采集
0000-未整理-等待研究

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。

1. mermaid 定义

流程图

2. 流程图

语法格式如下:

graph LR; # 其中LR指的是方向
    A --> B # 不同的箭头表示

a. 方向和箭头含义

用词 graph x;

含义

箭头

含义

TB

从上到下

>

添加尾部箭头

BT

从下到上

-

不添加尾部箭头

RL

从左到右

--

单线

LR

从右到左

--text--

单线加文字

==

粗线

==text==

粗线加文字

-.-

虚线

-.text.-

虚线加文字

b. 节点含义

    默认方形
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))
    id1{菱形}
    id2{{六角形}}
    id3[/平行四边形/]
    id4[\反向平行四边形\]
    id5[/梯形\]
    id6[\反向梯形/]

c. 示例

graph LR;
    A>"Ubuntu<br>(Linux)"] -.soft.-> C{TV}
    B["MAC"] ==> D((ARM64))
    D--> C
    A --> B

soft

Ubuntu
(Linux)

MAC

ARM64

graph LR
    a---b
    b--文本1!---c
    c---|文本2|d
    d===e
    e==文本3===f
    f-.-g
    g-.文本.-h

文本1!

文本2

文本3

文本

flowchart LR
    A o--o B
    B <--> C
    C x--x D
    
    旧连线 --文本--> 也会不同

文本

旧连线

也会不同

延长连线：
增加相应字符即可，如下图中的B到E，连线中增加了一个 - 。字符可多次添加。

graph LR
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B --->|No| E[End];

多重链

graph LR
   a --> b & c--> d
   
   A & B--> C & D
   
    X --> M
    X --> N
    Y --> M
    Y --> N

注释 %%这是一条注释，在渲染图中不可见
子图

%%这是一条注释，在渲染图中不可见
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

three

one

two

原网址: 访问
创建于: 2023-03-09 09:41:18
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论