Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including lamed_flowchart with all npm packages installed. Try it out:

var lamedFlowchart = require("lamed_flowchart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

lamed_flowchart v1.0.95

Markdown flowcharts

npm

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.

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
TagMarkdown patternSample ItemDescription
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 commentComments are on seperate lines.
Comment lines are ignored.

Tag modifiers

Tag modifiers are set within above tags and change default behavior

ModifierMarkdown patternSample ItemDescription
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__] ([Task] with grey background)
  • To set default for all tags, set it on the first line of definition.
Namefillsizecolorweightyesno
__default__#CCCCCC (grey)12
__setLow__#58C4A3 (green)12
__setMedium__yellow14redbold
__setHigh__red16whitebold
__chooseTrue__TrueFalse
__chooseApprove__ApprovedRejected
__

Todo items

Todo items are planned for a future phase of the project.

ModifierMarkdown patternSample ItemDescription
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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free