Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vowstar/gitbook-plugin-flow
flowchat honkit/gitbook plugin to prase flowchart.js code
https://github.com/vowstar/gitbook-plugin-flow
flowchat gitbook honkit honkit-plugin
Last synced: 21 days ago
JSON representation
flowchat honkit/gitbook plugin to prase flowchart.js code
- Host: GitHub
- URL: https://github.com/vowstar/gitbook-plugin-flow
- Owner: vowstar
- Created: 2016-10-10T08:20:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T17:06:28.000Z (4 months ago)
- Last Synced: 2024-10-11T13:35:59.032Z (about 1 month ago)
- Topics: flowchat, gitbook, honkit, honkit-plugin
- Language: JavaScript
- Homepage:
- Size: 410 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gitbook-plugin-flow
[](https://github.com/vowstar/gitbook-plugin-flow/actions)
[](https://coveralls.io/github/vowstar/gitbook-plugin-flow?branch=master)
[](https://www.npmjs.org/package/gitbook-plugin-flow)
[](https://www.npmjs.org/package/gitbook-plugin-flow)
[flowchart.js](https://github.com/adrai/flowchart.js) plugin for [Honkit](https://github.com/honkit/honkit) ~~and [GitBook](https://github.com/GitbookIO/gitbook)~~.
## Installation
```bash
npm install gitbook-plugin-flow
```
Add this plugin into ``book.json``.
```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
```json
"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
```bash
{% 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
```bash
{% 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
```bash
{% 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](https://github.com/midnightSuyama/gitbook-plugin-flowchart).
* [nsdont/gitbook-plugin-new-flowchart](https://github.com/nsdont/gitbook-plugin-new-flowchart).
* [lyhcode/gitbook-plugin-plantuml](https://github.com/lyhcode/gitbook-plugin-plantuml).
## See also
These plugins are also available on honkit.
| Plugin | Description |
| ----------------------------------------------------------------------------- | ------------------------------------------------------ |
| [gitbook-plugin-uml](https://github.com/vowstar/gitbook-plugin-uml) | A plug-in that use plantuml to draw beautiful pictures |
| [gitbook-plugin-wavedrom](https://github.com/vowstar/gitbook-plugin-wavedrom) | A plug-in that can draw waveforms and register tables |
| [gitbook-plugin-sequence](https://github.com/vowstar/gitbook-plugin-sequence) | A plug-in that can draw sequence diagrams |
| [gitbook-plugin-flow](https://github.com/vowstar/gitbook-plugin-flow) | A plug-in that can draw flowchart.js diagrams |
| [gitbook-plugin-echarts](https://github.com/vowstar/gitbook-plugin-echarts) | A plug-in that can draw various charts such as bar/pie |