mirror of
https://git.adityakumar.xyz/hugo-theme-even.git
synced 2024-11-14 00:49:44 +00:00
131 lines
3.5 KiB
Markdown
131 lines
3.5 KiB
Markdown
---
|
||
title: "JS Flowchart Diagrams"
|
||
date: 2015-03-04T21:57:50+08:00
|
||
draft: false
|
||
|
||
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'}
|
||
}
|
||
}"
|
||
---
|
||
|
||
## Usage
|
||
|
||
```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
|
||
```
|
||
|
||
<!--more-->
|
||
|
||
```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:
|
||
|
||
```toml
|
||
[params.flowchartDiagrams]
|
||
enable = true
|
||
options = ""
|
||
```
|
||
|
||
Configure for a single post in the front matter (**Params in front matter have higher precedence**):
|
||
|
||
```yml
|
||
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.
|