Gerardo Rentería Blog

📊 Mermaid Diagrams in Business Central: Dynamic Visual Intelligence 🎨(English version)

📊 Mermaid Diagrams en Business Central: Inteligencia visual dinámica 🎨

Si deseas transformar tus datos de Business Central en diagramas interactivos y atractivos sin salir del ERP, puedes lograrlo en tiempo real con Mermaid.js directamente en Business Central.

Mermaid.js es una biblioteca de JavaScript que genera diagramas a partir de definiciones de texto. Es como un «Markdown para diagramas». Por ejemplo, en vez de:

Message('Customer has 5 orders, 3 shipments, 8 invoices');

Obtienes:

flowchart LR
    Customer --> Orders[📋 5 Orders]
    Orders --> Shipments[📦 3 Shipments]
    Shipments --> Invoices[🧾 8 Invoices]

Por lo que, la idea de la publicación se basa en la creación de un marco de visualización para Mermaid que:

• Genera diagramas de flujo, diagramas de Gantt, diagramas ER y más.
• Utiliza datos de tablas BC.
• Funciona con cualquier entidad (Clientes, Artículos, Proveedores, etc.)
• Ofrece temas y escalas totalmente personalizables

El framework consta de 3 capas:

• Capa de Business Central AL (extensiones de página, codeunit auxiliar para el acceso a datos, API de administración y página de visualización).
• Capa de complemento de control – AddIn (puente JavaScript que conecta AL con Mermaid.js)
• La CDN externa (biblioteca Mermaid.js

Los datos fluyen desde las páginas de BC para generar la sintaxis del diagrama, luego a través de la API de administración hasta la página de visualización, que envía el código al AddIn para su renderizado mediante Mermaid.js, devolviendo finalmente la salida SVG al usuario.

El Framework admite los tipos de diagramas de Mermaid con ejemplos del mundo real:

Ejemplo real: Cronograma de proyectos en acción

1. Acción del usuario – El gestor de proyectos abre la Lista de Proyectos y hace clic en el botón «Cronograma del proyecto».

2. Capa AL (Extensión de página) – MermaidExample05JobList.PageExt.al captura la acción:

trigger OnAction()
begin
    DiagramCode := MermaidHelpers.GenerateJobTimelineDiagram(Rec."No.", Rec.Description);
    MermaidMgt.ShowMermaidDiagram(DiagramCode, MermaidTheme::Default, 1.0);
end;

3. Unidad de código auxiliar – MermaidExampleHelpers.Codeunit.al consulta datos reales:

 procedure GenerateJobTimelineDiagram(JobNo: Code[20]; JobDescription: Text[100]): Text
    var
        TypeHelper: Codeunit "Type Helper";
        Diagram: Text;
    begin
        if JobNo = '' then
            exit('');

        Diagram := 'gantt' + TypeHelper.LFSeparator();
        Diagram += '    title Project Timeline: ' + JobDescription + ' (' + JobNo + ')' + TypeHelper.LFSeparator();
        Diagram += '    dateFormat YYYY-MM-DD' + TypeHelper.LFSeparator();
        Diagram += '    section Tasks'.............................

        JobTask.SetRange("Job No.", JobNo);
        JobTask.SetRange("Job Task Type", JobTask."Job Task Type"::Posting);
        JobTask.SetCurrentKey("Job No.", "Job Task No.");
        if JobTask.FindSet() then........................

        exit('    ' + TaskName + ' :active, ' +
             Format(StartDate, 0, '<Year4>-<Month,2>-<Day,2>') + ', ' +
             Format(EndDate, 0, '<Year4>-<Month,2>-<Day,2>') + TypeHelper.LFSeparator());
        .......................

4. API de gestión – Abre la página del visor visual de Mermaid con el código del diagrama.

5. Puente de complemento de control (AddIn)- JavaScript recibe el texto del diagrama de Gantt y llama a Mermaid.js:

```javascript
mermaid.render('diagram-12345', diagramCode)
    .then(function(result) {
        contentDiv.innerHTML = result.svg;  // Display rendered diagram
    });
```

6. CDN de Mermaid.js – Analiza la sintaxis, renderiza SVG con barras de tiempo, fechas y nombres de tareas.

7. Resultado – El usuario ve un diagrama de Gantt interactivo que muestra «Requisitos previos a la instalación» (5-10 de noviembre), «Entrega» (11-15 de noviembre), «Instalación» (16-21 de noviembre) y «Configuración» (22-29 de noviembre) con barras de línea de tiempo visuales.

Cada diagrama se puede personalizar con diferentes temas y escalas para adaptarlo al contexto de su presentación, como los siguientes temas disponibles:

enum 60100 "Mermaid Theme"
{
    value(1; Default) { Caption = 'Default'; }  // Light theme
    value(2; Dark) { Caption = 'Dark'; }
    value(3; Forest) { Caption = 'Forest'; }     // Green
    value(4; Neutral) { Caption = 'Neutral'; }   // Gray
}

Opciones de escala:

• Pequeño (60 %): Vista compacta para diagramas complejos.
• Mediano (80 %): Vista equilibrada.
• Grande (100 %): Vista de pantalla completa.

Con esta propuesta tenemos algunos ejemplos, como:

• Lista de clientes – Flujo de ventas (Diagrama de flujo)
• Lista de artículos – Estructura de la lista de materiales BOM (Diagrama de clases)
• Orden de compra – Flujo de estado (Diagrama de estados)
• Orden de Venta: Flujo del proceso de pedido (Diagrama de secuencia)

🎯 Y algunos casos de uso en las organizaciones reales:

• Para equipos de ventas
  • ✅ Flujo de ventas del cliente – Visualice el recorrido del cliente desde los pedidos → envíos → facturas con datos reales
  • ✅ Gestión de oportunidades – Muestre las etapas de las oportunidades mediante diagramas de estado (Abierta → Calificada → Ganada/Perdida)
• Para la gestión de proyectos
  • ✅ Cronograma del proyecto – Diagrama de Gantt que muestra las tareas del proyecto durante las fases de planificación y ejecución
  • ✅ Asignación de recursos – Diagrama de flujo que muestra las asignaciones de los miembros del equipo por proyecto
• Para Fabricación
  • ✅ Estructura de la Lista de Materiales (BOM) ​​- Diagrama de clases que muestra los componentes del artículo y las relaciones de cantidad por unidad
  • ✅ Flujo de la Orden de Producción – Diagrama de estados: desde liberado → en proceso → finalizado
• Para TI y desarrolladores
  • ✅ Documentación del modelo de datos – Diagramas de clases generados automáticamente a partir de las relaciones entre tablas
  • ✅ Flujos de integración – Diagramas de secuencia que muestran las llamadas a la API y los intercambios de datos

Todos los diagramas se pueden exportar como SVG con un solo clic. Ideal para:

• 📊 Incluirlos en presentaciones de PowerPoint.
• 📧 Compartirlos por correo electrónico con las partes interesadas.
• 📝 Integrarlos en la documentación.
• 🖼️ Guardar instantáneas del estado actual de los datos.

El botón Exportar está siempre disponible en la barra de herramientas del visor.

El código se encuentra aquí, por si quieres revisarlo: https://github.com/gdrgdev/Blog/tree/main/GDRGDev_Mermaid

La solución se compone:

• 📦 La solución se compone:
• MermaidCodeEditor – Playground interactivo con 6 tipos de diagramas de ejemplo para probar sintaxis Mermaid.
• MermaidDisplayOptions – Almacena preferencias de visualización de diagramas.
• MermaidExample01CustomerList – Agrega «Sales Flow Diagram» a Lista de Clientes mostrando métricas de órdenes/envíos/facturas.
• MermaidExample02ItemList – Agrega «BOM Structure» a Lista de Productos visualizando componentes y cantidades.
• MermaidExample03PurchaseOrder – Agrega «Order Status Flow» a Orden de Compra mostrando transiciones de ciclo de vida.
• MermaidExample04SalesOrder – Agrega 2 diagramas: desglose de líneas de orden y flujo de proceso.
• MermaidExample05JobList – Agrega «Project Timeline» a Lista de Proyectos mostrando diagrama Gantt de tareas con fechas.
• MermaidExampleHelpers – Capa de acceso a datos centralizada con 6 métodos de generación de diagramas.
• MermaidPermissions – Define permisos de lectura/ejecución para todos los objetos del framework.
• MermaidTheme – Enum de configuración de temas para personalización visual.
• MermaidVisualizationMgt – API principal con 3 métodos sobrecargados para mostrar diagramas con temas y escalas.
• MermaidVisualizerAddin – Puente JavaScript conectando AL con Mermaid.js v11 CDN para renderizado de diagramas.
• MermaidVisualViewer – Motor de visualización con 4 temas y 3 opciones de escala.
• MermaidVisualizer.js – Maneja renderizado de diagramas, cambio de temas, ajuste de escala y exportación SVG.

Espero que esta extensión te ayude en tu trabajo diario con Business Central

📊 Mermaid Diagrams in Business Central: Dynamic Visual Intelligence 🎨

If you want to transform your Business Central data into interactive and engaging diagrams without leaving the ERP, you can do so in real time with Mermaid.js directly within Business Central.

Mermaid.js is a JavaScript library that generates diagrams from text definitions. It’s like a «Markdown for diagrams.» For example, instead of:

Message('Customer has 5 orders, 3 shipments, 8 invoices');

You get:

flowchart LR
    Customer --> Orders[📋 5 Orders]
    Orders --> Shipments[📦 3 Shipments]
    Shipments --> Invoices[🧾 8 Invoices]

Therefore, the idea of ​​the post is based on the creation of a visualization framework for Mermaid that:

• Generate flowcharts, Gantt charts, ER diagrams, and more.
• Use data from BC tables.
• Works with any entity (Customers, Items, Vendors, etc.).
• Offers fully customizable themes and scales.

The framework consists of 3 layers:

• Business Central AL layer (page extensions, auxiliary codeunit for data access, core API, and display page).
• Control plugin layer – Add-In (JavaScript bridge connecting AL to Mermaid.js).
• External CDN (Mermaid.js library).

Data flows from the BC pages to generate the diagram syntax, then through the core API to the visualization page, which sends the code to the AddIn for rendering using Mermaid.js, finally returning the SVG output to the user.

The Framework supports Mermaid diagram types with real-world examples:

Real-world example: Project timeline in action

1. User action – The project manager opens the Project List and clicks on the «Project Timeline» button.

2. AL Layer (Page Extension) – MermaidExample05JobList.PageExt.al captures the action:

trigger OnAction()
begin
    DiagramCode := MermaidHelpers.GenerateJobTimelineDiagram(Rec."No.", Rec.Description);
    MermaidMgt.ShowMermaidDiagram(DiagramCode, MermaidTheme::Default, 1.0);
end;

3. Auxiliary code unit – MermaidExampleHelpers.Codeunit.al queries real data:

 procedure GenerateJobTimelineDiagram(JobNo: Code[20]; JobDescription: Text[100]): Text
    var
        TypeHelper: Codeunit "Type Helper";
        Diagram: Text;
    begin
        if JobNo = '' then
            exit('');

        Diagram := 'gantt' + TypeHelper.LFSeparator();
        Diagram += '    title Project Timeline: ' + JobDescription + ' (' + JobNo + ')' + TypeHelper.LFSeparator();
        Diagram += '    dateFormat YYYY-MM-DD' + TypeHelper.LFSeparator();
        Diagram += '    section Tasks'.............................

        JobTask.SetRange("Job No.", JobNo);
        JobTask.SetRange("Job Task Type", JobTask."Job Task Type"::Posting);
        JobTask.SetCurrentKey("Job No.", "Job Task No.");
        if JobTask.FindSet() then........................

        exit('    ' + TaskName + ' :active, ' +
             Format(StartDate, 0, '<Year4>-<Month,2>-<Day,2>') + ', ' +
             Format(EndDate, 0, '<Year4>-<Month,2>-<Day,2>') + TypeHelper.LFSeparator());
        .......................

4. Management API – Opens the Mermaid visual viewer page with the diagram code.

5. Control Add-In Bridge – JavaScript receives the Gantt chart text and calls Mermaid.js:

```javascript
mermaid.render('diagram-12345', diagramCode)
    .then(function(result) {
        contentDiv.innerHTML = result.svg;  // Display rendered diagram
    });
```

6. Mermaid.js CDN – Parses syntax, renders SVG with time bars, dates, and task names.

7. Visual Result – The user sees an interactive Gantt chart showing «Installation Prerequisites» (November 5-10), «Delivery» (November 11-15), «Installation» (November 16-21) and «Configuration» (November 22-29) with visual timeline bars.

Each diagram can be customized with different themes and scales to suit the context of your presentation, such as the following available themes:

enum 60100 "Mermaid Theme"
{
    value(1; Default) { Caption = 'Default'; }  // Light theme
    value(2; Dark) { Caption = 'Dark'; }
    value(3; Forest) { Caption = 'Forest'; }     // Green
    value(4; Neutral) { Caption = 'Neutral'; }   // Gray
}

Scaling options:

• Small (60%): Compact view for complex diagrams.
• Medium (80%): Balanced view.
• Large (100%): Full-screen view.

We have some examples, such as:

• Customer List – Sales Flow (Flowchart)
• Item List – Bill of Materials (BOM) Structure (Class Diagram)
• Purchase Order – Status Flow (Status Diagram)
• Sales Order – Order Process Flow (Sequence Diagram)

🎯 And some use cases in real organizations:

• For sales teams
  • ✅ Customer Sales Flow – Visualize the customer journey from orders → shipments → invoices with real-time data
  • ✅ Opportunity Management – Show opportunity stages using status diagrams (Open → Qualified → Won/Lost)
• For project management
  • ✅ Project Timeline – Gantt chart showing project tasks during the planning and execution phases
  • ✅ Resource Allocation – Flowchart showing team member assignments for each project
• For Manufacturing
  • ✅ Bill of Materials (BOM) Structure – Class diagram showing the item’s components and quantity relationships per unit
  • ✅ Production Order Flow – State diagram: from released → in process → completed
• For YOU and developers
  • ✅ Data model documentation – Class diagrams automatically generated from table relationships
  • ✅ Integration flows – Sequence diagrams showing API calls and data exchanges

All diagrams can be exported as SVG with a single click. Ideal for:

• 📊 Include them in PowerPoint presentations.
• 📧 Share them via email with stakeholders.
• 📝 Integrate them into documentation.
• 🖼️ Save snapshots of the current data state.

The Export button is always available in the viewer’s toolbar.

The code is here, if you want to check it out: https://github.com/gdrgdev/Blog/tree/main/GDRGDev_Mermaid

The solution is composed of these objects:

• MermaidCodeEditor – Interactive playground with 6 sample diagram types for testing Mermaid syntax.
• MermaidDisplayOptions – Stores diagram display preferences.
• MermaidExample01CustomerList – Adds a Sales Flow Diagram to the Customer List, displaying order/shipment/invoice metrics.
• MermaidExample02ItemList – Adds a Bill of Materials (BOM) Structure to the Product List, displaying components and quantities.
• MermaidExample03PurchaseOrder – Adds an Order Status Flow to the Purchase Order, displaying lifecycle transitions.
• MermaidExample04SalesOrder – Adds two diagrams: an order line breakdown and a process flow.
• MermaidExample05JobList – Adds a Project Timeline to the Project List, displaying a Gantt chart of tasks with dates.
• MermaidExampleHelpers – Centralized data access layer with 6 diagram generation methods. MermaidPermissions – Defines read/execute permissions for all objects in the framework.
• MermaidTheme – Theme configuration enum for visual customization.
• MermaidVisualizationMgt – Main API with 3 overloaded methods for displaying diagrams with themes and scales.
• MermaidVisualizerAddin – JavaScript bridge connecting AL to the Mermaid.js v11 CDN for diagram rendering.
• MermaidVisualViewer – Visualization engine with 4 themes and 3 scaling options.
• MermaidVisualizer.js – Handles diagram rendering, theme switching, scaling, and SVG export.

I hope this extension helps you in your daily work with Business Central.

Más información / More information:

• mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
• Creating diagrams – GitHub Docs
• Mermaid Chart – Create complex, visual diagrams with text. A smarter way of creating diagrams.