Skip to content

flowchat honkit/gitbook plugin to prase flowchart.js code

Notifications You must be signed in to change notification settings

vowstar/gitbook-plugin-flow

Repository files navigation

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

About

flowchat honkit/gitbook plugin to prase flowchart.js code

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published