Nocturnal Practitioners of Magic
Learn how companies like Phone2Action are using npm in their front-end developmentJoin the conversation »

lamed_flowchart

1.0.80 • Public • Published

npm

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.

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

downloads Build Status codecov CodeFactor Code size license

NPM JavaScript Style Guide

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

Keywords

Install

npm i lamed_flowchart

DownloadsWeekly Downloads

97

Version

1.0.80

License

MIT

Unpacked Size

4.62 MB

Total Files

97

Last publish

Collaborators

  • avatar