Draw Flow Diagrams From Plain Text – Pinker.js

Category: Chart & Graph , Javascript | June 20, 2019
Author: WithoutHaste
Views Total: 93
Official Page: Go to website
Last Update: June 20, 2019
License: MIT

Preview:

Draw Flow Diagrams From Plain Text – Pinker.js

Description:

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">
Layout:
  [A][B]
  [C][D][E][F]
  [G][H]
  [I][J]
Relate:
  [A]->[B]
  [C]-D[D]
  [E]-:>[F]
  [G]-o[H]
  [I]-+[J]
</pre>

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">
Layout:
  [A][B]
[A]:
  Layout:
    [C][D]
  Relate:
    [C]->[D]
    [D]->[B.E]
[B]:
  Layout:
    [E]
    [F]
  Relate:
    [E]->[F]
    [F]->[A.D]
</pre>

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
Layout:
  [A]
  [B][D][E]
  [C]...[F]
Relate:
  [B]->[A],[C]
  [D]->[B],[E],[F]
pinker.render();

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 canvas boundary and scopes
  canvasPadding: 15,

  // background color
  backgroundColor: "#FFFFFF",

  // shade color
  shadeColor: "#EEEEEE",

  // line color
  lineColor: "#000000",

  // length of a dash in pixels
  lineDashLength: 5,

  // length of space between dashes in pixels
  lineDashSpacing: 3,

  font: function() {
    return this.fontSize + "px " + this.fontFamily;
  },

  estimateFontHeight: function() {
    return this.fontSize;
  }

};

Changelog:

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