JS Flowchart Diagrams

Usage

 1st=>start: Start|past:>http://www.google.com[blank]
 2e=>end: End:>http://www.google.com
 3op1=>operation: My Operation|past
 4op2=>operation: Stuff|current
 5sub1=>subroutine: My Subroutine|invalid
 6cond=>condition: Yes
 7or No?|approved:>http://www.google.com
 8c2=>condition: Good idea|rejected
 9io=>inputoutput: catch something...|request
10
11st->op1(right)->cond
12cond(yes, right)->c2
13cond(no)->sub1(left)->op1
14c2(yes)->io->e
15c2(no)->op2->e

 1```flow
 2st=>start: Start|past:>http://www.google.com[blank]
 3e=>end: End:>http://www.google.com
 4op1=>operation: My Operation|past
 5op2=>operation: Stuff|current
 6sub1=>subroutine: My Subroutine|invalid
 7cond=>condition: Yes
 8or No?|approved:>http://www.google.com
 9c2=>condition: Good idea|rejected
10io=>inputoutput: catch something...|request
11
12st->op1(right)->cond
13cond(yes, right)->c2
14cond(no)->sub1(left)->op1
15c2(yes)->io->e
16c2(no)->op2->e
17```

Legacy Usage

 1st=>start: Start|past:>http://www.google.com[blank]
 2e=>end: End:>http://www.google.com
 3op1=>operation: My Operation|past
 4op2=>operation: Stuff|current
 5sub1=>subroutine: My Subroutine|invalid
 6cond=>condition: Yes
 7or No?|approved:>http://www.google.com
 8c2=>condition: Good idea|rejected
 9io=>inputoutput: catch something...|request
10
11st->op1(right)->cond
12cond(yes, right)->c2
13cond(no)->sub1(left)->op1
14c2(yes)->io->e
15c2(no)->op2->e

```flowchart
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>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...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

Configuration

Configure for all home and regular pages:

1[params.flowchartDiagrams]
2  enable = true
3  options = ""

Configure for a single post in the front matter (Params in front matter have higher precedence):

 1flowchartDiagrams:
 2  enable: true
 3  options: "{
 4              'x': 0,
 5              'y': 0,
 6              'line-width': 3,
 7              'line-length': 50,
 8              'text-margin': 10,
 9              'font-size': 14,
10              'font-color': 'black',
11              'line-color': 'black',
12              'element-color': 'black',
13              'fill': 'white',
14              'yes-text': 'yes',
15              'no-text': 'no',
16              'arrow-end': 'block',
17              'scale': 1,
18              'i-am-a-comment-1': 'Do not use //!',
19              'i-am-a-comment-2': 'style symbol types',
20              'symbols': {
21                  'start': {
22                    'font-color': 'red',
23                    'element-color': 'green',
24                    'fill': 'yellow'
25                  },
26                  'end': {
27                      'class': 'end-element'
28                  }
29              },
30              'i-am-a-comment-3': 'even flowstate support ;-)',
31              'flowstate': {
32                'request': {'fill': 'blue'}
33              }
34            }"