• 流程图(flowchart)语法学习


    创建流程图需要选择语言: mermaid
    流程中的代码包裹
    graph 这里写顺序
    end
    流程图方向:
    从上到下(TB),从下到上(BT),从左到右(LR),从右到左(RL)

    TB - 从上到下
    TD - 自上而下/与自上同
    BT - 从下到上
    RL - 从右到左
    LR - 从左到右

    2.节点形状
    体育场形状的节点 Aid1([描述])
    矩形节点 A[描述]
    圆角矩形节点 B(描述)
    子例程形状中的节点 B[[描述]]
    圆形节点 C((描述))
    圆柱形节点 C [(描述)]
    右向旗帜状节点/非对称节点(asymetric shape) D>描述]
    菱形节点(rhombus)E{描述}
    六边形节点 E{{描述}}
    平行四边形 E[/描述/]
    梯形1 F[/描述\]
    梯形2 F[\描述/]

    节点间的连线
    带有箭头的链接 A-->B
    不带箭头 A --- B
    链接上的文本 A-- This is the text! ---B 或 A---|This is the text|B
    带有箭头和文本的链接 A-->|text|B 或 A-- text -->B
    虚线链接:A-.->B;
    带文本的虚线 A-. text .-> B
    粗链接 A ==> B
    带文本的粗链接 A == text ==> B
    链接链接:多个相连
    A -- text --> B -- text2 --> C
    也可以这样: a --> b & c--> d
    依赖关系ab 依赖cd: A & B--> C & D
    拆解就这样
    A --> C
    A --> D
    B --> C
    B --> D

    新的箭头类型
    A --o B
    B --x C
    多向箭头
    A o--o B
    B <--> C
    C x--x D

    例子:

    graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表名称
    id2==粗线==>id3{菱形}
    id3-.虚线.->id4>右向旗帜]
    id3--无箭头---id5((圆形))
    end

    后面百度了一圈发现还有标准流程图,这里边可以写if分支,循环啥的,我tm,上面是干啥用的??

    流程图(flowchart)语法
    流程图的语法大致分为两部分。
    - 定义元素
    tag=>type: content:url
    tag:标签,用于连接元素时使用
    type:该标签的类型。共有6种类型如下:
    start 开始
    end 结束
    operation 处理框
    subroutine 子流程
    condition 判断框
    inputoutput 输入输出框

    content:流程语句中放置的内容 和type 空格隔开
    url:链接,与流程语句绑定

    连接元素
    c2(yes)->io->e
    c2(no)->op2->e

     st=>start: 开始
     e=>end: 结束
     cond=>condition: 确定吗
     op1=>operation: 分支1
     op2=>operation: 分支2
    
     st->cond
     cond(yes)->op1->e
     cond(no)->op2->e
  • 相关阅读:
    CSS property
    CSS animation
    React 嵌套渲染对象,内部对象会是 undefined 报错的解决办法。
    flex 属性
    margin 折叠
    CSS经典布局——双飞翼布局
    CSS经典布局——圣杯布局
    CSS 正常流
    CSS selectors 选择器
    CSS function
  • 原文地址:https://www.cnblogs.com/q1359720840/p/15585347.html
Copyright © 2020-2023  润新知