diagrams

Overview

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

See below for documentation/examples of the syntax/output for each of the currently supported diagrams type:

• flowchart
• network sequence
• graphviz's dot
• railroad 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:

Watches the current directory and generates an .svg file in the same directory as any found file.

diagrams watch

Same as above but also first generates all .svg files before starting watch process

diagrams watch --build

To provide the target directory to watch just pass it as an argument right after the watch command.

diagrams watch somedirectory --build

flowchart

Documentation: Flowchart.js .

To generate flowcharts, run:

diagrams flowchart input.flowchart flowchart.svg

input.flowchart	flowchart.svg
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

sequence

Documentation: Network Sequence Diagram Syntax .

To generate Network Sequence Diagrams, run:

diagrams sequence input.sequence sequence.svg

input.sequence	sequence.svg
Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!

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

input.dot	dot.svg
digraph G { main -> parse -> execute; main -> init; main -> cleanup; execute -> make_string; execute -> printf init -> make_string; main -> printf; execute -> compare; }

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

input.railroad	railroad.svg
Diagram( Optional('+', 'skip'), Choice(0, NonTerminal('name-start char'), NonTerminal('escape')), ZeroOrMore( Choice(0, NonTerminal('name char'), NonTerminal('escape'))))

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.