Draw flowcharts in AL with mermaid.js

I’m still messing around with flowcharts, and thanks to lots of comments from viewers, I’m now going to try out mermaid.js instead. Check out the video:

https://youtu.be/OIVVpFSJLmw

In this video, Erik revisits his earlier approach to drawing flowcharts inside Business Central using AL and JavaScript. After finding that his initial library choice (flowchart.js) didn’t hold up well in a real application, he swaps it out for mermaid.js — a far more capable charting library that many viewers had recommended. The result is a cleaner, more powerful integration that supports flowcharts, sequence diagrams, class diagrams, and more.

Why Switch to Mermaid.js?

In a previous video, Erik used flowchart.js (along with Raphael.js) to render simple flowcharts inside a Business Central control add-in. While the initial tests looked promising, the library produced poor results when applied to a real-world scenario. At the same time, several viewers suggested using mermaid.js instead. Erik recalled having looked at mermaid.js a year or two earlier but never getting around to implementing it — so this was the perfect opportunity.

Mermaid.js is significantly more advanced than flowchart.js. It supports flowcharts, sequence diagrams, class diagrams, sub-graphs, and much more — all defined with a simple text-based syntax.

Setting Up the Control Add-in

The first step was finding a CDN link for mermaid.js. Erik searched for “mermaid.js CDN” and found a Cloudflare-hosted version. The key difference from the previous approach: instead of downloading the library and bundling it as a local file, he references it directly from the CDN in the control add-in definition. The old flowchart.js and raphael.js files are no longer needed.

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

Notice that the Scripts property now includes the CDN URL for mermaid.min.js directly alongside the local script.js file. This is the standard pattern for pulling external JavaScript libraries into a Business Central control add-in without needing npm or Node.js.

Initializing Mermaid.js

Mermaid needs to be initialized before it can render anything. This is done in the startup script. A critical setting here is startOnLoad: false — since there’s no chart data available at page load time, we don’t want mermaid scanning the DOM for diagrams automatically. Instead, we’ll trigger rendering programmatically.

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 mermaid.initialize({ startOnLoad: false }) call tells mermaid to load but not attempt to render anything until we explicitly ask it to.

The Draw Function

The heart of the integration is the Draw function in script.js. This replaces the old flowchart.js-based Draw2 function. It uses mermaid.mermaidAPI.render() to convert mermaid markup into an SVG image, then injects that SVG into the control add-in’s container div.

function Draw(code) {
    try {
        const insertSvg = function (svgCode, bindFunctions) {
            document.getElementById('controlAddIn').innerHTML = svgCode;
        };
        mermaid.mermaidAPI.render('chart', code, insertSvg);
    }
    catch (e) {
        console.log(e);
    }
}

Here’s what’s happening step by step:

  1. mermaid.mermaidAPI.render('chart', code, insertSvg) — This tells mermaid to render the given code (mermaid diagram syntax) into SVG. The first parameter ('chart') is an ID for the rendered element.
  2. insertSvg — A callback function that receives the generated SVG code and inserts it into the DOM by setting innerHTML on the control add-in container.
  3. Try/catch — Wrapped in error handling because invalid diagram syntax will throw errors. On initial page load with no code, you’ll see a “syntax error in graph” message in the console, which is expected.

The old flowchart.js draw function is kept around for reference but is no longer called:

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

The AL Page

On the AL side, the page is straightforward. There’s a text field where you type mermaid diagram code, and on validation it calls the Draw procedure on the control add-in:

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

The workflow is simple: type mermaid syntax into the text field, tab out (triggering OnValidate), and the diagram renders in the control add-in area.

Testing with Mermaid Syntax

Erik demonstrated several diagram types during the video. Mermaid uses a clean, text-based syntax. For example, a simple top-to-bottom flowchart:

graph TB
    A --> B

He also tested more complex examples including sub-graphs, sequence diagrams, and class diagrams with styling — all rendered beautifully inside Business Central. A useful cheat sheet for mermaid syntax can be found by searching for “mermaid cheat sheet” online.

Tips for Real-World Use

  • Scrollable container: For very large diagrams, Erik mentions that in his actual implementation he wraps the output in a div with scrollbars so users can navigate big charts.
  • Async rendering: The mermaid API supports async patterns. You could use async/await with the render function for more complex scenarios.
  • CDN vs. local: You can also download the mermaid.min.js file and include it locally in your extension, just like the old flowchart.js and raphael.js files were included. The CDN approach is simply more convenient during development.

Summary

Swapping from flowchart.js to mermaid.js turned out to be a quick and painless upgrade. The key pieces are: referencing the mermaid library via CDN in the control add-in definition, initializing it with startOnLoad: false in the startup script, and using mermaid.mermaidAPI.render() to dynamically generate SVG from diagram code. The result is a much more powerful and flexible charting capability inside Business Central, supporting flowcharts, sequence diagrams, class diagrams, and more — all driven by simple text input from AL.

Picture of hougaard

hougaard