SVG Flowchart generator con D3. js-flowcharty

Vista prévia

Descripción

flowcharty es una biblioteca de JavaScript que hace uso de < a href = "https:/d3js.org/" target = "_ blank" rel = "noopener" > D3. js para generar dinámicamente el diagrama de flujo SVG para representar su algoritmo, flujo de trabajo o proceso.

Funcionamiento

Incluya la biblioteca D3. js necesaria en la Página Web.

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

Incluya el archivo JavaScript ' flowcharty. js ' después de D3. js, pero antes de la etiqueta body de cierre.

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

Cree un elemento SVG para el diagrama de flujo.

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

Defina su propio mapa, nodos y vínculos para el diagrama de flujo.

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'}},


]
};

Inicializar la biblioteca flowcharty.

var flowcharty = new Flowcharty.default();

Represente el diagrama de flujo en la página.

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

Configuración disponible para los nodos.

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"
}

Ajustes disponibles para los enlaces.

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;
}