Mermaid知识点总结3 - Flowchart 2

最新推荐文章于 2024-04-24 19:16:03 发布

JackSerin

最新推荐文章于 2024-04-24 19:16:03 发布

阅读量472

点赞数

分类专栏： Mermaid 文章标签： markdown

本文链接：https://blog.csdn.net/u011315681/article/details/120179266

版权

10 篇文章 7 订阅

订阅专栏

实心箭头

flowchart LR
    A-->B

实心线段

flowchart LR
    A---B

实心箭头

flowchart LR
    A-->B

实心带文字

flowchart LR
      A-- This is the text! ---B

这个在Typora里面的渲染效果有点丑

或者使用以下方法

flowchart LR
      A---|This is the text|B

这个在Typora里面的渲染效果有点丑

实心带文字箭头

flowchart LR
     A-- text -->B

或者使用以下方法：

flowchart LR
      A-->|text|B

虚线箭头

flowchart LR
    A-.->B

虚线带文字箭头

flowchart LR
    A-. text .-> B

粗线箭头

flowchart LR
    A==>B

粗线带文字箭头

flowchart LR
    A== text ==>B

箭头链

flowchart LR
    A -- text --> B -- text2 --> C

当然也可以连接多个节点

flowchart LR
   a --> b & c--> d

当然也可以分别进行描述，虽然麻烦一些，但是在需要添加文字时候，应该只能用这种方法

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

不过教程里并不喜欢这个方法，他认为这样会使得渲染前的Markdown文本不方便阅读

一个好玩的东西，原文：The Swedish word lagom comes to mind. It means, not too much and not too little. 什么瑞典中庸之道

加点奇怪的形状

flowchart LR
    A --o B
    B --x C

flowchart LR
    A o--o B
    B <--> C
    C x--x D

控制链接不同长度

流程图中每个节点最终在渲染时候将会对应渲染图中的一个等级，根据其等级链接到相应的水平或者垂直节点，默认情况下，链接可以跨越任意数量的等级，使用者也可以通过在链接定义中添加额外符号来要求某个链接要长于其他链接，下面给出一个实例：

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

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

上面的渲染图中，End节点在其原本位置再向下两级的位置

如果使用另一方式在边上添加文本，那么多加的链接长度需要体现为添加到右侧的破折号，如下例所示：

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

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

如果要在节点中使用会产生歧义的字符，则需要使用双引号，如下所示：

flowchart LR
    id1["This is the (text) in the box"]

也可以使用编码，如下所示：

    flowchart LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]

这是什么编码？

关注