markdown Flowcharts（流程图）

🧙 Questions

流程图: 描述业务具体实现逻辑

☄️Ideas

由于官方生成的png比较小，所以推荐使用短一点的线或者png生成的长宽设置大一点。

流程方向

• TB: 从上到下
• BT: 从下到上
• RL: 从右到左
• LR: 从左到右

节点类型

• ([xx]) : 圆边节点
• [\xx\] : 平行四边形节点
• [[xx]] : 双方形节点
• [xx] : 普通节点
• {xx} : 菱形节点
• >xx] : 燕尾节点

节点样式

style ${node alia name} fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 10 5

• fill: 填充色
• stroke: 边框色
• color: 字体颜色
• stroke-width: 边框宽度
• stroke-dasharray: 边框虚线 10表示实线长度/5表示空白长度

自定义样式

node[x]:::nodeCustomStyle
classDef nodeCustomStyle fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

线段类型

线的长短分为三档 -- --- ----

• -->|x| : 线上带说明
• --/---/---- : 实线/无箭头
• -->/--->/----> : 实线/有箭头
• ==/===/==== : 加粗/无箭头
• ==>/===>/====> : 加粗/有箭头
• -.-/-..-/-...- : 虚线/无箭头
• -.->/-..->/...-> : 虚线/有箭头

子流程

graph TB
    subgraph node1[node1]
        node2[node2] === node3[node3]
    end

基础语法

graph TB
    
    %% 开始
    n_start([开始]) --> n_input[\输入\] --> n_input_prev[[输入转options]] ---> n_input_start[开始处理] ----> n_switch{判断执行方式}
    
    %% 逻辑判断 
    n_switch ===> |SQL| n_sql[接受sql]
    n_switch -...-> |SYNC| n_sync[接受json]
    n_switch ---> |其他| n_other[抛出异常]
    
    %% sql执行逻辑
    subgraph n_sub_sql[处理sql]
        n_sql === n_sql_check[检查sql合法性]
    end

    %% sync执行逻辑
    subgraph n_sub_sync[处理json]
        n_sync === n_sync_check[检查json合法性]
    end

    %% 合并到写入逻辑
    n_sql_check ====> n_flink_reader[进入reader]
    n_sync_check ==> n_flink_reader

    %% 写出逻辑
    n_flink_reader -..-> n_flink_data[获取数据]:::nodeStyle1  -...-> n_flink_translate[数据转换]:::nodeStyle2 -....-> n_flink_writer[进入reader]:::nodeStyle3 --> n_output[\输出\] --> n_over([结束])

    %% 自定义样式
    classDef nodeStyle1 fill:#bbf
    classDef nodeStyle2 color:blue
    classDef nodeStyle3 fill:white,stroke:#f66,stroke-width:3px,color:black,stroke-dasharray: 4 3

graph TB
    
    %% 开始
    n_start([开始]) --> n_input[\输入\] --> n_input_prev[[输入转options]] ---> n_input_start[开始处理] ----> n_switch{判断执行方式}
    
    %% 逻辑判断 
    n_switch ===> |SQL| n_sql[接受sql]
    n_switch -...-> |SYNC| n_sync[接受json]
    n_switch ---> |其他| n_other[抛出异常]
    
    %% sql执行逻辑
    subgraph n_sub_sql[处理sql]
        n_sql === n_sql_check[检查sql合法性]
    end

    %% sync执行逻辑
    subgraph n_sub_sync[处理json]
        n_sync === n_sync_check[检查json合法性]
    end

    %% 合并到写入逻辑
    n_sql_check ====> n_flink_reader[进入reader]
    n_sync_check ==> n_flink_reader

    %% 写出逻辑
    n_flink_reader -..-> n_flink_data[获取数据]:::nodeStyle1  -...-> n_flink_translate[数据转换]:::nodeStyle2 -....-> n_flink_writer[进入reader]:::nodeStyle3 --> n_output[\输出\] --> n_over([结束])

    %% 自定义样式
    classDef nodeStyle1 fill:#bbf
    classDef nodeStyle2 color:blue
    classDef nodeStyle3 fill:white,stroke:#f66,stroke-width:3px,color:black,stroke-dasharray: 4 3

注意事项

• 节点名称有xx_end结尾会报错
• 菱形节点（判断节点）后线的长度要大于2 ---
• 子流程中线的长度要大于2

🔗 Links

• mermaid-flowchart
• 在线生成