Can you draw flowcharts with AL in Business Central?

I suddenly had a need to display a flowchart inside Business Central. Follow this quick little adventure to a surprisingly easy way to add flowcharts to BC:

https://youtu.be/EaAeES80aV4

In this video, Erik explores whether you can draw flowcharts directly within Business Central using AL and a JavaScript control add-in. He’s working on a customer project that involves building a complex state machine with many if/then branches, and he needs a way to visualize it. He discovers flowchart.js — a lightweight JavaScript library — and integrates it into a Business Central page in just a few minutes.

The Problem: Visualizing a State Machine

Erik is building a state machine inside Business Central for a customer project. The complexity is substantial — lots of branching paths and conditional logic. A project like this really needs a visual representation, like a flowchart, to make the logic comprehensible. So he went hunting for a toolkit and found flowchart.js.

The beauty of flowchart.js is its simplicity: you describe your flowchart in a small text-based language where you define boxes and their connections, and the library renders an SVG diagram. There’s remarkably little code involved.

Starting Point: A Control Add-in Boilerplate

To avoid spending time on boilerplate, Erik starts from a previous control add-in solution he built for handling iframe rescaling. This gives him a working control add-in shell with the resize handling already in place. The starting point includes three key files:

  • The control add-in definition (addin.al) — describes the add-in interface
  • The startup script (startup.js) — runs when the add-in loads
  • The script file (script.js) — contains functions that can be called from AL

Adding the JavaScript Libraries

Flowchart.js depends on Raphael.js, an SVG drawing library. Erik grabs the minified source for both libraries and adds them as files to the project. The control add-in definition references these scripts along with the main script file:

controladdin testaddin
{
    StartupScript = 'startup.js';
    Scripts = 'script.js', 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.3.0/mermaid.min.js';
    HorizontalStretch = true;
    VerticalStretch = true;

    event ImAmReady(Parameters: JsonObject);
    procedure HeresSomeData(Data: JsonObject);

    procedure Draw(code: Text);
}

The key addition here is the Draw procedure, which accepts a text parameter containing the flowchart definition code.

Implementing the Draw Function

On the JavaScript side, the Draw function is surprisingly simple. It clears the previous diagram, parses the flowchart code, and renders the SVG into the control add-in’s div. Erik wraps it in a try/catch because arrows can sometimes get lost in translation within the iframe:

function Draw2(code) {
    try {
        controlAddIn.innerHTML = "";
        var diagram = flowchart.parse(code);
        diagram.drawSVG('controlAddIn');
    }
    catch (e) {
        console.log(e);
    }
}

The critical line controlAddIn.innerHTML = ""; clears the previous SVG before drawing a new one. Without this, each new diagram would just append to whatever was already there.

The Startup Script

The startup script handles the iframe resizing trick (from a previous video) and initializes the add-in. Erik cleans out the old “orange blob” demo code:

var controlAddIn = document.getElementById('controlAddIn');

var heightindicator = window.parent.document.querySelector('div[class~="control-addin-form"]');
if (heightindicator != null) {
    window.frameElement.style.height = heightindicator.offsetHeight.toString() + "px";
    window.addEventListener('resize', function (event) {
        window.frameElement.style.height = heightindicator.offsetHeight.toString() + "px";
    }, true);
}

parameter = {};
parameter['Name'] = 'Erik';
parameter['Info'] = { "Erik" : 'Name'};

mermaid.initialize({ startOnLoad: false });

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ImAmReady',[parameter]);

The AL Page

On the AL side, Erik creates a simple page with a multiline text field for entering the flowchart code and the control add-in to display it. When the user tabs out of the text field, the OnValidate trigger fires and sends the code to the JavaScript Draw function:

page 50132 "Test Page"
{
    Editable = true;
    PageType = List;
    layout
    {
        area(Content)
        {
            grid(g)
            {
                usercontrol(x; testaddin)
                {
                    ApplicationArea = all;
                    trigger ImAmReady(Parameters: JsonObject)
                    begin
                    end;
                }
                field(TheCode; TheCode)
                {
                    ApplicationArea = all;
                    MultiLine = true;
                    trigger OnValidate()
                    begin
                        CurrPage.x.Draw(TheCode);
                    end;
                }
            }
        }
    }
    var
        TheCode: Text;
}

A few things Erik discovered along the way:

  • The page needs to be editable — he set Editable = true and PageType = List
  • He removed the source table since it wasn’t needed for this demo
  • The text field and control add-in should not be inside a repeater

The Flowchart.js Language

The flowchart definition language is straightforward. You define your symbols (boxes) with => and connect them with ->. For example, a simple flowchart might look like:

st=>start: Start
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end: End

st->op->cond
cond(yes)->e
cond(no)->op

You paste this text into the multiline field, tab out, and the flowchart appears instantly in the control add-in. Erik tests several examples from the flowchart.js website, including more complex ones, and they all render successfully.

A Note on SVG Rendering

One thing Erik notices is that the library creates SVG output, so for larger or more complex diagrams, you might want to add scrollbars to the containing div. The current implementation works well for reasonably-sized charts, but production use would benefit from some overflow handling.

Summary

Here’s a recap of everything needed to get flowcharts working in Business Central:

  1. Add two JavaScript files to your project: raphael.js and flowchart-latest.js
  2. Define a Draw procedure in your control add-in definition
  3. Implement the Draw function in JavaScript: clear the container, parse the code, render the SVG
  4. Call Draw from AL on validate when the user enters flowchart code

The whole integration turned out to be surprisingly painless. If you need to visualize state machines, process flows, or any kind of flowchart inside Business Central, this is a solid starting point. The flowchart.js library is lightweight, the text-based definition language is easy to generate programmatically from AL, and the rendering is clean SVG output.

Picture of hougaard

hougaard