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

}

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

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)

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.

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

El código se encuentra aquí, por si quieres revisarlo: <Click aquí>

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 información te ayude.