seflless/diagrams

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

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
  • 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:

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

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'))))

Contributing

Setup

git clone [email protected]: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.

diagrams's Issues

CLI hangs on rendering flowchart diagrams, but works with sequence

It seems to be related with #14, but it's the opposite: now diagrams CLI hangs on rendering flowchart diagrams but works with sequence.

System info

• Ubuntu 18.04.3 LTS
• node v8.10.0

Steps to reproduce

Install CLI

$ npm install -g diagrams

Create flowchart diagram source (input.flowchart)

cat > input.flowchart <<EOF
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...
para=>parallel: parallel tasks
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
EOF

Run command to render SVG

$ diagrams flowchart input.flowchart flowchart.svg

It hangs forever.

install on win

sorry for opening over there.
when installing npm does not make any cmd files:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. Alle Rechte vorbehalten.

C:\Users\web_45454>npm install -g diagrams@latest
+ [email protected]
updated 1 package in 11.657s

C:\Users\web_45454>diagrams
Der Befehl "diagrams" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

C:\Users\web_45454>ls %AppData%\npm\node_modules | grep diagrams
diagrams

C:\Users\web_45454>ls %AppData%\npm\node_modules\diagrams
README.md  images   lib    node_modules  styles
grammars   keymaps  menus  package.json

C:\Users\web_45454>ls %AppData%\npm | grep diagrams*

C:\Users\web_45454>npm list -g diagrams
C:\Users\web_45454\AppData\Roaming\npm
`-- [email protected]


C:\Users\web_45454>diagrams
Der Befehl "diagrams" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

C:\Users\web_45454>

CLI hangs on rendering sequence diagrams, but works with flowcharts

Description

When trying to render the example sequence diagram from the README, the CLI just hangs indefinitely. However, when rendering other kinds of diagrams, such as the flowchart or dot graphs, the CLI runs just fine. I'm not 100% sure as to whether this is a direct bug or an upstream bug in js-sequence-diagrams, as neither has seen a similar issue previously, but I'll just report it here in case @francoislaberge has anymore information that might help solve this issue.

It does look like this is one of the few render implementations that requires a tiny electron window to be opened, so perhaps this is somehow the cause of some issue?

System info

• Arch Linux (kernel 4.12.8-2)
• npm v5.3.0

Steps to reproduce

Install CLI

npm install -g diagrams

Create sequence diagram source (input.sequence)

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

Run command to render SVG

diagrams sequence input.sequence sequence.svg

Adding option to load json file for style with flowchart

Hi,
today with others persons we start to use your tool to generate automatically svg files with flowchart.js lib but unfortunately, it is actually not possible to add style (color, etc...) or passing it in command line parameter . For that reason, we've forked your work and adding possibility to load a JSON file containing style definition as a third argument like this:
diagrams flowchart [inputFile] [outputFile.svg] [styleSVGFilePath.json]

If you are interested by this enhancement : https://github.com/MrJordison/diagrams/commit/8ba38f9548c131fb391e306ad524a9242db9449a
I could make a merge request from our fork

Unable to create .svg from .flowchart

Hi everyone,

here's my wf.flowchart :

`op2=>operation: D_FR = "Si demande d'acces par Francois"
op4=>operation: A_FR = 'Franþois a acces'
op6=>operation: D_OPE_PRAC = "demande d'acces par un consultant ope-PRAC"
op8=>operation: YS = 'Validation Yasmine'
op10=>operation: FR = 'Validation Franþois'
cond13=>condition: if D_FR
op17=>operation: YS
cond22=>condition: if D_OPE_PRAC
cond27=>condition: if A_FR
op31=>operation: FR
op35=>operation: YS

op2->op4
op4->op6
op6->op8
op8->op10
op10->cond13
cond13(yes)->op17
cond13(no)->cond22
cond22(yes)->cond27
cond27(yes)->op31
cond27(no)->op35`

I've just installed diagrams by running on powershell (Win10) the following command which rans successfully :
npm install -g diagrams

I then ran :

And nothing is happening.

Please, am I missing something obvious ?

Thanks in advance,
Kikala.

Installation fails on Apple Silicon (M1)

Diagrams rules.

I love diagrams, long since replaced using dot native.

recently I upgraded to an M1 mac, and unfortunately diagrams doesn't seem to work on M1.

npm install -g diagrams

fails due to an electron dependency.
Electron will only work with 11.0 or above on m1 - so I checked out this diagrams repository and replaced the dependency, and install npm install . but then it says it installs fine, yet does not / diagrams doesn't work.

I'm not a node developer and the chance of me figuring this out and contributing a solution is very low.

I write in case anyone else has successfully gotten diagrams to install on M1.

Flowcharts have issues with looping back flow

Given a flowchart file like this, diagrams produces a very small SVG.

st=>start: Start
poll=>operation: Poll for thing
cond=>condition: Any messages?
wait=>operation: Sleep
s1=>operation: Do step 1
s2=>operation: Do step 2

st->poll->cond
cond(no)->wait->poll
cond(yes)->s1->s2->poll

Trying the same on the Flowchart.js page yields the correct result, even if it's a little compacted.

Does diagrams require the flowchart to be written slightly differently? Or am I doing something wrong here?
polling.zip

CLI hangs when rendering flowchart diagram with bad input

If your flowchart file has a mistake, diagrams will just hang until you figure out the problem. Also diagrams watch will continue to report that it is processing your flowchart, even though no png file is updated since the cli hangs.

It would be nice to error out of processing with a message to the user.

Possible missing dependency (chokidar)

I encountered the following while investigating diagrams. I'm unsure if this is an environmental issue on my side. Certainly chokidar is not listed in whats currently at: https://github.com/francoislaberge/diagrams/blob/master/package.json

# sudo npm install -g diagrams

/usr/local/bin/diagrams -> /usr/local/lib/node_modules/diagrams/bin/diagrams.js
/usr/local/lib
└── [email protected]

# diagrams watch

module.js:472
throw err;
^
Error: Cannot find module 'chokidar'

# sudo npm install -g chokidar

/usr/local/lib
└─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
└─┬ [email protected]
├── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└── [email protected]

# diagrams watch

infrastructure-manual.dot -> infrastructure-manual.dot.svg

# npm -v

4.0.5

# lsb_release -a

No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 16.04.1 LTS
Release: 16.04
Codename: xenial

Add ability to change theme

I'd like to be able to change the theme for the sequence diagrams. Could it be possible to make this a parameter?

NPM Install results in multiple high vulnerabilities

(Beginner to git and overall comment process here.)

Eager to work with diagrams.

Updated brew and npm. All clear.
npm install -g diagram results in multiple "high" vulnerabilities.
Can one work around or fix these?
loaded deprecated and "insecure binaries" software is a roadblock.

Happy to take directions here, or contribute by testing, etc.

*.Flowchart parsing seems to be broken

Hi,

A simple *.flowchart program doesn't compile... although .sequence seems to be working okay. Any idea how can I get this going? I see flowchart.js.org seems to be broken (or is it just me?) so is it more a problem with the upstream?

Unrelated, the sample .flowchart code on your site isn't what the image should be. Probably the code below has a better chance of looking like the image on your website.

st=>start: Start
e=>end
op1=>operation: My Operation
st=>operation: Stuff
sub1=>subroutine: My Subroutine
cond1=>condition: Yes or No?
cond2=>condition: Good Idea?
io=>inputoutput: catch something
e=>end: End

st->op1->cond1
cond1(yes)->cond2(yes)->io->e
cond2(no)->st->e
cond1(no)->sub1(right)->op1

Only the first line in input.flowchart was created to .svg

Only the first line in input.flowchart is generated.

Error when watching/building folder

When telling diagrams to watch/build a folder, I am getting the following error:

$ diagrams watch --build .
Error: Provided directory does not exist

When using diagrams watch ., I get the following error:

$ diagrams watch .
module.js:471
    throw err;
    ^

Error: Cannot find module 'chokidar'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/lib/node_modules/diagrams/bin/diagrams-watch.js:35:16)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Environment

• OS: Ubuntu 16.10
• Shell: bash

Sequence diagram: word 'Participant' causes an exception

If you add a line Bob-->Participant: I am good thanks! to tests/fixtures/sequence/simple.sequence,

i.e.

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

then run ./bin/diagrams.js sequence tests/fixtures/sequence/simple.sequence

you will get this error

sequence:stdout: Parse error on line 3:
...b: Bob thinksBob-->Participant: I am go
----------------------^
Expecting 'ACTOR', got 'participant'

sequence:stderr: Parse error on line 3:
...b: Bob thinksBob-->Participant: I am go
----------------------^
Expecting 'ACTOR', got 'participant'

If you change Participant to something else like Tom, it works again.

npm 16 high vulnerabilities

found 17 vulnerabilities (1 low, 16 high) in 1326 scanned packages
17 vulnerabilities require semver-major dependency updates.

Installation fails on rocky linux.

Getting below error .

[email protected] postinstall /usr/local/lib/node_modules/diagrams/node_modules/electron
node install.js

internal/modules/cjs/loader.js:905
throw err;
^

Error: Cannot find module '/usr/local/lib/node_modules/diagrams/node_modules/electron/install.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/diagrams/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2023-03-30T11_14_18_578Z-debug.log

flowchart out of date

Looks like you are using flowchart 1.4 when 1.12 is out.

Also, I'm wondering if it would be possible to have flowchart be a dependency in package.json instead of in src/vendors to better track the versioning of dependencies?

Only the first three lines of the input.flowchart are created as.svg

I wrote several lines in the input.flowchart file, but the resulting.SVG shows only the flow for the first three lines

Flow chart in README does not correspond to example input

The flowchart image (http://francoislaberge.github.io/diagrams/docs/flowchart.png) has not been updated to be consistent with the README.md example (changed in 46e7f26).

Valid flowchart code works in browser demo, but mangled on terminal

Valid flowchart input file results in (large/scrollable) SVG on URL (flowchart.js.org) but when run in MacOS terminal via diagrams flowchart input output, results in mangled SVG output when opened via Chrome/FFX. Is this a PEBCAK issue?

ppp1.txt

(cannot upload SVG "not supported" by Github)

Invalid asm.js: Function definition doesn't match use

With this diagram I get the following error:

$ diagrams dot diagram.dot diagram.svg
(node:40184) V8: /home/marco/.nvm/versions/node/v12.18.2/lib/node_modules/diagrams/node_modules/viz.js/viz.js:33 Invalid asm.js: Function definition doesn't match use

I don't get any error with dot - graphviz version 2.44.1 on the same diagram.

Using:

$ node --version
v12.18.2

$ npm --version
6.14.6

$ cat /etc/os-release
NAME="Arch Linux"
BUILD_ID=rolling

idea: separate `diagrams build` call

Can you add a separate diagrams build call like the diagrams watch --build option just without the watch stuff? This would help for automated build scripts.

*.svg files are not generating properly

For the below input.flowchart file,
st1955773895624=>start: start foo,

io1955773895680=>inputoutput: input: a, b
cond1955773807304=>condition: if a
sub1955773806912=>subroutine: print('a')
io1955773896632=>inputoutput: output: (a + b)
e1955773896016=>end: end function return
cond1955773895960=>operation: print('b') while i in range(3)

st1955773895624->io1955773895680
io1955773895680->cond1955773807304
cond1955773807304(yes)->sub1955773806912
sub1955773806912->io1955773896632
io1955773896632->e1955773896016
cond1955773807304(no)->cond1955773895960
cond1955773895960->io1955773896632

using the diagram library, I am not getting proper .svg file. the same is attached here.

while from here, http://flowchart.js.org/, I am able to get the flowchart properly using the same input as above.

Every sample .flowchart files even mentioned in git also are giving wrong .svg files. Not able to figure out the issue yet.

All previews do not load.

All previews do not load. I cannot see them. It is not an important problem. Just let you know.