JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>

<body>
  <h1>Turning this:</h1>
  <div id="diagram"><!-- Diagram will be placed here --></div>
  <h1>Into this:</h1>
  <img class="example" src="https://gekko.wizb.it/_static/gekko-gist.png">
  <script src="flowchart.js"></script>
  <script>
    var diagram = flowchart.parse(
      'st=>start: If price goes up: long(),\n\nIf price goes up: short()\n' +
      'e=>end:>http://www.google.com\n' +
      'op1=>operation: My Operation\n' +
      'op2=>operation: Stuff|current\n' +
      'sub1=>subroutine: My Subroutine\n' +
      'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
      'or No?\n:>http://www.google.com\n' +
      'c2=>condition: Good idea|rejected\n' +
      'io=>inputoutput: catch something...|request\n' +
      '\n' +
      'st->op1(right)->cond\n' +
      'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
      'cond(no)->sub1(left)->op1\n' + // the other symbols too...
      'c2(true)->io->e\n' +
      'c2(false)->op2->e' //allow for true and false in conditionals
    );
    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': {
         ...

CSS

.end-element {
    background-color: #FFCCFF;
  }

JavaScript

window.onload = function() {
    var btn = document.getElementById("run"),
      cd = document.getElementById("code"),
      chart;
    (btn.onclick = function() {
      var code = cd.value;
      if (chart) {
        chart.clean();
      }
      chart = flowchart.parse(code);
      chart.drawSVG('canvas', {
        // 'x': 30,
        // 'y': 50,
        'line-width': 1,
        'line-length': 50,
        'text-margin': 10,
        'font-size': 14,
        'font': 'normal',
        'font-family': 'Helvetica',
        'font-weight': 'normal',
        'font-color': 'black',
        'line-color': 'black',
        'element-color': 'black',
        'fill': 'white',
        'yes-text': 'yes',
        'no-text': 'no',
        'arrow-end': 'block',
        'scale': 1,
        'symbols': {
          'start': {
            'font-color': 'red',
            'element-color': 'green',
            'fill': 'yellow'
          },
          'end': {
            'class': 'end-element'
          }
        },
        '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'
          }
        }
      });
      $('[id^=sub1]').click(function() {
        alert('info here');
      });
    })();
  };