The ExSwimlane/JS lets you draw swim lane diagrams. A swim lane (or swimlane diagram) is a visual element used in process flow diagrams, or flowcharts, that visually distinguishes job sharing and responsibilities for sub-processes of a business process. Swim lanes may be arranged either horizontally or vertically. The ExSwimlane/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Swimlane
Arrange
Images
Links
Properties
Events
Your browser does not support the HTML5 canvas tag.
CTRL + ALT creates pool. Click ⋮ (right/bottom of the pool) to create new lanes/phases. ALT creates element or link. CTRL + X Cut, CTRL + C Copy, CTRL + V Paste. CTRL + Z Undo, CTRL + Y Redo. Delete deletes the selection. CTRL / SHIFT selects elements. ESC cancels drag and drop operation.
Your browser does not support the HTML5 canvas tag.
ALT creates element or link. CTRL / SHIFT selects elements. Delete deletes the selection. Click wheel + drag or CTRL + Click wheel + drag magnifies (a portion of) the control. Roll (+ SHIFT) the wheel to scroll.
Your browser does not support the HTML5 canvas tag.
Click wheel + drag or CTRL + Click wheel + drag magnifies (a portion of) the control. CTRL + Double-click fit the entire chart. Drag and drop an element over other to insert it as a child. Drag and drop a child element over another sibling, for 1 second, to exchange their positions. CTRL + Z Undo, CTRL + Y Redo.
Your browser does not support the HTML5 canvas tag.
Click the ◂ (top-right arrow) to show the source-code. Click the ▴ (bottom-left arrow) to show the help. ✔ Check/uncheck options to include/exclude the property. Change the option's value according to the below description.
Your browser does not support the HTML5 canvas tag.
here goes the events
Click, drag, drop or roll the mouse-wheel to get for the control's events. CTRL + Z Undo, CTRL + Y Redo.