Markdown系列mermaid美人鱼之Flowcharts流程图

最新推荐文章于 2025-01-13 13:51:59 发布

冰阔落

最新推荐文章于 2025-01-13 13:51:59 发布

阅读量3.4k

点赞数

分类专栏： Markdown

Markdown 专栏收录该内容

6 篇文章

订阅专栏

一、简介
二、流程图 - 基本语法

一、简介

Generation of diagrams and flowcharts from text in a similar manner as markdown.

网址：https://mermaidjs.github.io/

二、流程图 - 基本语法

1、图形

//该语句声明了一个新图形和图形布局的方向。
graph TD
开始 --> 结束

方向是：

TB - 从上到下
BT - 从下到上
RL - 从右到左
LR - 从左到右
TD - 与TB相同

2、节点和形状

（1）节点

默认节点就是默认的内容

graph LR
    start

（2）带有文本的节点

graph LR
    start[开始]

（3）具有圆边的节点

graph LR
start(开始)

（4）圆形的节点

graph LR
    start((开始))

（5）非对称形状的节点

graph LR
    start>开始]

（6）菱形节点

graph LR
    start{开始}

3、节点之间的连接

（1）带箭头的连接

graph LR
  A --> B

（2）没有箭头的连接

graph LR
  A --- B

（3）连接上的文字

graph LR
  A-- 连接上的文字 ---B

或者

graph LR
    A---|连接上的文字|B

（4）带箭头和文字的连接

graph LR
    A-->|带箭头和文字的连接|B

或者

graph LR
    A-- 带箭头和文字的连接 -->B

（5）虚线连接

graph LR
   A-.->B

（6）带文字的虚线连接

graph LR
   A-. 带文字的虚线连接 .-> B

（7）粗连接

graph LR
   A ==> B

（8）带文本的粗连接

graph LR
   A == 带文本的粗连接 ==> B

（9）破坏语法的特殊字符

可以将文本放在引号内以便渲染更麻烦的字符

graph LR
    id1["破坏语法的特殊字符!"]

（10）实体代码转义字符

 graph LR
        A["这里有个引号#quot;"] -->B["特殊字符:#9829;"]

4、子图

语法：

subgraph title
    graph definition
end

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

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

6、对fontawesome的基本支持

图标通过语法fa：#icon class name＃来获取

graph TD
    B["fa:fa-twitter 和平"]
    B-->C[fa:fa-ban 禁止]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro 也许?);

欢迎关注我的微信公众号：JAVA必知必会

分享精品视频资源
分享基础系列文档

转载：https://www.jianshu.com/p/af48cc77b57a