JS Flowchart Diagrams
文章目录
Usage
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
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:
```toml
[params.flowchartDiagrams]
enable = true
options = ""
Configure for a single post in the front matter (Params in front matter have higher precedence):
flowchartDiagrams:
enable: true
options: "{
'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,
'i-am-a-comment-1': 'Do not use //!',
'i-am-a-comment-2': 'style symbol types',
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end': {
'class': 'end-element'
}
},
'i-am-a-comment-3': 'even flowstate support ;-)',
'flowstate': {
'request': {'fill': 'blue'}
}
}"
See more information from https://github.com/adrai/flowchart.js.
文章作者 上海大易
上次更新 2015-03-04