蓝色灯免费版

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 st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1

This should be a diagram! If you do not see it you need Javascript enabled

蓝色灯免费版

Raphaël

<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!:>http://youtu.be/YQryHo1iHb8[blank] op1=>operation: Go to locize.com:>http://locize.com[blank] sub1=>subroutine: Read the awesomeness cond(align-next=no)=>condition: Interested to getting started? io=>inputoutput: Register:>http://www.locize.app/register[blank] sub2=>subroutine: Read about improving your localization workflow or another source:>http://medium.com/@adrai/8-signs-you-should-improve-your-localization-process-3dc075d53998[blank] op2=>operation: Login:>http://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