st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 para(path3, right)->in->out->e | This should be a diagram! If you do not see it you need Javascript enabled |
<script src="raphael-min.js">< <script src="flowchart-latest.js"></script>
<div id="diagram"></div>
<script>
var diagram = flowchart.parse("the code definition");
diagram.drawSVG('diagram');
// you can also try to pass options:
diagram.drawSVG('diagram', {
'x': 0,
'y': 0,
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'scale': 1,
// style symbol types
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
// even flowstate support ;-)
'flowstate' : {
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
'future' : { 'fill' : '#FFFF99'},
'request' : { 'fill' : 'blue'},
'invalid': {'fill' : '#444444'},
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
}
});
</script>
st=>start: Start|past:>http://www.google.com[blank] e=>end: End|future:>http://www.google.com op1=>operation: My Operation|past op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved:>http://www.google.com c2=>condition: Good idea|rejected io=>inputoutput: catch something...|future st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e | This should be a diagram! If you do not see it you need Javascript enabled |
st=>start: Improve your l10n process! e=>end: Continue to have fun!:>https://youtu.be/YQryHo1iHb8[blank] op1=>operation: Go to locize.com:>https://locize.com[blank] sub1=>subroutine: Read the awesomeness cond(align-next=no)=>condition: Interested to getting started? io=>inputoutput: Register:>https://www.locize.app/register[blank] sub2=>subroutine: Read about improving your localization workflow or another source:>https://medium.com/@adrai/8-signs-you-should-improve-your-localization-process-3dc075d53998[blank] op2=>operation: Login:>https://www.locize.app/login[blank] cond2=>condition: valid password? cond3=>condition: reset password? op3=>operation: send email sub3=>subroutine: Create a demo project sub4=>subroutine: Start your real project io2=>inputoutput: Subscribe st->op1->sub1->cond cond(yes)->io->op2->cond2 cond2(no)->cond3 cond3(no,bottom)->op2 cond3(yes)->op3 op3(right)->op2 cond2(yes)->sub3 sub3->sub4->io2->e cond(no)->sub2(right)->op1 st@>op1({"stroke":"Red"})@>sub1({"stroke":"Red"})@>cond({"stroke":"Red"})@>io({"stroke":"Red"})@>op2({"stroke":"Red"})@>cond2({"stroke":"Red"})@>sub3({"stroke":"Red"})@>sub4({"stroke":"Red"})@>io2({"stroke":"Red"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"}) | This should be a diagram! If you do not see it you need Javascript enabled |
st=>start: Need something to be translated!:>https://www.localistars.com[blank] e=>end: Be happy!:>https://youtu.be/e6Ede8hdU8c cond=>condition: Are you a client or a translator? subc=>subroutine: Why should you choose a localistar?:>https://www.localistars.com/for-clients.html subt=>subroutine: Why should you become a localistar?:>https://www.localistars.com/for-translators.html op=>operation: Check out how it works!:>https://www.localistars.com/how-it-works.html io=>inputoutput: Work together with your partner!:>https://www.localistars.app/login st->cond cond(no@client)->subc->op->io->e cond(yes@translator)->subt->op->io->e | This should be a diagram! If you do not see it you need Javascript enabled |