Ability to change the direction of arrow lines

[mackypogi02]

Hi sir,

I found your codes helpful for my project.
I hope you can help me with my problem.

Is there a way to change the direction of "operation"? its default is always going down which Im having a problem, I need to turn the arrow line of the "operation" to turn "right"
like the "condition" you can modify it like "cond(yes,right)".

here is my code:

st=>start: Start
e=>end
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2
op3->sub1->op4->op1

[adrai]

I look what I can do... ;-)

PS. @stefanwey exactly what you wanted some days ago, right?

[adrai]

try the newest version with this code ;-)

st=>start: Start
e=>end
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2
op3->sub1->op4(left)->op1

[mackypogi02]

wow! thank you so much for fast response adrai :)

it works fine for me with

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2->e
op3(right)->sub1(right)->op4(right)->op1

you can expect for more questions from me in the future :)
your work really help me alot. thanks again.

[mackypogi02]

I found an issue regarding the "op3(right)->sub1(right)->op4(right)->op1" the right arrow line did not change in size.

another thing is, is it possible to change the font style,weight,family of the code? im using the default code.

var o = {
'line-width': 2,
'line-length': 30,
'text-margin': 8,
'font-size': 12,
'font-style': 'normal',
'font-weight': 'normal',
'font-family': 'calibri',
'font-color': 'black',
'line-color': 'black',
'element-color': 'red',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'symbols': {
'start': {},
'end': {},
'condition': {},
'inputoutput': {},
'operation': {},
'subroutine': {}
}

[mackypogi02]

Hi @adrai ,

Here is my complete code, it is working but the flowchart does'nt looks fine, may you please check my codes? I hope you can suggest something to sort this out.

here it is,

st=>start: Start:>link here
e=>end:>link here
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request
cond2=>condition: Account Found?
op5=>operation: 2.5 Check if there is a ZFR ID Linked
op7=>operation: 3.0 Open Sap ISELL
cond3=>condition: ZFR Found?
op6=>operation: 2.6 Link the Zlogis ID
cond4=>condition: Any issues on the system?
op8=>operation: 3.1 inform immediate superior and let them contact the Resolver Group
op9=>operation: 3.3 Wait for the response
sub2=>subroutine: Resolver Group to handle the request
op10=>operation: 4.0 Search in SAP iSELL
op11=>operation: 5.0 Create an account in SAP GT
cond5=>condition: Found in iSELL?
cond6=>condition: Found a Account on both GT and iSELL?
op12=>operation: 6.0 Linking both SAP iSELL and SAP GT
op13=>operation: 7.0 Check the Employee Responsible in Logis

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2->cond2
op3(right)->sub1(right)->op4(right)->op1
cond2(yes,right)->op5(right)->cond3
cond2(no)->op7
cond3(yes,right)->op6
cond3(no)->op7->cond4
cond4(yes,right)->op8(right)->sub2(right)->op9(right)->op7
cond4(no)->op10->cond5
cond5(yes,bottom)->cond6
cond5(no)->op11
op11->op13
cond6(yes,bottom)->op12
cond6(no)->op11
op12->op13->e

[adrai]

try now ;-)

[mackypogi02]

Hi @adrai

did you try the codes I have posted?

I think the "op3(right)->sub1(right)->op4(right)->op1" the right arrow line did not change in size.

[adrai]

what do you mean by did not change in size?

[mackypogi02]

and another thing is, in my codes the line "cond3(yes,right)->op6
cond3(no)->op7->cond4" is not working. can you please check it out sir @adrai

thank you so much!

[mackypogi02]

Sir you can see it if you try my codes

st=>start: Start:>link here
e=>end:>link here
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request
cond2=>condition: Account Found?
op5=>operation: 2.5 Check if there is a ZFR ID Linked
op7=>operation: 3.0 Open Sap ISELL
cond3=>condition: ZFR Found?
op6=>operation: 2.6 Link the Zlogis ID
cond4=>condition: Any issues on the system?
op8=>operation: 3.1 inform immediate superior and let them contact the Resolver Group
op9=>operation: 3.3 Wait for the response
sub2=>subroutine: Resolver Group to handle the request
op10=>operation: 4.0 Search in SAP iSELL
op11=>operation: 5.0 Create an account in SAP GT
cond5=>condition: Found in iSELL?
cond6=>condition: Found a Account on both GT and iSELL?
op12=>operation: 6.0 Linking both SAP iSELL and SAP GT
op13=>operation: 7.0 Check the Employee Responsible in Logis

st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2->cond2
op3(right)->sub1(right)->op4(right)->op1
cond2(yes,right)->op5(right)->cond3
cond2(no)->op7
cond3(yes,right)->op6
cond3(no)->op7->cond4
cond4(yes,right)->op8(right)->sub2(right)->op9(right)->op7
cond4(no)->op10->cond5
cond5(yes,bottom)->cond6
cond5(no)->op11
op11->op13
cond6(yes,bottom)->op12
cond6(no)->op11
op12->op13->e

the right arrow line did not change its size when I use the code below, i think the "'line-length':30," is not working for the right arrow lines like "op3(right)->sub1(right)"
var o = {
'line-width': 2,
'line-length': 30,
'text-margin': 8,

[adrai]

is v1.2.10 better?

the line-length attribute is just a proposal... the algorithm could adapt it to rearrange the whole chart...

[mackypogi02]

Hi @adrai

check this screenshot

the arrow lines pointing to the right doesn't have a min length. even I declare "'line-length': 30,"

and is it posible for the condition symbol to cond(yes,left) so that the arrow lines will not merge together incase it has a same path or way. see example image below

[mackypogi02]

I hope you can resolve the problem regarding that too long arrow lines

thank you so much!

[adrai]

I can't solve it, because the algorithm tries to draw the chart in this fashion:

|         /
|      /
|   /
|/

this library can generate only "nice" charts with "simple" workflows...

sorry :-(

[adrai]

sorry this was a strange output...
it shoud be a big triangle |/

[mackypogi02]

oh, that's too bad :(
btw.
do you know something that can help me build flowcharts? just like yours? I've been looking in the internet and I just found yours very easy to learn. I hope you can suggest me something like your work. Thank you so much for your time and effort.

[mackypogi02]

maybe if you just can make a condition to turn left it will be a good output.
like cond(yes,left) cond(no)

output will become

   |  /   -cond(yes,right)
 \ |      -cond(yes,left)
   |/

just like what you said the algorithm is forming a cone a big triangle.

[adrai]

Before I made this lib I also searched for something like that and found nothing :-(

The left side cases are really dangerous... a lot of conflicts will occur...
But feel free to do a pull request ;-)

[mackypogi02]

what is the difference in posting in issues and pull request?

[adrai]

A pull request is a code change request, submitting directly the changed code...

[mackypogi02]

who will submit the codes? I don't have enough knowledge to do that..

[adrai]

partially implented