seflless / diagrams Goto Github PK
View Code? Open in Web Editor NEWGenerate Flowcharts, Network Sequence Diagrams, GraphViz Dot Diagrams, and Railroad Diagrams
License: MIT License
Generate Flowcharts, Network Sequence Diagrams, GraphViz Dot Diagrams, and Railroad Diagrams
License: MIT License
(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.
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
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.
found 17 vulnerabilities (1 low, 16 high) in 1326 scanned packages
17 vulnerabilities require semver-major dependency updates.
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?
(cannot upload SVG "not supported" by Github)
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.
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
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
And nothing is happening.
Please, am I missing something obvious ?
Thanks in advance,
Kikala.
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.
I wrote several lines in the input.flowchart file, but the resulting.SVG shows only the flow for the first three lines
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.
I'd like to be able to change the theme for the sequence diagrams. Could it be possible to make this a parameter?
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)
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
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).
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>
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 line in input.flowchart is generated.
All previews do not load. I cannot see them. It is not an important problem. Just let you know.
It seems to be related with #14, but it's the opposite: now diagrams CLI hangs on rendering flowchart diagrams but works with sequence.
$ npm install -g diagrams
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
$ diagrams flowchart input.flowchart flowchart.svg
It hangs forever.
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
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
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.
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
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?
npm install -g diagrams
cat > input.sequence <<EOF
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
EOF
diagrams sequence input.sequence sequence.svg
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.