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:

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 |