### Start Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining a 'start' node. The default text is 'Start'. ```flowchart st=>start: start ``` -------------------------------- ### Start Node with Direction Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of specifying a direction for a connection originating from a 'start' node. ```flowchart startVar(right)->nextNode ``` -------------------------------- ### Flowchart Syntax Example Source: https://github.com/adrai/flowchart.js/blob/master/index.html This example demonstrates the basic syntax for defining flowchart elements such as start, end, operations, conditions, subroutines, and parallel tasks, along with their connections and styling. ```text st=>start: Start|past:>http://www.google.com\[blank\] e=>end: End:>http://www.google.com op1=>operation: My Operation|past:$myFunction op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved:>http://www.google.com c2=>condition: Good idea|rejected io=>inputoutput: catch something...|request para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1(right)->cond cond(yes, right)->c2 cond(no)->para c2(true)->io->e c2(false)->e para(path1, left)->sub1(top)->op1 para(path2, right)->op2->e para(path3, bottom)->in->out->e ``` -------------------------------- ### Output Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining an 'output' node. ```flowchart printInfo=>output: Print info ``` -------------------------------- ### Input Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining an 'input' node. ```flowchart getInfo=>input: Input info ``` -------------------------------- ### Input/Output Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining an 'inputoutput' node. ```flowchart io=>inputoutput: inputoutput ``` -------------------------------- ### Operation Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining an 'operation' node. ```flowchart op1=>operation: operation ``` -------------------------------- ### Subroutine Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining a 'subroutine' node. ```flowchart sub1=>subroutine: subroutine ``` -------------------------------- ### Parallel Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining a 'parallel' node for simultaneous flows. ```flowchart para=>parallel: parallel ``` -------------------------------- ### Flowchart DSL Example Source: https://github.com/adrai/flowchart.js/blob/master/README.md Defines nodes and connections using the flowchart.js DSL. Supports various node types and custom links. ```flowchart st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com getInfo=>input: Input Info op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... printInfo=>output: Print info para=>parallel: parallel tasks st->getInfo->op1->cond cond(yes)->io->printInfo->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 ``` -------------------------------- ### Condition Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining a 'condition' node. Allows for branching. ```flowchart cond=>condition: condition Yes or No? ``` -------------------------------- ### End Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md Example of defining an 'end' node. The default text is 'End'. ```flowchart e=>end: end ``` -------------------------------- ### Custom Node Names and Branch Logic Source: https://github.com/adrai/flowchart.js/blob/master/README.md Define custom names for nodes and specify branch logic for conditional and parallel paths. This example demonstrates complex routing and custom labels. ```flowchart st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: linear or polynomial :>http://www.google.com io=>inputoutput: catch something... para=>parallel: 3 possibilities st->op1->cond cond(true@linear)->io->e cond(false@polynomial)->sub1(right) sub1(right)->para para(path1@an1, top)->cond para(path2@an2, right)->op1 para(path3@an3, bottom)->e ``` -------------------------------- ### Flowchart Definition Syntax Source: https://github.com/adrai/flowchart.js/blob/master/example/index.html Defines a flowchart using a specific syntax. This example includes various node types, connections, and styling overrides. ```plaintext st=>start: Start|past:>http://www.google.com[blank] e=>end: End:>http://www.google.com op1=>operation: My Operation|past:$myFunction op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved:>http://www.google.com c2=>condition: Good idea|rejected io=>inputoutput: catch something...|request para=>parallel: parallel tasks st->op1(right)->cond cond(yes, right)->c2 cond(no)->para c2(true)->io->e c2(false)->e para(path1, bottom)->sub1(left)->op1 para(path2, right)->op2->e st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"}) ``` -------------------------------- ### Retrieve Active Options Object Source: https://context7.com/adrai/flowchart.js/llms.txt Use `chart.options()` to get the merged options object after drawing. This is useful for inspecting resolved defaults. ```javascript const chart = flowchart.parse(`st=>start: Start e=>end: End st->e`); chart.drawSVG('canvas', { 'font-size': 18 }); const opts = chart.options(); console.log(opts['font-size']); // 18 console.log(opts['line-width']); // 3 (default) console.log(opts['arrow-end']); // 'block' (default) ``` -------------------------------- ### $.fn.flowChart(options) Source: https://context7.com/adrai/flowchart.js/llms.txt Initializes the FlowChart jQuery plugin. It reads the DSL from the element's text content, parses it, clears the element, and renders the SVG in its place. ```APIDOC ## $.fn.flowChart(options) ### Description When jQuery is present, `$.fn.flowChart` reads the DSL from the element's text content, parses it, clears the element, and renders the SVG in its place. Accepts the same options object as `drawSVG`. ### Method `$(selector).flowChart(options)` ### Parameters #### Options Object - **options** (object) - An object containing configuration options for the flowchart. Accepts the same options as `drawSVG`. - **font-size** (number) - Sets the font size for the flowchart text. - **fill** (string) - Sets the background fill color for the flowchart elements. - **flowstate** (object) - Defines custom visual themes for different flow states. - **[stateName]** (object) - An object defining styles for a specific flow state (e.g., 'current'). - **fill** (string) - The fill color for the state. - **font-weight** (string) - The font weight for the state. ### Request Example ```html
st=>start: Start e=>end: End op=>operation: Do Work|current st->op->e
``` ``` -------------------------------- ### jQuery Plugin: Initialize Flowchart Source: https://context7.com/adrai/flowchart.js/llms.txt Use `$.fn.flowChart(options)` with jQuery to render a flowchart from an element's text content. It parses the DSL, clears the element, and inserts the SVG. ```html
st=>start: Start e=>end: End op=>operation: Do Work|current st->op->e
``` -------------------------------- ### Flowchart DSL - Connection Syntax and Directions Source: https://context7.com/adrai/flowchart.js/llms.txt Define connections between nodes using `->`. Optional direction specifiers and branch selectors for `condition` and `parallel` nodes are supported. ```plaintext # Sequential chain st->op->cond->e # Condition branches with optional direction cond(yes, right)->success cond(no, bottom)->failure # true/false are aliases for yes/no cond(true)->success cond(false)->failure # Parallel node with three paths and directions para(path1, bottom)->taskA para(path2, right)->taskB para(path3, top)->taskC # Direction on any node sub1(right)->op1 op1(bottom)->e # Multi-line is equivalent st->op1 op1->cond cond(yes)->e cond(no)->op1 ``` -------------------------------- ### Separated Connections Source: https://github.com/adrai/flowchart.js/blob/master/README.md Shows that connections can be defined across multiple lines. ```flowchart nodeVar1->nodeVar2 nodeVar2->nodeVar3 ``` -------------------------------- ### Flowchart DSL - Custom Branch Annotations Source: https://context7.com/adrai/flowchart.js/llms.txt Customize branch labels per-connection using the `@` annotation syntax, overriding global labels for specific paths on `condition` and `parallel` nodes. ```plaintext st=>start: Start e=>end: End cond=>condition: Linear or Polynomial? para=>parallel: 3 Possibilities st->cond cond(true@Linear, right)->e cond(false@Polynomial, bottom)->para para(path1@Alpha, top)->cond para(path2@Beta, right)->e para(path3@Gamma, bottom)->e ``` -------------------------------- ### Initialize Flowchart with jQuery Source: https://github.com/adrai/flowchart.js/blob/master/index.html Use this JavaScript snippet to initialize a flowchart on an HTML element with the ID 'chart' using jQuery. Ensure the Flowchart.js library is included before this script. ```javascript function myFunction(event, node) { console.log("You just clicked this node:", node); } $('#chart').flowChart(); ``` -------------------------------- ### External Links with Same Tab Behavior Source: https://github.com/adrai/flowchart.js/blob/master/README.md Add external links to nodes using `:>`. Omitting `[blank]` navigates the current page to the URL. ```flowchart e=>end: End:>http://www.yahoo.com ``` -------------------------------- ### Dynamic Node Styling with Flowstates Source: https://context7.com/adrai/flowchart.js/llms.txt Define named style themes ('flowstates') in the `flowstate` option to dynamically style nodes. Styles can be applied inline in the DSL or via the jQuery API. Available style keys include `fill`, `font-color`, `font-size`, etc. ```js const chart = flowchart.parse( ` st=>start: Start|past op=>operation: Processing|current cond=>condition: Valid?|approved e=>end: End|future st->op->cond cond(yes)->e cond(no)->op ` ); chart.drawSVG('canvas', { 'flowstate': { 'past': { 'fill': '#CCCCCC', 'font-size': 12 }, 'current': { 'fill': '#FFD700', 'font-color': 'red', 'font-weight': 'bold' }, 'future': { 'fill': '#FFFF99' }, 'approved': { 'fill': '#58C4A3', 'font-size': 12, 'yes-text': 'APPROVED', 'no-text': 'n/a' } } }); ``` -------------------------------- ### Load and Draw Flowchart from Text Source: https://github.com/adrai/flowchart.js/blob/master/example/loadFile.html This snippet demonstrates how to load flowchart definition from a text file using jQuery's AJAX and then render it to an SVG canvas using flowchart.js. Ensure the 'canvas' element exists in your HTML. ```javascript $(document).ready(function() { $.ajax({ url : "test.txt", dataType : "text", success : function(data) { var chart = flowchart.parse(data); chart.drawSVG('canvas'); } }); }); ``` -------------------------------- ### External Links with New Tab Behavior Source: https://github.com/adrai/flowchart.js/blob/master/README.md Add external links to nodes using `:>`. Appending `[blank]` to the URL opens the link in a new tab. ```flowchart st=>start: Start:>http://www.google.com[blank] ``` -------------------------------- ### End Node Syntax Source: https://github.com/adrai/flowchart.js/blob/master/README.md The end node has no outgoing connections. Use `->endVar` to specify. ```flowchart previousNode->endVar ``` -------------------------------- ### Node Click Handlers (:$functionName syntax) Source: https://context7.com/adrai/flowchart.js/llms.txt Allows binding global JavaScript functions as click handlers to individual nodes. When a node is clicked, the specified function is executed with the event and node data. ```APIDOC ## Node Click Handlers (:$functionName syntax) ### Description Attaching `:$functionName` to a node definition binds a global `window.functionName` as a click handler on both the shape and its label. The handler receives the DOM `MouseEvent` and the node's internal options object (which includes `key`, `text`, `params`, `link`, `flowstate`, etc.). ### Example ```javascript window.onNodeClick = function(event, node) { // node.key => 'process' // node.text => 'Click Me' // node.params => {} // node.flowstate => 'future' console.log('Clicked:', node.key); alert('Node: ' + node.text); }; $('#myChart').flowChart({ 'font-size': 14 }); ``` ### Node Definition Nodes can be defined with a click handler using the `:$functionName` syntax, e.g., `process=>operation: Click Me:$onNodeClick`. ``` -------------------------------- ### Render flowchart as SVG with options Source: https://context7.com/adrai/flowchart.js/llms.txt Use `chart.drawSVG()` to render the parsed flowchart into a specified DOM container. The `options` object allows global visual customization, with support for per-symbol and flowstate overrides. ```javascript const flowchart = require('flowchart.js'); const chart = flowchart.parse(` st=>start: Start|past:>http://example.com[blank] e=>end: End op1=>operation: My Operation|current:$handleClick op2=>operation: Fallback|future cond=>condition: Approved?|approved io=>inputoutput: Log Result|request sub=>subroutine: Sub-process|invalid st->op1->cond cond(yes, right)->io->e cond(no, bottom)->op2->e `); chart.drawSVG('canvas', { // Layout 'x': 0, 'y': 0, 'line-width': 3, 'line-length': 50, 'text-margin': 10, 'scale': 1, 'maxWidth': 600, // wrap node text at this pixel width // Typography 'font-size': 14, 'font-color': 'black', 'font': 'normal', 'font-family': 'Helvetica', 'font-weight': 'normal', // Colors 'line-color': 'black', 'element-color': 'black', 'fill': 'white', // Arrows 'arrow-end': 'block', // 'block', 'classic', 'open', 'oval', 'diamond', 'none' // Condition branch labels 'yes-text': 'yes', 'no-text': 'no', // CSS class applied to all node SVG elements 'class': 'flowchart', // Per-symbol style overrides 'symbols': { 'start': { 'font-color': 'red', 'element-color': 'green', 'fill': 'yellow' }, 'end': { 'class': 'end-element' // maps to a CSS class you define }, 'condition': { 'fill': '#fffbe6' } }, // Flowstate colour themes 'flowstate': { 'past': { 'fill': '#CCCCCC', 'font-size': 12 }, 'current': { 'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold' }, 'future': { 'fill': '#FFFF99' }, 'request': { 'fill': 'blue' }, 'invalid': { 'fill': '#444444' }, 'approved': { 'fill': '#58C4A3', 'font-size': 12, 'yes-text': 'APPROVED', 'no-text': 'n/a' }, 'rejected': { 'fill': '#C45879', 'font-size': 12, 'yes-text': 'n/a', 'no-text': 'REJECTED' } } }); // Global callback registered on window, invoked when a node with :$functionName is clicked window.handleClick = function(event, nodeOptions) { console.log('Clicked node:', nodeOptions.key, nodeOptions.text); }; ``` -------------------------------- ### Sequential Connections Source: https://github.com/adrai/flowchart.js/blob/master/README.md Defines sequential connections between nodes using the '->' operator. ```flowchart nodeVar1->nodeVar2->nodeVar3 ``` -------------------------------- ### Flowchart DSL - Per-Connection Line Style Source: https://context7.com/adrai/flowchart.js/llms.txt Apply inline Raphaël SVG attributes to specific connection arrows using the `@>` operator for path highlighting without altering global styles. ```plaintext st=>start: Start op1=>operation: Validate cond=>condition: OK? op2=>operation: Process e=>end: End st->op1->cond cond(yes)->op2->e cond(no)->e # Highlight the happy path in red with a thick, classic arrowhead st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"}) ``` -------------------------------- ### Node Click Handlers using :$functionName Syntax Source: https://context7.com/adrai/flowchart.js/llms.txt Attach global JavaScript functions as click handlers to nodes by appending `:$functionName` to the node definition. The handler receives the `MouseEvent` and the node's internal options object. ```html
st=>start: Start process=>operation: Click Me:$onNodeClick e=>end: End st->process->e
``` -------------------------------- ### Draw Flowchart with Custom Options Source: https://github.com/adrai/flowchart.js/blob/master/example/index.html Parses flowchart code and draws it to an SVG canvas with various customization options. Ensure the canvas element exists and the flowchart library is loaded. ```javascript window.onload = function () { var btn = document.getElementById("run"), cd = document.getElementById("code"), chart; (btn.onclick = function () { var code = cd.value; if (chart) { chart.clean(); } chart = flowchart.parse(code); chart.drawSVG('canvas', { // 'x': 30, // 'y': 50, 'line-width': 3, 'maxWidth': 3,//ensures the flowcharts fits within a certian width 'line-length': 50, 'text-margin': 10, 'font-size': 14, 'font': 'normal', 'font-family': 'Helvetica', 'font-weight': 'normal', 'font-color': 'black', 'line-color': 'black', 'element-color': 'black', 'fill': 'white', 'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'scale': 1, 'symbols': { 'start': { 'font-color': 'red', 'element-color': 'green', 'fill': 'yellow' }, 'end':{ 'class': 'end-element' } }, 'flowstate' : { 'past' : { 'fill' : '#CCCCCC', 'font-size' : 12 }, 'current' : { 'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold' }, 'future' : { 'fill' : '#FFFF99' }, 'request' : { 'fill' : 'blue' }, 'invalid': { 'fill' : '#444444' }, 'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' }, 'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' } } }); $('[id^=sub1]').click(function(){ alert('info here'); }); })(); }; ``` -------------------------------- ### Browser CDN Usage for Flowchart.js Source: https://context7.com/adrai/flowchart.js/llms.txt Include Raphaël and flowchart.js from a CDN to use `window.flowchart.parse()` directly in the browser without a bundler. Basic CSS can be applied via classes. ```html
``` -------------------------------- ### Parallel Node with Path and Direction Source: https://github.com/adrai/flowchart.js/blob/master/README.md Parallel nodes require a path specification ('path1', 'path2', or 'path3') and can optionally include a direction. ```flowchart parallelVar(path1, )->nextNode1 ``` ```flowchart parallelVar(path2, )->nextNode2 ``` ```flowchart parallelVar(path3, )->nextNode3 ``` -------------------------------- ### Input/Output Node with Direction Source: https://github.com/adrai/flowchart.js/blob/master/README.md Input/output nodes can optionally specify a direction using ``. ```flowchart inputoutputVar()->nextNode ``` -------------------------------- ### Flowchart DSL - Node Definition Syntax Source: https://context7.com/adrai/flowchart.js/llms.txt Define flowchart nodes using the `nodeName=>nodeType: nodeText[|flowstate][:>urlLink]` format. Supports various node types and inline parameters. ```plaintext # Basic types st=>start: Start e=>end: End op=>operation: Run Algorithm io=>inputoutput: Read / Write File inp=>input: Get User Input out=>output: Print Result sub=>subroutine: Call External API cond=>condition: Valid Data? para=>parallel: Parallel Tasks # With flowstate (visual theme) op2=>operation: Current Step|current op3=>operation: Done Step|past # With external URL link (opens in new tab) st2=>start: Start:>http://example.com[blank] # With URL link (same tab) e2=>end: End:>http://example.com # With click handler (calls window.myFn on click) op4=>operation: Click Me:$myFn # With inline parameters (used by jQuery setFlowStateByParam) step1(jobId=42)=>operation: Job Step ``` -------------------------------- ### Styling a Specific Path Source: https://github.com/adrai/flowchart.js/blob/master/README.md Emphasize a specific path by defining custom stroke properties for each node in the path. ```flowchart st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"}) ``` -------------------------------- ### flowchart.parse(code) Source: https://context7.com/adrai/flowchart.js/llms.txt Parses a flowchart DSL string into a chart instance. The chart instance can then be used to draw the flowchart. ```APIDOC ## flowchart.parse(code) — Parse a DSL string into a chart instance ### Description Parses a flowchart DSL string and returns a chart object with `drawSVG`, `clean`, and `options` methods. The DSL has two sections separated by a blank line: node definitions using `=>` and connection definitions using `->`. No rendering happens at parse time. ### Method `flowchart.parse(code: string)` ### Parameters #### Path Parameters - **code** (string) - Required - The flowchart DSL string to parse. ### Request Example ```js const flowchart = require('flowchart.js'); const code = ` st=>start: Start e=>end: End op=>operation: Process Data cond=>condition: Success? st->op->cond cond(yes)->e cond(no)->op `; const chart = flowchart.parse(code); // chart.drawSVG(...) / chart.clean() are now available ``` ### Response #### Success Response (chart instance) - **chart** (object) - An object with `drawSVG` and `clean` methods. #### Response Example ```js // chart object returned after parsing { drawSVG: [Function: drawSVG], clean: [Function: clean], options: [Getter] } ``` ``` -------------------------------- ### Update Node State with jQuery Plugin Source: https://context7.com/adrai/flowchart.js/llms.txt Use `setFlowStateByParam` to update node states based on parameter values. Supports scalar and array matching for parameters. Requires nodes to be defined with inline parameters. ```html
step1(jobId=42)=>operation: Fetch Data step2(jobId=42)=>operation: Transform step3(jobId=99)=>operation: Load e=>end: Done step1->step2->step3->e
``` -------------------------------- ### chart.options() Source: https://context7.com/adrai/flowchart.js/llms.txt Retrieves the active options object currently in use by the FlowChart renderer instance. This is useful for reading resolved defaults after the chart has been drawn. ```APIDOC ## chart.options() ### Description Returns the merged options object currently in use by the underlying FlowChart renderer instance. Useful for reading resolved defaults after `drawSVG` has been called. ### Method `chart.options()` ### Parameters None ### Response #### Success Response (Object) - **options** (object) - The active options object. ### Request Example ```javascript const chart = flowchart.parse(`st=>start: Start\ne=>end: End\nst->e`); chart.drawSVG('canvas', { 'font-size': 18 }); const opts = chart.options(); console.log(opts['font-size']); // 18 console.log(opts['line-width']); // 3 (default) console.log(opts['arrow-end']); // 'block' (default) ``` ``` -------------------------------- ### Condition Node with Direction and Logic Source: https://github.com/adrai/flowchart.js/blob/master/README.md Condition nodes require a logical specification ('yes' or 'no') and can optionally include a direction. ```flowchart conditionalVar(yes, )->nextNode1 ``` ```flowchart conditionalVar(no, )->nextNode2 ``` -------------------------------- ### $.fn.flowChart('setFlowStateByParam', param, paramValue, newFlowState) Source: https://context7.com/adrai/flowchart.js/llms.txt Updates the flow state of nodes based on a specified parameter and its value. This method is useful for dynamically highlighting or changing the appearance of nodes that meet certain criteria. ```APIDOC ## $.fn.flowChart('setFlowStateByParam', param, paramValue, newFlowState) ### Description Scans all nodes for those whose inline parameter `param` matches `paramValue` (supports scalar and array matching) and sets their `flowstate` to `newFlowState`. Automatically redraws the chart and colours the connecting lines using the flowstate's `fill`. Requires nodes to be defined with inline parameters. ### Method ```javascript $('#pipeline').flowChart('setFlowStateByParam', 'jobId', 42, 'running'); $('#pipeline').flowChart('setFlowStateByParam', 'jobId', [42, 99], 'pending'); ``` ### Parameters - **param** (string) - The name of the inline parameter to match. - **paramValue** (any or Array) - The value to match against the parameter. Can be a single value or an array of values. - **newFlowState** (string) - The new flow state to set for matching nodes. ``` -------------------------------- ### Subroutine Node with Direction Source: https://github.com/adrai/flowchart.js/blob/master/README.md Subroutine nodes can optionally specify a direction using ``. ```flowchart subroutineVar()->nextNode ``` -------------------------------- ### Operation Node with Direction Source: https://github.com/adrai/flowchart.js/blob/master/README.md Operation nodes can optionally specify a direction using ``. ```flowchart operationVar()->nextNode ``` -------------------------------- ### $.fn.flowChart('clearFlowState') Source: https://context7.com/adrai/flowchart.js/llms.txt Resets all nodes in the flowchart to their default appearance by removing any applied flow states. This is useful for returning the chart to its initial visual state after dynamic updates. ```APIDOC ## $.fn.flowChart('clearFlowState') ### Description Removes the `flowstate` from every node in the chart and redraws it, returning all nodes to their default appearance. ### Method ```javascript $('#pipeline').flowChart('clearFlowState'); ``` ``` -------------------------------- ### chart.drawSVG(container, options) Source: https://context7.com/adrai/flowchart.js/llms.txt Renders the parsed flowchart into a DOM element. This method can be called multiple times, and subsequent calls will automatically clean up previous renders. ```APIDOC ## chart.drawSVG(container, options) — Render the flowchart as SVG ### Description Renders the parsed flowchart into a DOM element (by ID string or element reference). Calling `drawSVG` again on the same chart instance automatically cleans up the previous render. The `options` object controls all visual properties globally, with per-symbol and per-flowstate overrides available. ### Method `chart.drawSVG(container: string | HTMLElement, options?: object)` ### Parameters #### Path Parameters - **container** (string | HTMLElement) - Required - The ID of the DOM element or the DOM element itself where the SVG should be rendered. - **options** (object) - Optional - An object containing visual properties and overrides for the flowchart rendering. #### Request Body (No request body, options are passed as an object) ### Request Example ```js const flowchart = require('flowchart.js'); const chart = flowchart.parse(` st=>start: Start|past:>http://example.com[blank] e=>end: End op1=>operation: My Operation|current:$handleClick op2=>operation: Fallback|future cond=>condition: Approved?|approved io=>inputoutput: Log Result|request sub=>subroutine: Sub-process|invalid st->op1->cond cond(yes, right)->io->e cond(no, bottom)->op2->e `); chart.drawSVG('canvas', { // Layout 'x': 0, 'y': 0, 'line-width': 3, 'line-length': 50, 'text-margin': 10, 'scale': 1, 'maxWidth': 600, // Typography 'font-size': 14, 'font-color': 'black', 'font': 'normal', 'font-family': 'Helvetica', 'font-weight': 'normal', // Colors 'line-color': 'black', 'element-color': 'black', 'fill': 'white', // Arrows 'arrow-end': 'block', // Condition branch labels 'yes-text': 'yes', 'no-text': 'no', // CSS class applied to all node SVG elements 'class': 'flowchart', // Per-symbol style overrides 'symbols': { 'start': { 'font-color': 'red', 'element-color': 'green', 'fill': 'yellow' }, 'end': { 'class': 'end-element' }, 'condition': { 'fill': '#fffbe6' } }, // Flowstate colour themes 'flowstate': { 'past': { 'fill': '#CCCCCC', 'font-size': 12 }, 'current': { 'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold' }, 'future': { 'fill': '#FFFF99' }, 'request': { 'fill': 'blue' }, 'invalid': { 'fill': '#444444' }, 'approved': { 'fill': '#58C4A3', 'font-size': 12, 'yes-text': 'APPROVED', 'no-text': 'n/a' }, 'rejected': { 'fill': '#C45879', 'font-size': 12, 'yes-text': 'n/a', 'no-text': 'REJECTED' } } }); // Global callback registered on window, invoked when a node with :$functionName is clicked window.handleClick = function(event, nodeOptions) { console.log('Clicked node:', nodeOptions.key, nodeOptions.text); }; ``` ### Response (No explicit response body, renders SVG to the specified container) ### Response Example (SVG element rendered in the DOM) ``` -------------------------------- ### Reset All Node States with jQuery Plugin Source: https://context7.com/adrai/flowchart.js/llms.txt Use `clearFlowState` to remove all dynamic flowstates from nodes and redraw the chart. This returns nodes to their default appearance. ```js // After some dynamic state updates, reset everything $('#pipeline').flowChart('clearFlowState'); ``` -------------------------------- ### Node Click Event Handler Source: https://github.com/adrai/flowchart.js/blob/master/example/index.html A JavaScript function to handle click events on flowchart nodes. It logs the clicked node to the console. ```javascript function myFunction(event, node) { console.log("You just clicked this node:", node); } ``` -------------------------------- ### Parse DSL string into a chart instance Source: https://context7.com/adrai/flowchart.js/llms.txt Use `flowchart.parse()` to convert a flowchart DSL string into a chart object. This object can then be used to draw the SVG. Supports Node.js/CommonJS. ```javascript const flowchart = require('flowchart.js'); const code = ` st=>start: Start e=>end: End op=>operation: Process Data cond=>condition: Success? st->op->cond cond(yes)->e cond(no)->op `; const chart = flowchart.parse(code); // chart.drawSVG(...) / chart.clean() are now available ``` -------------------------------- ### roundness option Source: https://context7.com/adrai/flowchart.js/llms.txt Configures the roundness of node corners. This option can be set globally or overridden for specific node symbols. ```APIDOC ## `roundness` option ### Description Setting `roundness` on the global options or per-symbol overrides applies SVG `rx`/`ry` rounding to the rectangular node shapes. ### Usage ```javascript chart.drawSVG('canvas', { 'roundness': 8, // applies to all shapes 'symbols': { 'operation': { 'roundness': 20 }, // override for operation nodes only 'start': { 'roundness': 50 } // very round start node } }); ``` ### Parameters - **roundness** (number) - The radius for rounded corners. Can be a global setting or specified per symbol type. ``` -------------------------------- ### chart.clean() Source: https://context7.com/adrai/flowchart.js/llms.txt Removes the rendered SVG from the DOM. This is useful before re-rendering or when the chart is no longer needed. ```APIDOC ## chart.clean() — Remove the rendered SVG from the DOM ### Description Removes the Raphaël canvas element from the DOM. Call before re-rendering to the same container, or when navigating away. The chart instance can be drawn again after cleaning. ### Method `chart.clean()` ### Parameters (No parameters) ### Request Example ```js const chart = flowchart.parse(` st=>start: Start e=>end: End st->e `); chart.drawSVG('canvas'); // Later, re-render with different options chart.clean(); chart.drawSVG('canvas', { 'fill': '#f0f0f0', 'scale': 2 }); ``` ### Response (No explicit response body, cleans the DOM) ### Response Example (DOM is updated by removing the SVG element) ``` -------------------------------- ### Rounded Node Corners with `roundness` Option Source: https://context7.com/adrai/flowchart.js/llms.txt Control the roundness of node corners by setting the `roundness` option globally or per symbol type. This applies SVG `rx`/`ry` attributes to rectangular node shapes. ```js chart.drawSVG('canvas', { 'roundness': 8, // applies to all shapes 'symbols': { 'operation': { 'roundness': 20 }, // override for operation nodes only 'start': { 'roundness': 50 } // very round start node } }); ``` -------------------------------- ### Clean rendered SVG from DOM Source: https://context7.com/adrai/flowchart.js/llms.txt Use `chart.clean()` to remove the Raphaël canvas element from the DOM. This is useful before re-rendering to the same container or when navigating away. The chart can be redrawn after cleaning. ```javascript const chart = flowchart.parse( ` st=>start: Start e=>end: End st->e ` ); chart.drawSVG('canvas'); // Later, re-render with different options chart.clean(); chart.drawSVG('canvas', { 'fill': '#f0f0f0', 'scale': 2 }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.