diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..ffde41b7 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: [adrai] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..059c6268 --- /dev/null +++ b/.npmignore @@ -0,0 +1,13 @@ +example +imgs +site +release +bin +releasenotes.md +webpack.config.js +index.html +devserver.js +bower.json +.eslintignore +.eslintrc +.gitmodules \ No newline at end of file diff --git a/README.md b/README.md index a0c45087..03849acf 100644 --- a/README.md +++ b/README.md @@ -1,99 +1,236 @@ [![JS.ORG](https://img.shields.io/badge/js.org-flowchart-ffb400.svg?style=flat-square)](http://js.org) -# flowchart.js +# [flowchart.js](http://flowchart.js.org) + +flowchart.js is a flowchart DSL and SVG render that runs in the browser and [terminal](https://github.com/francoislaberge/diagrams/#flowchart). + +Nodes and connections are defined separately so that nodes can be reused and connections can be quickly changed. +Fine grain changes to node and connection style can also be made right in the DSL. ## Example -[example](https://github.com/adrai/flowchart.js/blob/master/example/index.html) - -## Requirements -You will need [Raphaël](http://www.raphaeljs.com/) - -## CDN -flowchart.js is on [CDNJS](https://cdnjs.com/libraries/flowchart), feel free to use it - -## Usage - -On your page you need to include raphael like so: - -```html - -``` - -or - -```node.js -npm install flowchart.js -``` - -and then - -```html -
Diagram will be placed here
- - +```flowchart +st=>start: Start:>http://www.google.com[blank] +e=>end:>http://www.google.com +getInfo=>input: Input Info +op1=>operation: My Operation +sub1=>subroutine: My Subroutine +cond=>condition: Yes +or No?:>http://www.google.com +io=>inputoutput: catch something... +printInfo=>output: Print info +para=>parallel: parallel tasks + +st->getInfo->op1->cond +cond(yes)->io->printInfo->e +cond(no)->para +para(path1, bottom)->sub1(right)->op1 +para(path2, top)->op1 +``` + +![Example Flowchart](/imgs/example.svg) + +## CLI +See [francoislaberge/diagrams](https://github.com/francoislaberge/diagrams/#flowchart) on how to flowchart.js in the terminal. + +## Browser Usage + +flowchart.js is on [CDNJS](https://cdnjs.com/libraries/flowchart), feel free to use it. + +You will also need [Raphaël](http://www.raphaeljs.com/), which is also on [CDNJS](https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js). + +The demo html page is at [example/index.html](example/index.html). + +## Node Syntax +`nodeName=>nodeType: nodeText[|flowstate][:>urlLink]` + +Items in `[]` are optional. + +_nodeName_ defines the nodes variable name within the flowchart document. + +_nodeType_ defines what type the node is. See **Node Types** for more information. + +_nodeText_ is the text that will be inserted into the node. Newlines are allowed and will be reflected in the rendered node text. + +_flowstate_ is optional and uses the `|` operator that specifies extra styling for the node. + +_urlLink_ is optional and uses the `:>` operator to specify the url to link to. + +## Node Types +Defines the shape that the node will take. + +### start +Used as the first node where flows start from. +Default text is `Start`. + +![start image](imgs/start.png "start image") + +```flowchart +st=>start: start +``` + +### end +Used as the last node where a flow ends. +Default text is `End`. + +![end image](imgs/end.png "end image") + +```flowchart +e=>end: end +``` + +### operation +Indicates that an operation needs to happen in the flow. + +![operation image](imgs/operation.png "operation image") + +```flowchart +op1=>operation: operation +``` + +### inputoutput +Indicates that IO happens in a flow. + +![inputoutput image](imgs/inputoutput.png "inputoutput image") + +```flowchart +io=>inputoutput: inputoutput +``` + +### input +Indicates that Input happens in a flow. + +![input image](imgs/input.png "input image") + +```flowchart +getInfo=>input: Input info +``` + +### output +Indicates that Output happens in a flow. + +![output image](imgs/output.png "output image") + +```flowchart +printInfo=>output: Print info +``` + +### subroutine +Indicates that a subroutine happens in the flow and that there should be another flowchart that documents this subroutine. + +![subroutine image](imgs/subroutine.png "subroutine image") + +```flowchart +sub1=>subroutine: subroutine +``` + +### condition +Allows for a conditional or logical statement to direct the flow into one of two paths. + +![condition image](imgs/condition.png "condition image") + +```flowchart +cond=>condition: condition +Yes or No? +``` + +### parallel +Allows for multiple flows to happen simultaneously. + +![parallel image](imgs/parallel.png "parallel image") + +```flowchart +para=>parallel: parallel +``` + +## Connections +Connections are defined in their own section below the node definitions. +The `->` operator specifies a connection from one node to another like `nodeVar1->nodeVar2->nodeVar3`. + +Not all nodes need to be specified in one string and can be separaged like so + +```flowchart +nodeVar1->nodeVar2 +nodeVar2->nodeVar3 +``` + +Connection syntax is as follows: + +`[([, [[([, ]` + +Items in `[]` are optional. + +### Directions +The following directions are available and define the direction the connection will leave the node from. If there are more than one specifiers, it is always the last. All nodes have a default direction making this an optional specification. `` will be used to indicate that one of the following should be used in its place. + +* left +* right +* top +* bottom + +### Node Specific Specifiers by Type +Each node variables has optional specifiers, like direction, and some have special specifiers depending on the node type that are defined below. Specifiers are added after the variable name in `()` and separated with `,` like `nodeVar(spec1, spec2)`. + +### start +Optional direction + +`startVar()->nextNode` + +### end +No specifications because connections only go to the end node and do not leave from it. + +`previousNode->endVar` + +### operation +Optional direction + +`operationVar()->nextNode` + +### inputoutput +Optional direction + +`inputoutputVar()->nextNode` + +### subroutine +Optional direction + +`subroutineVar()->nextNode` + +### condition +Required logical specification of `yes` or `no` + +Optional direction + +```flowchart +conditionalVar(yes, )->nextNode1 +conditionalVar(no, )->nextNode2 +``` + +### parallel +Required path specification of `path1`, `path2`, or `path3` + +Optional direction + +```flowchart +parallelVar(path1, )->nextNode1 +parallelVar(path2, )->nextNode2 +parallelVar(path3, )->nextNode3 +``` + +## Links +A external link can be added to a node with the `:>` operator. + +The `st` node is linked to `http://www.google.com` and will open a new tab because `[blank]` is at the end of the URL. + +The `e` node is linked to `http://www.yahoo.com` and will cause the page to navigate to that page instead of opening a new tab. + +```flowchart +st=>start: Start:>http://www.google.com[blank] +e=>end: End:>http://www.yahoo.com ``` ## Advice -Symbols that should possibly not be used in the text: '=>' and '->' and ':>' and '|' and '@>' +Symbols that should possibly not be used in the text: `=>` and `->` and `:>` and `|` and `@>` and `:$` If you want to emphasize a specific path in your flowchart, you can additionally define it like this: @@ -101,6 +238,33 @@ If you want to emphasize a specific path in your flowchart, you can additionally st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"}) ``` +## Custom names for branches + +``` +st=>start: Start:>http://www.google.com[blank] +e=>end:>http://www.google.com +op1=>operation: My Operation +sub1=>subroutine: My Subroutine +cond=>condition: linear or polynomial :>http://www.google.com +io=>inputoutput: catch something... +para=>parallel: 3 possibilities + +st->op1->cond +cond(true@linear)->io->e +cond(false@polynomial)->sub1(right) +sub1(right)->para +para(path1@an1, top)->cond +para(path2@an2, right)->op1 +para(path3@an3, bottom)->e +``` +
+ + Demonstration + + ![img](https://user-images.githubusercontent.com/1086194/137810516-0d7d7307-fc55-466f-b06d-a6ca9f6b8785.png) + +
+ ## Contributors via [GitHub](https://github.com/adrai/flowchart.js/graphs/contributors) @@ -108,25 +272,3 @@ via [GitHub](https://github.com/adrai/flowchart.js/graphs/contributors) ## Thanks Many thanks to [js-sequence-diagrams](http://bramp.github.io/js-sequence-diagrams/) which greatly inspired this project, and forms the basis for the syntax. - -## Licence - -Copyright (c) 2018 Adriano Raiano - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/bower.json b/bower.json deleted file mode 100644 index 5b82ba5d..00000000 --- a/bower.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "flowchart", - "version": "1.6.6", - "main": "./release/flowchart.min.js", - "dependencies": {}, - "ignore": [ - "src/", - "buildtasks/", - "example/", - ".gitignore", - "Gruntfile.js", - "package.json", - "**/*.zip" - ] -} diff --git a/example/index.html b/example/index.html index 0a75706c..97ef5edc 100644 --- a/example/index.html +++ b/example/index.html @@ -4,9 +4,9 @@ flowchart.js · Playground - + @@ -71,13 +71,18 @@ })(); }; + + function myFunction(event, node) { + console.log("You just clicked this node:", node); + } +