A Pen by Mehmet Akif AKKUS

Thumbnail
This awesome code was written by mehmetakifakkus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mehmetakifakkus ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mehmet Akif AKKUS</title>
  
  
  
  
  
</head>

<body>

  <div id="diagram"></div>
  <script src='https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.min.js'></script>
<script src='http://flowchart.js.org/flowchart-latest.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mehmetakifakkus/a-pen-by-mehmet-akif-akkus-qPEZxL */
 var str = "st=>start: Start:>http://www.google.com[blank]\n"+
"e=>end:>http://www.google.com\n" + 
"op1=>operation: My Operation\n" + 
"sub1=>subroutine: My Subroutine\n" +
"cond=>condition: Yes\n" + 
"or No?:>http://www.google.com\n" + 
"io=>inputoutput: catch something...\n\n" + 
 
"st->op1->cond\n" + 
"cond(yes)->io->e\n" + 
"cond(no)->sub1(right)->op1\n";
  
  var dd = "st=>start\n"+
"e=>end\n"+
"st->e";
  
  var diagram = flowchart.parse(dd);
  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' }
                              }
                            });

Comments