Project was used in documentation of many projects successfully. It is currently in process of a major update. Below is what is planned. Wait for version 1.1.0. (Part of See it Done project)
User Story:
- AS A project manager, strategist, analyst, developer
- I WANT TO easily and visually map & change complex processes
- SO THAT it is usable, understandable and repeatable.
Notes:
- The process flow from top to bottom.
- When a condition is used, the true part must be on the following line. (All lines are skipped until the true part is located)
See other Samples
Install
npm
npm i lamed_flowchart -s
yarn
yarn add lamed_flowchart
Usage
Node
const _lflow = require('lamed_flowchart');
Background
Building of flowcharts can be slow and time consuming process. To fasilitate this process some projects like flowchart.js, and mermaid was created. These projects still leave a gap for improvement and an even simpler notation can be used to create flowcharts. See definition below.
Markdown definition
Tags
- '***' = Any combination of letters or numbers
| Tag | Markdown pattern | Sample Item | Description |
|---|---|---|---|
| start | (***) | (start) | First occurrence indicate the start of the process. |
| stop | (***) | (stop) | Second occurrence of (*) indicate the end of the process. |
| task | [***] | [task] | Indicate a task. |
| parallel task | [/***/] // {{top}} // {{right}} // {{down}} /] | [/parallel/] // [task1] // [Task2] // [Task3] /] |
Indicate a parallel task. - can split into 3 other tasks |
| process | [[***]] | [[process]] | Indicate a subroutine. - Will add :>process< link. |
| input | /***/ | /input output/ | Indicate an input output to the process. |
| choice | <<***>> ** ?? ** >> | <<condition>> [truePart] ?? [falsePart] >> | Indicate a condition in the process. - Line must start with '<<' |
| colour | |--colour--| | [task] |--red--| |
Colour the line leaving [task] red |
| comment | -- *** | -- My comment | Comments are on seperate lines. Comment lines are ignored. |
Tag modifiers
Tag modifiers are set within above tags and change default behavior
| Modifier | Markdown pattern | Sample Item | Description |
|---|---|---|---|
| id | {{*}} | [task{{5}}] or [{{add}}Add item] |
When flow goes back to another flow, it is easier to ref it by an identifier. |
| state | __*__ | [task __default__] | Add state to the tag. (See State table below) |
| right | --> | [task-->] [-->task] |
Next item must be to the right. |
| left | <-- | [<--task] [task<--] |
Next item must be to the left |
| link | :>link<: | [Task:>https://www.google.com<:] | Add link to the item and open on current chrome tab. |
| linkNew | :>link<:: | [Task:>https://www.google.com<::] | Add link to the item and open on new chrome tab. |
State Table
- Specify '__' to get list of available flow states. (ex: [Task __]).
- To use the default state do following Task __default__
- To set default for all tags, set it on the first line of definition.
| Name | fill | size | color | weight | yes | no |
|---|---|---|---|---|---|---|
| __default__ | #CCCCCC (grey) | 12 | ||||
| __setLow__ | #58C4A3 (green) | 12 | ||||
| __setMedium__ | yellow | 14 | red | bold | ||
| __setHigh__ | red | 16 | white | bold | ||
| __chooseTrue__ | True | False | ||||
| __chooseApprove__ | Approved | Rejected | ||||
| __ |
Todo items
Todo items are planned for a future phase of the project.
| Modifier | Markdown pattern | Sample Item | Description |
|---|---|---|---|
| todo | +&Todo heading - [ ] todo1 - [ ] todo2 - [ ] todo3 &+ |
[Task +&Testing - [ ] Create unit tests, - [ ] do test, - [ ] done &+] |
Create list of todo items as a link. - There can not be another link defined (:>link<:>) |
| todoFile | +&Todo_filename&+ | [Task +&TodoFile.md&+] | Use items from TodoFile.md as to do items. (Start and end modifier is in the same line) |
Sample
Get lamed_Flowchart javascript library for the browser.
MIT license