Flowchart JS Library for Interactive Flowcharts in JavaScript

FlowchartJS is a lightweight JavaScript flowchart library for building interactive flowcharts from simple text syntax.

Use FlowchartJS to create a javascript flowchart, embed an interactive flowchart JavaScript experience in your app, or build a fast HTML flowchart library workflow with zero dependencies. You can jump into the live playground, follow the getting started guide, or browse the API methods below.

It renders Mermaid-inspired text definitions into dynamic diagrams using pure Vanilla JS, making it a practical option for teams searching for flowchart js or flowchart.js tooling without a heavy framework.

Features

FlowchartJS focuses on the core features most developers want from a flow chart JS library.

• Create interactive flowcharts in JavaScript from readable text syntax.
• Style nodes, links, classes, and themes without changing your app structure.
• Export diagrams as PNG or SVG for docs, dashboards, and product flows.

Use Cases

This JavaScript flowchart tool works well for product flows, decision trees, process mapping, app onboarding diagrams, and embeddable documentation examples.

Getting Started

Include the CSS and JS files in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Mrithul-E/FlowchartJS/docs/dist/flowchart.css">
<script src="https://cdn.jsdelivr.net/gh/Mrithul-E/FlowchartJS/docs/dist/flowchart.js"></script>

Create a container and initialize the chart:

<div id="my-chart"></div>

<script>
const chart = new FlowChart('my-chart', {
    theme: 'dark',
    interactive: true
});

chart.render(`
    graph TD
    A[Start] --> B{Decision}
    B --> |Yes| C[Action]
    B --> |No| D[End]
`);
</script>

After setup, continue to the syntax guide to learn the text format or review configuration options for theming and interactivity.

Syntax Guide

FlowchartJS uses a simple text-based syntax similar to Mermaid:

graph TD
    A[Node A] --> B[Node B]
    B --> C{Decision}
    C --> |Yes| D[Result]
    C --> |No| E[Alternative]

Node Shapes

Use different bracket styles to define node shapes:

Edge Types

Direction

Set the flow direction with the graph declaration:

Styling & Classes

Customize the look of nodes and edges using standard styling directives.

Link Styling

Style individual or multiple links using linkStyle. Supports standard SVG stroke properties and curve type.

graph TD
    A[Start] --> B[Step]
    B --> C[Linear]
    linkStyle 0 stroke:#ff0000,stroke-width:4px,curve:step
    linkStyle 1 stroke:blue,curve:linear

Supported curve types: bezier (default), linear, step, stepAfter, stepBefore.

Node Styling

Apply inline styles to specific nodes using style:

style id1 fill:#f9f,stroke:#333,stroke-width:4px,color:#fff

Classes

Define reusable classes with classDef and apply them using class or the ::: shorthand.

classDef error fill:#ff0000,color:#fff
classDef success fill:#00ff00,color:#000

A:::error --> B:::success
class A error
class B success

Configuration Options

Themes

FlowchartJS supports light and dark themes:

// Initialize with dark theme
const chart = new FlowChart('chart', { theme: 'dark' });

// Switch theme dynamically
chart.setTheme('light');

API Methods

Export PNG

Export the current chart as a PNG image:

chart.exportImage();

Export SVG

Export the current chart as an SVG file:

chart.exportSVG();