Hello World

Start

hugo new post/some-content.md

JS Sequence Diagrams

config.toml

sequenceDiagrams: 
  enable: true
  options: "{theme: 'simple'}"

Example

```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

JS Flowchart Diagrams

config.toml

有颜色(带状态)的流程图配置如下：

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,'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'}}}"

详细说明移步flowchart

Example

```flow
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