vowstar / gitbook-plugin-flow

flowchat honkit/gitbook plugin to prase flowchart.js code

gitbook-plugin-flow

flowchart.js plugin for Honkit and GitBook.

Installation

npm install gitbook-plugin-flow

Add this plugin into book.json.

{
  "plugins": ["flow"]
}

Features

• Support HTML, PDF, EPUB output(make sure your gitbook support SVG)
• Support ```flow code block quote
• Multi code style support

Configuration

book.json add the flowchart.js options

"pluginsConfig": {
  "flow": {
    "line-color": "red"
  }
}

Usage

To include a sequence diagram, just wrap your definition in a "flow" code block. For example:

```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

Also you can put in your book block as

{% flow %}
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
{% endflow %}

In addition you can use these code

{% flowchart %}
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
{% endflowchart %}

Extend the width

{% flow width=770 %}
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
{% endflow %}

Thanks

This project learn from:

• midnightSuyama/gitbook-plugin-flowchart.
• nsdont/gitbook-plugin-new-flowchart.
• lyhcode/gitbook-plugin-plantuml.

See also

These plugins are also available on honkit.

Plugin	Description
gitbook-plugin-uml	A plug-in that use plantuml to draw beautiful pictures
gitbook-plugin-wavedrom	A plug-in that can draw waveforms and register tables
gitbook-plugin-sequence	A plug-in that can draw sequence diagrams
gitbook-plugin-flow	A plug-in that can draw flowchart.js diagrams
gitbook-plugin-echarts	A plug-in that can draw various charts such as bar/pie