Awesome

Overview

Command line tool for generating a suite of various types of diagrams, each based on intuitive text DSLs.

Also see Atom Diagrams Plugin that integrates this into the Atom IDE

Documentation

Installation
Usage
- watch
- build
Diagrams

Installation

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 .

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://seflless.github.io/diagrams/flowchart.png" width="300px" /> </td> </tr> </table>

sequence

Documentation: Network Sequence Diagram Syntax .

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://seflless.github.io/diagrams/sequence.png" width="350px" /> </td> </tr> </table>

dot

Documentation on the dot file format:

Read dotguide.pdf.
See the online generator.

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://seflless.github.io/diagrams/dot.png" width="300px" /> </td> </tr> </table>

railroad

Documentation see 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
Online Generator

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://seflless.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.

Credits

flowchart.js for the flowchart diagrams
js-sequence-diagrams for the sequence diagrams
viz.js for getting Graphviz compiled to js
railroad-diagrams for the railroad diagrams
electron 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.