# diagrams

> Generate Flowcharts, Network Sequence, Dot, and Railroad Diagrams

Latest version **0.11.0** (published 2020-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install diagrams
pnpm add diagrams
yarn add diagrams
bun add diagrams
```

Provides the command `diagrams`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.11.0 |
| Published | 2020-01-07 |
| First published | 2015-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 866 KB |
| Known vulnerabilities | 0 (+52 in 1 direct dependencies) |
| Install scripts | no |
| Author | Francois Laberge |
| Maintainers | francoislaberge |
| Keywords | flowchart, sequence, diagrams, dot, graphviz, railroad, diagrams, visualization, system, design |

## Links

- npm: https://www.npmjs.com/package/diagrams
- Repository: https://github.com/francoislaberge/diagrams
- Homepage: https://github.com/francoislaberge/diagrams#readme
- Issues: https://github.com/francoislaberge/diagrams/issues
- npm.io page: https://npm.io/package/diagrams

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^7.1.2
- [viz.js](https://npm.io/package/viz.js.md) ^1.3.0
- [chokidar](https://npm.io/package/chokidar.md) ^1.6.1
- [electron](https://npm.io/package/electron.md) ^3.0.5
- [commander](https://npm.io/package/commander.md) 2.8.1
- [railroad-diagrams](https://npm.io/package/railroad-diagrams.md) 1.0.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.11.0 (latest) — 2020-01-07
- 0.9.4 (test) — 2017-09-15
- 0.10.0 — 2018-10-20
- 0.9.6 — 2017-09-15
- 0.9.5 — 2017-09-15
- 0.9.3 — 2017-09-15
- 0.9.1 — 2017-09-01
- 0.27.0 — 2017-08-27
- 0.9.0 — 2017-08-27
- 0.8.3 — 2017-08-27
- 0.8.2 — 2017-01-22
- 0.8.1 — 2017-01-03
- 0.8.0 — 2016-10-23
- 0.7.1 — 2016-10-23
- 0.7.0 — 2016-10-23
- … 24 more at https://npm.io/package/diagrams/versions

## README

<a href="https://travis-ci.org/francoislaberge/diagrams"><img src="https://api.travis-ci.org/francoislaberge/diagrams.svg" alt="Build Status"></a>
# Overview
Command line tool for generating a suite of various types of diagrams, each based on intuitive text DSLs.

Also see [Atom Diagrams Plugin](https://atom.io/packages/diagrams) that integrates this into the [Atom IDE](https://atom.io/)

### Documentation
  - [Installation](#installation)
  - [Usage](#usage)
    - [watch](#watch)
    - [build](#build)
  - [Diagrams](#diagrams)
    - [flowchart](#flowchart)
    - [network sequence](#sequence)
    - [graphviz's dot](#dot)
    - [railroad diagrams](#railroad)

<img src="http://francoislaberge.com/diagrams/flowchart.png" width="20%"/><img src="http://francoislaberge.github.io/diagrams/sequence.png" width="25%"/><img src="http://francoislaberge.github.io/diagrams/dot.png" width="25%"/><img src="http://francoislaberge.github.io/diagrams/railroad.png" width="25%"/>

# Installation

```bash
npm install -g diagrams
```

# Usage

## watch
The diagrams CLI provides the `watch` command that will automatically generate the .svg visualization of each diagram file format it supports. Run the following:

Generates all of the .svg files, then starts watching the current directory and regenerates any diagram file that changes.
```
diagrams watch
```

Generates all .svg files, but don't start watching after.
```
diagrams build
```

To provide the target directory to watch just pass it as an argument right after the `watch` command.
```
diagrams watch somedirectory --build
```

### Diagrams

#### flowchart
Documentation: [Flowchart.js ](http://flowchart.js.org/).

To generate flowcharts, run:

    diagrams flowchart input.flowchart flowchart.svg

<table>
<tr>
<td><strong>input.flowchart</strong></td>
<td><strong>flowchart.svg</strong></td>
</tr>
<tr>
  <td>
  <pre>
<code>
st=>start: Start
e=>end
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
</code>
  </pre>
  </td>
  <td>
    <img src="http://francoislaberge.github.io/diagrams/flowchart.png" width="300px" />
  </td>
</tr>
</table>


#### sequence
Documentation: [Network Sequence Diagram Syntax ](https://bramp.github.io/js-sequence-diagrams/).

To generate Network Sequence Diagrams, run:

    diagrams sequence input.sequence sequence.svg

<table>
<tr>
<td><strong>input.sequence</strong></td>
<td><strong>sequence.svg</strong></td>
</tr>
<tr>
  <td>
  <pre>
<code>
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
</code>
  </pre>
  </td>
  <td>
    <img src="http://francoislaberge.github.io/diagrams/sequence.png" width="350px" />
  </td>
</tr>
</table>

#### dot
Documentation on the dot file format:
  - Read [dotguide.pdf](http://www.graphviz.org/pdf/dotguide.pdf).
  - See the [online generator](http://mdaines.github.io/viz.js/).

To generate diagrams from Graphviz's .dot file format, run:

    diagrams dot input.dot dot.svg

<table>
<tr>
<td><strong>input.dot</strong></td>
<td><strong>dot.svg</strong></td>
</tr>
<tr>
  <td>
  <pre>
<code>
digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}
</code>
  </pre>
  </td>
  <td>
    <img src="http://francoislaberge.github.io/diagrams/dot.png" width="300px" />
  </td>
</tr>
</table>

#### railroad
Documentation see [railroad-diagrams](http://npmjs.org/railroad-diagrams)'s documentation':
  - **NOTE:** There is no real documentation for the input file syntax (PRs welcome), but the examples
      should help you figure it out a bit
  - [Examples](http://www.xanthir.com/etc/railroad-diagrams/example.html)
  - [Online Generator](http://www.xanthir.com/etc/railroad-diagrams/generator.html)

To generate Railroad Diagrams, run:

    diagrams railroad input.railroad railroad.svg

<table>
<tr>
<td><strong>input.railroad</strong></td>
<td><strong>railroad.svg</strong></td>
</tr>
<tr>
  <td>
  <pre>
<code>
Diagram(
  Optional('+', 'skip'),
    Choice(0,
      NonTerminal('name-start char'),
      NonTerminal('escape')),
      ZeroOrMore(
        Choice(0,
          NonTerminal('name char'),
          NonTerminal('escape'))))
</code>
  </pre>
  </td>
  <td>
    <img src="http://francoislaberge.github.io/diagrams/railroad.png"  width="500px" />
  </td>
</tr>
</table>

## Contributing

### Setup
```
git clone git@github.com:francoislaberge/diagrams.git
cd diagrams
```

### Testing
```
npm test
```

### Publishing to NPM
Do the usual npm version bump then publish.
```
npm version <major|minor|patch>
git push; git push --tags
npm publish
```

All tests are run automatically on push via our [travis-ci integration](https://travis-ci.org/francoislaberge/diagrams).

## Credits

  - [flowchart.js](http://flowchart.js.org/) for the flowchart diagrams
  - [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/) for the sequence diagrams
  - [viz.js](https://github.com/mdaines/viz.js) for getting Graphviz compiled to js
  - [railroad-diagrams](https://npmjs.org/railroad-diagrams) for the railroad diagrams
  - [electron](http://electron.atom.io/) for headless browsing to wrap above libraries that don't work without a browser environment

## TODOs
It's a work in progress. See [TODO.md](https://github.com/francoislaberge/diagrams/blob/master/TODO.md).

---
_Source: https://npm.io/package/diagrams · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._