Mermaid知识点总结4 - Flowchart 3

Mermaid知识点总结4 - Flowchart 3

子图

添加子图时候定义方式如下所示：

subgraph title
    graph definition
end

下面展示了一个子图的例子：

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

同样，也可以为子图设置确定的ID，如下所示：

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

不过吐槽下不太明白使用ide1是什么意思

子图也可以使用箭头与子图或者子图内节点相连，如下所示：

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

子图方向同样可以设置

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

这一段代码在在线编辑器中可以正常运行，但是在Typora中并不可以，猜测是direction部分的问题，Typora可能不支持direction相关的操作，所以此处并没有给出运行效果。

添加链接

对节点添加链接或者JavaScript callback函数是可行的，当然在Markdown中对此并不支持

添加注释

使用%%在mermaid中添加单行注释

节点风格

可以对节点样式进行设定，包括填充颜色，边框样式等

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

同样也可以对链接颜色和样式进行设定，当然由于链接没有id，所以实际上设定的链接样式将根据所指定的数字来决定，从0开始，设定的链接号码将会设定到第n个链接上，如下设定将会应用到第四个设定的链接

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

使用类 Classes，可以将设定好的样式直接应用到相应对象上，而无需对相应对象进行重复设置，下面为一个定义类的例子：

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

将对象设定到类上，可以使用以下方法，一次设定一个或者多个类：

class nodeId1,nodeId2 className;

下面给出了一个使用类的实例：

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

如果在新建类时候，将一个类名设置为default，则所有节点将会使用该类型，无需再进行设定，如下所示：

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

CSDN并不能进行正常的样式渲染，在Typora中是正常的

Font Awesome

Mermaid支持从Font Awesome中添加符号，符号的添加通过语法fa:#icon class name#进行

Font Awesome是一套方便简单的矢量图标，可以被定制大小、颜色、阴影以及任何可以用CSS描述的样式

flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

这里其实并没有显示出来Font Awesome，应该还是Typora不支持的原因，且滑稽的是教程中给出的结果也没有正常显示，而是和上面显示相同，在在线编辑器中，可以对Font Awesome进行较好的支持，实际显示效果如下所示：

关于空格

节点和链接之间允许有1个空格，但是节点与其文本、链接与其文本之间不应有任何空格，如下所示：

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]