adrai / flowchart.js

Draws simple SVG flow chart diagrams from textual representation of the diagram
http://flowchart.js.org/
MIT License
8.49k stars 1.21k forks source link

Flow chart scaling and alignment issues #242

Open OSCAR2766 opened 1 year ago

OSCAR2766 commented 1 year ago

image The more branches the flowchart has, the arrows will automatically scale, but the stretch is too long. And keep the text boxes from being vertically aligned.

a1=>parallel: 新品交接
a2=>parallel: 进行厂家评
估,安排验厂
和落实意向单
a3=>operation: 录入供应商和
产品信息同时
签署经销协议
a4=>parallel: 通知PM产品
专员及开发人
员可下需求单
a5=>operation: 转化成销售订单
后生成采购单下
达给供应商
a6=>parallel: 安排首款申请并跟
进供应商确认交期
a7=>parallel: 跟进产品及包材产
前样并进行批核
a8=>parallel: 提供DI生成UDI;
进行FDA列示
a9=>parallel: 建立BOM表
a10=>parallel: 安排验货
a11=>parallel: 申请尾款,安

排出货
a12=>operation: 发货通知
a13=>operation: 录入GUDID资料
a14=>operation: 到货通知
a15=>operation: 成本核算

b1=>operation: 项目交
接表,
产品样
品及报价
b2=>operation: 供应商
审厂
b3=>operation: PM通知产品
专员下达采购
需求
b4=>operation: 财务付款
b5=>operation: 配合跟进
开发人员
确认新品
产前样
b6=>operation: 各部门
配合确认
产品稿件
b7=>operation: 厂家及法规申述同
事根据定稿产品名/型号进行列示
b8=>operation: 产品专员梳理给出BOM信息
b9=>operation: 品质部安
排验货
b10=>operation: 财务付款
物流安排运输
b11=>operation: 物流提供相关费用清单

c1=>condition: 资料是
否准确
清晰
c2=>condition: 验厂评分(是
否正规/符合要求)
c3=>condition: 货物是否合格

d1=>operation: 继续与
供应商
沟通补充
d2=>operation: 整改或
寻找新
供应商
d3=>operation: 安排返工修正
aa=>operation: 转折框

a1(path1,bottom)->aa->a2
a1(path2,right)->b1

a2(path1,bottom)->a3
a2(path2,right)->b2

b1(right)->c1
c1(yes)->a2
c1(no,right)->d1->a2

b2(right)->c2
c2(yes,bottom)->a3
c2(no,right)->d2(top)->b2

a3->a4
a4(path1,bottom)->a5
a4(path2,right)->b3->a5

a5->a6
a6(path1)->a7
a6(path2,right)->b4

a7(path1)->a8
a7(path2,right)->b5(right)->b6->a8
a8(path1)->a9
a8(path2,right)->b7

a9(path1)->a10
a9(path2,right)->b8

a10(path1,bottom)->a11
a10(path2,right)->b9(right)->c3

c3(yes,bottom)->a11
c3(no,right)->d3(top)->b9

a11(path1)->a12->a13->a14->a15(right)->b11
a11(path2,right)->b10
OSCAR2766 commented 1 year ago

According to my attempts, by reducing the width of the contents in operation or condition, I can reduce the zoom a little, but the overall presentation is still not good

OSCAR2766 commented 1 year ago

The end tag can also be used to bring the text box closer, but the condition is still far away

OSCAR2766 commented 1 year ago

image

a1=>parallel: 新品交接
a2=>parallel: 进行厂家评
估,安排验厂
和落实意向单
a3=>operation: 录入供应商和
产品信息同时
签署经销协议
a4=>parallel: 通知PM产品
专员及开发人
员可下需求单
a5=>operation: 转化成销售订单
后生成采购单下
达给供应商
a6=>parallel: 安排首款申请并跟
进供应商确认交期
a7=>parallel: 跟进产品及包材产
前样并进行批核
a8=>parallel: 提供DI生成UDI;
进行FDA列示
a9=>parallel: 建立BOM表
a10=>parallel: 安排验货
a11=>parallel: 申请尾款,安

排出货
a12=>operation: 发货通知
a13=>operation: 录入GUDID资料
a14=>operation: 到货通知
a15=>operation: 成本核算

b1=>end: 项目交
接表,
产品样
品及报价
b2=>end: 供应商
审厂
b3=>end: PM通知产品
专员下达采购
需求
b4=>end: 财务付款
b5=>end: 配合跟进
开发人员
确认新品
产前样
b6=>operation: 各部门
配合确认
产品稿件
b7=>end: 厂家及法规申述同
事根据定稿产品名/型号进行列示
b8=>operation: 产品专员梳理给出BOM信息
b9=>end: 品质部安
排验货
b10=>end: 财务付款
物流安排运输
b11=>operation: 物流提供相关费用清单

c1=>condition: 资料是
否准确
清晰
c2=>condition: 验厂评
分(是
否正规/
符合要求)
c3=>condition: 货物是否合格

d1=>end: 继续与
供应商
沟通补充
d2=>end: 整改或
寻找新
供应商
d3=>operation: 安排返工修正
aa=>operation: 转折框

a1(path1,bottom)->aa->a2
a1(path2,right)->b1

a2(path1,bottom)->a3
a2(path2,right)->b2

b1(right)->c1
c1(yes)->a2
c1(no,right)->d1->a2

b2(right)->c2
c2(yes,bottom)->a3
c2(no,right)->d2(top)->b2

a3->a4
a4(path1,bottom)->a5
a4(path2,right)->b3->a5

a5->a6
a6(path1)->a7
a6(path2,right)->b4

a7(path1)->a8
a7(path2,right)->b5(right)->b6->a8
a8(path1)->a9
a8(path2,right)->b7

a9(path1)->a10
a9(path2,right)->b8

a10(path1,bottom)->a11
a10(path2,right)->b9(right)->c3

c3(yes,bottom)->a11
c3(no,right)->d3(top)->b9

a11(path1)->a12->a13->a14->a15(right)->b11
a11(path2,right)->b10
OSCAR2766 commented 1 year ago

Maybe we can take a look at this https://github.com/adrai/flowchart.js/issues/115

OSCAR2766 commented 1 year ago

Maybe we can take a look at this #115

(align-next=no) seems to be not aligned in my flowchart

adrai commented 1 year ago

Like already said several times, flowchart.js is only for simple charts... btw: you have a lot of end nodes... normaly there is only 1 start and 1 end node... I'm not actively using this module anymore... so feel free if you want to provide a PR to optimize this...

spiritualgeek commented 1 year ago

Why not archive this project rather?