Draw Flow Diagrams From Plain Text – Pinker.js

Category: Chart & Graph , Javascript | September 12, 2019
Views Total:2,073 views
Official Page:Go to website
Last Update:September 12, 2019


Draw Flow Diagrams From Plain Text – Pinker.js


Pinker.js is a vanilla JavaScript library which renders a canvas based flow chart from plain text to represents a workflow, process, or decisions.

Basic usage:

Download and import the Pinker.js library into the HTML document.

<script src='Pinker.js'></script>

Create a canvas element on which you want to draw the flow chart.

<canvas id="Canvas-Demo"></canvas>

Wrap the source (text/string) into a pre tag.

<pre id="Source-Example">

Render a flow chart on the canvas element you just created.

Flow Diagram Basic

var canvas = document.getElementById("Canvas-Example");
    source = document.getElementById("Canvas-Example").innerHTML;
pinker.draw(canvas, source);

The library also supports multi-level chart nodes.

<pre id="Source-Example">

You can also load the chart data from an external text file.

<object id="Source-Example" type="text/plain" data="Diagram-Example.txt" class="pinker"></object>
// Diagram-Example.txt

Possible options to customize the flow chart.

pinker.config = {
  // font size in pixels
  fontSize: 14,
  // font family
  fontFamily: "Georgia",
  // minimum space around each scope
  scopeMargin: 30,
  // minimum space between scope boundary and scope contents
  scopePadding: 10,
  // minimum space between scope boundary and text areas
  labelPadding: 10,
  // minimum space between canvas boundary and scopes
  canvasPadding: 15,
  // background color
  backgroundColor: "#FFFFFF",
  // shade color
  shadeColor: "#EEEEEE",
  // line color
  lineColor: "#000000",
  // line weight
  lineWeight: 1,
  // length of a dash in pixels
  lineDashLength: 5,
  // length of space between dashes in pixels
  lineDashSpacing: 3,
  // pixels-squared area of an arrow head
  arrowHeadArea: 50,
  // should multi-line labels be arranged with a width:height ratio close to 1.6
  favorGoldenRatioLabelSize: true
  // should sibling-nodes be resized to appear similar?
  favorUniformNodeSizes: true
  // instead of drawing straight lines between scopes, draw arrows to route around scopes
  useSmartArrows: true
  // on render(), add the diagram next to the source instead of overwriting the source
  keepSource: false
  font: function() {
    return this.fontSize + "px " + this.fontFamily;
  estimateFontHeight: function() {
    return this.fontSize;
  lineSpacing: function() {
    return this.estimateFontHeight() * 0.4;



  • Fixed Separator lines margin error

v1.3.0 (06/30/2019)

  • support labels on relationship lines/arrows
  • support passing multiple options into render() and draw()
  • support arrows pointing right or left; support double-headed arrows
  • support lists on both sides of a Relate line
  • support dotted lines
  • support quantitative arrows
  • bug fix: parsing Relate row when label contains a comma
  • refactoring
  • test cases

v1.2.0 (06/20/2019)

  • support passing in all configuration changes as options object on render() and draw()

v1.1.0 (06/11/2019)

  • favor horizontal/vertical lines over angled lines
  • favor golden-ratio labels
  • favor more homogeneous scope sizes
  • update plain arrow head for visibility
  • update arrow head sizes to be more regular
  • clean up define-section layout
  • center sub-diagrams in each scope
  • move more layout control into pinker.config
  • refactoring

You Might Be Interested In:

Leave a Reply