DOCSEARCHbyAlgolia
Submit Docs

flowchart.js

repository·master·Indexed 27 days ago

https://github.com/adrai/flowchart.js

A Domain Specific Language (DSL) and SVG renderer for creating flowcharts. It allows users to define nodes and connections separately to enable node reuse and easy styling. The library supports various node types including start, end, operation, condition, and parallel, and requires the Raphaël library for rendering. It provides a FlowChart API to parse the DSL into a structured format for web or Node.js environments.

Tokens
2.3K
Snippets
1
Records
20
Agent score
93%

What's inside flowchart.js

  2. Configure flowchart styling and appearance

    master

    The following styling features are available in current versions:

    • Rounded Corners: Supported via styling updates introduced in v1.17.0.
    • Color Coding (flowstate): Supported via flowstate introduced in v1.3.0.
    • CSS Classes: You can apply CSS classes to symbols (introduced in v1.3.1).
    • Font Options: Supports font, font-family, and font-weight (introduced in v1.2.9).
    • Line Styles: Supports line style flow (introduced in v1.7.0).
    • Arrow Customization: Supports the arrow-end option (introduced in v1.2.3) and the arrow-text attribute for symbols (introduced in v1.9.0).

  3. Configure chart layout options

    master

    The following layout configuration options are available:

    • scale: Allows scaling the chart (introduced in v1.4.0).
    • maxWidth: Sets a maximum width for the chart (introduced in v1.2.6).
    • Condition Alignment: A parameter exists to disable the vertical alignment of condition symbols (introduced in v1.7.0).

  4. Emphasize a specific path with custom styling

    master

    You can apply custom CSS-like styling to specific paths in a flowchart using the @> operator and a JSON-like object for properties such as stroke, stroke-width, and arrow-end.

    Example:

    st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>e({"stroke":"Red"})

  6. Define nodes using the Node Syntax

    master

    Nodes are defined using the following syntax:

    nodeName=>nodeType: nodeText[|flowstate][:>urlLink]

    • nodeName: The variable name used to reference the node in connections.
    • nodeType: The shape/type of the node (see Node Types).
    • nodeText: The text displayed inside the node. Newlines are supported.
    • |flowstate (optional): Extra styling for the node.
    • :>urlLink (optional): A URL to link to when the node is clicked. Use [blank] at the end of the URL to open in a new tab.

    Warning: Avoid using the following symbols in your nodeText: =>, ->, :>, |, @>, and :$.

  7. Create connections between nodes

    master

    Connections are defined separately from node definitions using the -> operator.

    Basic Connection

    nodeVar1->nodeVar2

    Directions

    You can specify the direction a connection leaves a node using: left, right, top, or bottom. This is added inside parentheses after the node variable.

    Type-Specific Connection Specifiers

    Some node types require or support specific parameters in parentheses (spec1, spec2):

    • condition: Requires a logical specification (yes or no).
      • cond(yes, right)->nextNode1
      • cond(no, bottom)->nextNode2
    • parallel: Requires a path specification (path1, path2, or path3).
      • para(path1, top)->nextNode1
      • para(path2, bottom)->nextNode2
    • start, operation, inputoutput, subroutine: Support an optional direction.
      • op1(left)->next

    Custom Branch Names

    You can add custom names to branches using the @ symbol inside the parentheses: cond(true@linear)->io

  11. Add external links to nodes

    master

    You can make nodes clickable by appending the :> operator followed by a URL.

    • To open in a new tab: Append [blank] to the URL.
    • To navigate the current page: Provide the URL without [blank].

    Example:

    st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.yahoo.com

  12. Configure flowchart.js default options

    master

    When initializing or customizing a flowchart, you can provide an options object to override the default styling and behavior. The following keys are available for configuration:

    Layout and Dimensions

    • x: Horizontal offset (default: 0)
    • y: Vertical offset (default: 0)
    • scale: Scaling factor (default: 1)
    • line-width: Thickness of lines (default: 3)
    • line-length: Length of lines (default: 50)
    • text-margin: Margin around text (default: 10)

    Typography

    • font-size: Size of the text (default: 14)
    • font-color: Color of the text (default: 'black')

    Colors and Styling

    • line-color: Color of the lines (default: 'black')
    • element-color: Color of the element borders (default: 'black')
    • fill: Background fill color for elements (default: 'white')
    • class: CSS class applied to the flowchart (default: 'flowchart')

    Logic and Symbols

    • yes-text: Text used for positive condition branches (default: 'yes')
    • no-text: Text used for negative condition branches (default: 'no')
    • arrow-end: Style of the arrow head (default: 'block')

    Symbol Customization

    The symbols object allows you to define specific styles for different node types. Each key in symbols can take an object of properties to override defaults for that specific node type.