SVG Flowchart Generator With D3.js – flowcharty

Preview:

Description:

flowcharty is a JavaScript library that makes uses of d3.js to dynamically generate SVG flowchart to represent your algorithm, workflow or process.

How to use it:

Include the necessary d3.js library on the webpage.

<script src="https://d3js.org/d3.v5.min.js"></script>

Include the JavaScript file ‘flowcharty.js’ after d3.js but before the closing body tag.

<script src="./lib/flowcharty.js"></script>

Create an SVG element for the flowchart.

<svg width="960" height="720"></svg>

Define your own map, nodes, and links for the flowchart.

var data = {
    nodes: [
      {id: 'start', label: {name: 'Which flowchart library should you use?'}, style: {fillColor: '#fff'}},
      {id: 'manually', label: {name: 'You want to draw manually?'}},
      {id: 'drawIo', label: {name: '<a href="https://www.draw.io/" target="_blank">draw.io</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: 'rgb(241, 136, 8)', strokeColor: 'rgb(199, 113, 7)'}},
      {id: 'formal', label: {name: 'You want to draw a relatively formal chart?'}},
      {id: 'anotherChart', label: {name: 'You want to use \nnot only for flowchart \nbut also another UML?'}},
      {id: 'mermaid', label: {name: '<a href="https://mermaidjs.github.io/" target="_blank">mermaid</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: '#8dcf7c', strokeColor: '#72a964'}},
      {id: 'flowchartJS', label: {name: '<a href="http://flowchart.js.org/" target="_blank">flowchart.js</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: '#2e7bcf', strokeColor: '#275da1'}},
      {id: 'bigDiamond', label: {name: 'You can avoid using a big diamond\nfor long sentence condition.', color: '#fff', dx: 0, dy: 5, textAnchor: 'middle'}, style: {shape: "rect", width: 230, height: 50, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
      {id: 'nodePosition', label: {name: 'You can put nodes to in a position you like.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 280, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
      {id: 'decorate', label: {name: 'You can decorate nodes and links.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 230, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
      {id: 'module', label: {name: 'You can use as "npm" module.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 210, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
      {id: 'maintenance', label: {name: 'It is not difficult to maintain the chart.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 240, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
      {id: 'd3', label: {name: 'You do not want to depends on "d3.js" ?', color: '#afafaf'}, style: {fillColor: '#afafaf', strokeColor: '#afafaf'}},
      {id: 'dummyNode1', label: {name: ''}, style: {shape: 'nothing', strokeWidth: 0, width:0, height:0}},
      {id: 'dummyNode2', label: {name: ''}, style: {shape: 'nothing', strokeWidth: 0, width:0, height:0}},
      {id: 'flowcharty', label: {name: 'flowcharty', fontSize: '20px', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 150, height: 40, rx: 3, ry: 3, fillColor: '#cf634b', strokeColor: '#a7533e'}},
    ],
    map: [
      ['', 'start'],
      ['', 'manually', 'drawIo'],
      ['', 'formal'],
      ['', 'bigDiamond', '', 'dummyNode1'],
      ['', 'nodePosition', '', 'anotherChart'],
      ['', 'decorate', 'dummyNode2'],
      ['', 'module'],
      ['', 'maintenance'],
      ['', 'd3'],
      ['', 'flowcharty', '', 'flowchartJS', 'mermaid'],
    ],
    links: [
      {source: 'start', target: 'manually'},
      {source: 'manually', target: 'drawIo', label: {name: 'yes'}},
      {source: 'manually', target: 'formal', label: {name: 'no'}},
      {source: 'formal', target: 'anotherChart', label: {name: 'yes'}},
      {source: 'anotherChart', target: 'flowchartJS', label: {name: 'no'}},
      {source: 'anotherChart', target: 'mermaid', label: {name: 'yes'}},
      {source: 'formal', target: 'bigDiamond', label: {name: 'no'}},
      {source: 'bigDiamond', target: 'nodePosition'},
      {source: 'nodePosition', target: 'decorate'},
      {source: 'decorate', target: 'module'},
      {source: 'module', target: 'maintenance'},
      {source: 'maintenance', target: 'd3'},
      {source: 'd3', target: 'dummyNode2', label: {name: 'yes'}, style: {headType: 'none', curveType: 'stepAfter', color: '#afafaf'}},
      {source: 'dummyNode2', target: 'dummyNode1', style: {color: '#afafaf', curveType: 'stepBefore'}},
      {source: 'd3', target: 'flowcharty', label: {name: 'no'}, style: {strokeWidth: 4, color: '#cf3933'}},
    ]
};

Initialize the flowcharty library.

var flowcharty = new Flowcharty.default();

Render the flowchart on the page.

flowcharty.render(d3.select("svg"), data);

Available settings for the nodes.

style: {
  shape: "circle", // "circle"|"rect"|"nothing"
  width: 20,
  height: 20,
  rx: 5,
  ry: 5,
  strokeColor: "#000",
  strokeWidth: 2,
  fillColor: "#fff"
},
label: {
  dx: -10,
  dy: -10,
  textAnchor: "end", // "start"|"middle"|"end"
  color: "#000",
  fontSize: "12px",
  fontFamily: "sans-serif"
}

Available settings for the links.

style: {
  connectionType: "direct", // "direct"|"marge"
  curveType: "default", // "default"|"stepBefore"|"stepAfter"
  color: "#000",
  width: 2,
  headType: "arrow", // "arrow"|"none"
  arrowheadSize: 6
},
label: {
  dx: undefined,
  dy: undefined,
  textAnchor: undefined, // "start"|"middle"|"end"|undefined
  color: "#000",
  fontSize: "12px",
  fontFamily: "sans-serif"
}

API.

/**
 * get default node shape
 * @returns {"circle" | "rect" | "nothing"}
 */
get shape(): "circle"|"rect"|"nothing" {
  return this._node.style.shape;
}
/**
 * set default node shape
 * @param {"circle" | "rect" | "nothing"} value
 */
set shape(value: "circle"|"rect"|"nothing") {
  this._node.style.shape = value;
}
/**
 * get default rectangle node width
 * @returns {number}
 */
get nodeWidth(): number {
  return this._node.style.width;
}
/**
 * set default rectangle node width
 * @param {number} value
 */
set nodeWidth(value: number) {
  this._node.style.width = value;
}
/**
 * get default rectangle node height
 * @returns {number}
 */
get nodeHeight(): number {
  return this._node.style.height;
}
/**
 * set default rectangle node height
 * @param {number} value
 */
set nodeHeight(value: number) {
  this._node.style.height = value;
}
/**
 * get default horizontal radius of circle(ellipse) node
 * or, get default  horizontal radius of rounded rect node's corner
 * @returns {number}
 */
get nodeRX(): number {
  return this._node.style.rx;
}
/**
 * set default horizontal radius of circle(ellipse) node
 * or, set default  horizontal radius of rounded rect node's corner
 * @param {number} value
 */
set nodeRX(value: number) {
  this._node.style.rx = value;
}
/**
 * get default vertical radius of circle(ellipse) node
 * or, get default vertical radius of rounded rect node's corner
 * @returns {number}
 */
get nodeRY(): number {
  return this._node.style.ry;
}
/**
 * set default vertical radius of circle(ellipse) node
 * or, set default vertical radius of rounded rect node's corner
 * @param {number} value
 */
set nodeRY(value: number) {
  this._node.style.ry = value;
}
/**
 * get default stroke color of circle node
 * @returns {string}
 */
get nodeStrokeColor(): string {
  return this._node.style.strokeColor;
}
/**
 * set default stroke color of circle node
 * @param {string} value
 */
set nodeStrokeColor(value: string) {
  this._node.style.strokeColor = value;
}
/**
 * get default stroke width of circle node
 * @returns {number}
 */
get nodeStrokeWidth(): number {
  return this._node.style.strokeWidth;
}
/**
 * set default stroke width of circle node
 * @param {number} value
 */
set nodeStrokeWidth(value: number) {
  this._node.style.width = value;
}
/**
 * get default fill color of circle node
 * @returns {string}
 */
get nodeFillColor(): string {
  return this._node.style.fillColor;
}
/**
 * set default fill color of circle node
 * @param {string} value
 */
set nodeFillColor(value: string) {
  this._node.style.fillColor = value;
}
/**
 * get default shift of node label along the x-axis on the position
 * - the center of the node as (0, 0)
 * @returns {number}
 */
get nodeLabelDX(): number {
  return this._node.label.dx;
}
/**
 * set default shift of node label along the x-axis on the position
 * - the center of the node as (0, 0)
 * @param {number} value
 */
set nodeLabelDX(value: number) {
  this._node.label.dx = value;
}
/**
 * get default shift of node label along the y-axis on the position
 * - the center of the node as (0, 0)
 * @returns {number}
 */
get nodeLabelDY(): number {
  return this._node.label.dy;
}
/**
 * set default shift of node label along the y-axis on the position
 * - the center of the node as (0, 0)
 * @param {number} value
 */
set nodeLabelDY(value: number) {
  this._node.label.dy = value;
}
/**
 * get default text anchor of node name
 * @returns {"start" | "middle" | "end"}
 */
get nodeLabelTextAnchor(): "start" | "middle" | "end" {
  return this._node.label.textAnchor;
}
/**
 * set default text anchor of node name
 * @param {"start" | "middle" | "end"} value
 */
set nodeLabelTextAnchor(value: "start" | "middle" | "end") {
  this._node.label.textAnchor = value;
}
/**
 * get default text color of node name
 * @returns {string}
 */
get nodeLabelColor(): string {
  return this._node.label.color;
}
/**
 * set default text color of node name
 * @param {string} value
 */
set nodeLabelColor(value: string) {
  this._node.label.color = value;
}
/**
 * get default font size of node name
 * @returns {string}
 */
get nodeLabelFontSize(): string {
  return this._node.label.fontSize;
}
/**
 * set default font size of node name
 * @param {string} value
 */
set nodeLabelFontSize(value: string) {
  this._node.label.fontSize = value;
}
/**
 * get default font family of node name
 * @returns {string}
 */
get nodeLabelFontFamily(): string {
  return this._node.label.fontFamily;
}
/**
 * set default font family of node name
 * @param {string} value
 */
set nodeLabelFontFamily(value: string) {
  this._node.label.fontFamily = value;
}
/**
 * get default connection type of link path
 * - direct: link connect to node directly
 * - marge: link connect to a little above the node
 * @returns {"direct" | "marge"}
 */
get linkConnectionType(): "direct"|"marge" {
  return this._link.style.connectionType;
}
/**
 * set default connection type of link path
 * - direct: link connect to node directly
 * - marge: link connect to a little above the node
 * @param {"direct" | "marge"} value
 */
set linkConnectionType(value: "direct"|"marge") {
  this._link.style.connectionType = value;
}
/**
 * get default link curve type
 * - default: unspecified (it's is calculated by `source node` position and `target node` position on rendering)
 * - stepBefore: becomes stepBefore forcibly irrespective of position
 * - stepAfter: becomes stepAfter forcibly irrespective of position
 * @see https://bl.ocks.org/emmasaunders/f7178ed715a601c5b2c458a2c7093f78
 * @returns {"default" | "stepBefore" | "stepAfter"}
 */
get linkCurveType(): "default"|"stepBefore"|"stepAfter" {
  return this._link.style.curveType;
}
/**
 * set default link curve type
 * - default: unspecified (it's is calculated by `source node` position and `target node` position on rendering)
 * - stepBefore: becomes stepBefore forcibly irrespective of position
 * - stepAfter: becomes stepAfter forcibly irrespective of position
 * @see https://bl.ocks.org/emmasaunders/f7178ed715a601c5b2c458a2c7093f78
 * @param {"default" | "stepBefore" | "stepAfter"} value
 */
set linkCurveType(value: "default"|"stepBefore"|"stepAfter") {
  this._link.style.curveType = value;
}
/**
 * get default link color
 * @returns {string}
 */
get linkColor(): string {
  return this._link.style.color;
}
/**
 * set default link color
 * @param {string} value
 */
set linkColor(value: string) {
  this._link.style.color = value;
}
/**
 * get default link stroke width
 * @returns {number}
 */
get linkWidth(): number {
  return this._link.style.width;
}
/**
 * set default link stroke width
 * @param {number} value
 */
set linkWidth(value: number) {
  this._link.style.width = value;
}
/**
 * get default link head type
 * - arrow: render arrowhead on link tip
 * - none: render nothing on link tip
 * @returns {"arrow" | "none"}
 */
get linkHeadType(): "arrow"|"none" {
  return this._link.style.headType;
}
/**
 * set default link head type
 * - arrow: render arrowhead on link tip
 * - none: render nothing on link tip
 * @param {"arrow" | "none"} value
 */
set linkHeadType(value: "arrow"|"none") {
  this._link.style.headType = value;
}
/**
 * get default arrowhead size
 * - valid when headType is `arrow`
 * @returns {number}
 */
get linkArrowheadSize(): number {
  return this._link.style.arrowheadSize;
}
/**
 * get default arrowhead size
 * - valid when headType is `arrow`
 * @param {number} value
 */
set linkArrowheadSize(value: number) {
  this._link.style.arrowheadSize = value;
}
/**
 * get default shift of link along the x-axis on the position
 * - the center of the link `source node` as (0, 0)
 * @returns {number | undefined}
 */
get linkLabelDX(): number|undefined {
  return this._link.label.dx;
}
/**
 * set default shift of link along the x-axis on the position
 * - the center of the link `source node` as (0, 0)
 * @param {number | undefined} value
 */
set linkLabelDX(value: number|undefined) {
  this._link.label.dx = value;
}
/**
 * get default shift of link along the y-axis on the position
 * - the center of the link `source node` as (0, 0)
 * @returns {number | undefined}
 */
get linkLabelDY(): number|undefined {
  return this._link.label.dy;
}
/**
 * set default shift of link along the y-axis on the position
 * - the center of the link `source node` as (0, 0)
 * @param {number | undefined} value
 */
set linkLabelDY(value: number|undefined) {
  this._link.label.dy = value;
}
/**
 * get default link label text-anchor type
 */
get linkLabelTextAnchor(): "start"|"middle"|"end"|undefined {
  return this._link.label.textAnchor;
}
/**
 * set default link label text-anchor type
 * @param value
 */
set linkLabelTextAnchor(value: "start"|"middle"|"end"|undefined) {
  this._link.label.textAnchor = value;
}
/**
 * get default color of link label
 * @returns {string}
 */
get linkLabelColor(): string {
  return this._link.label.color;
}
/**
 * set default color of link label
 * @param {string} value
 */
set linkLabelColor(value: string) {
  this._link.label.color = value;
}
/**
 * get default font size of link label
 * @returns {string}
 */
get linkLabelFontSize(): string {
  return this._link.label.fontSize;
}
/**
 * set default font size of link label
 * @param {string} value
 */
set linkLabelFontSize(value: string) {
  this._link.label.fontSize = value;
}
/**
 * get default font family of link label
 * @returns {string}
 */
get linkLabelFontFamily(): string {
  return this._link.label.fontFamily;
}
/**
 * set default font family of link label
 * @param {string} value
 */
set linkLabelFontFamily(value: string) {
  this._link.label.fontFamily = value;
}