About FlowchartJS

FlowchartJS lets you create interactive diagrams and visualizations using text and code.

It is a lightweight JavaScript library that renders Mermaid-inspired text definitions to create flowcharts dynamically. Zero dependencies, pure Vanilla JS.

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>

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();