Skip to content

Latest commit

 

History

History
134 lines (103 loc) · 4.01 KB

README.md

File metadata and controls

134 lines (103 loc) · 4.01 KB
Raw

gitbook-plugin-flow

Build Status Coverage Status NPM Version NPM Downloads

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:

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