---
id: post/gerardorenteria-blog/12801
type: post
title: "📊 Mermaid Diagrams in Business Central: Dynamic Visual Intelligence 🎨"
summary: "Describes a sample Business Central extension that renders Mermaid.js diagrams from live BC table data. It uses three layers: AL page extensions and codeunits, a JavaScript control add-in bridge, and the Mermaid.js CDN. Examples include a Gantt project timeline from job tasks, customer sales flows, BOM structures and order status flows, with selectable themes and scaling and one-click SVG export."
tier: community
language: en
tags:
  - visualization
  - diagrams
  - mermaid
  - add-in
  - framework
  - data-driven
  - reporting
  - javascript
system: development
review:
  state: reviewed
  by: opus
  at: "2026-10-08T01:57:16.730Z"
  flags: []
generated:
  at: "2026-10-08T01:26:53.141Z"
  pipeline: 0.2.0
  prompts:
    extract-post: 1
  input_hash: b6c43a2f130d23857433b91dcdb461fe0755fc210a8340e7360df2955f4e3c72
evidence:
  - kind: blog
    url: https://gerardorenteria.blog/2026/01/22/%f0%9f%93%8a-mermaid-diagrams-in-business-central-dynamic-visual-intelligence-%f0%9f%8e%a8/
    title: "📊 Mermaid Diagrams in Business Central: Dynamic Visual Intelligence 🎨"
    date: "2026-01-22"
    commit: null
    t: null
    quote: null
links:
  learn: []
  objects: []
  features: []
  topics: []
  localizations: []
  videos: []
  posts: []
  guidelines: []
post_id: "12801"
source_id: gerardorenteria-blog
source_name: Gerardo Renteria
url: https://gerardorenteria.blog/2026/01/22/%f0%9f%93%8a-mermaid-diagrams-in-business-central-dynamic-visual-intelligence-%f0%9f%8e%a8/
published_at: "2026-01-22T20:45:57.000Z"
author: Gerardo Renteria
full_text: false
words: 2149
quotes: []
code_objects_mentioned:
  - page MermaidExample05JobList
  - page MermaidExample01CustomerList
  - page MermaidExample02ItemList
  - page MermaidExample03PurchaseOrder
  - page MermaidExample04SalesOrder
  - codeunit MermaidExampleHelpers
  - codeunit MermaidVisualizationMgt
  - enum Mermaid Theme
  - page MermaidCodeEditor
  - page MermaidDisplayOptions
  - page MermaidVisualViewer
  - other MermaidVisualizerAddin
  - other MermaidVisualizer.js
  - permissionset MermaidPermissions
systems:
  - development
  - integration
  - reporting
versions_mentioned: []
preview:
  embeddable: true
  frame_url: https://gerardorenteria.blog/2026/01/22/%f0%9f%93%8a-mermaid-diagrams-in-business-central-dynamic-visual-intelligence-%f0%9f%8e%a8/embed/
  image: https://gerardorenteria.blog/wp-content/uploads/2025/11/mermaid-chart-create-complex-visual-diagrams-with-text.-2025-11-17-145701.png
  image_alt: null
  image_w: 1237
  image_h: 1918
  site_name: Gerardo Rentería Blog
  favicon: https://gerardorenteria.blog/wp-content/uploads/2020/11/cropped-wolficon.jpg?w=32
  probed_at: "2026-10-07T11:51:19.032Z"
---

# 📊 Mermaid Diagrams in Business Central: Dynamic Visual Intelligence 🎨

[Read the post](https://gerardorenteria.blog/2026/01/22/%f0%9f%93%8a-mermaid-diagrams-in-business-central-dynamic-visual-intelligence-%f0%9f%8e%a8/) · Gerardo Renteria (Gerardo Renteria) · 2026-01-22 · 2149 words · tier community · reviewed (checked by Opus)

> Describes a sample Business Central extension that renders Mermaid.js diagrams from live BC table data. It uses three layers: AL page extensions and codeunits, a JavaScript control add-in bridge, and the Mermaid.js CDN. Examples include a Gantt project timeline from job tasks, customer sales flows, BOM structures and order status flows, with selectable themes and scaling and one-click SVG export.

## Key points

- Mermaid.js is a JavaScript library that generates diagrams from text definitions, similar to Markdown syntax
- The framework uses a three-layer architecture: AL page extensions and codeunits, a JavaScript control add-in bridge, and the external Mermaid.js CDN library
- Supports multiple diagram types including flowcharts, Gantt charts, ER diagrams, class diagrams, state diagrams, and sequence diagrams
- Diagrams are fully customizable with four built-in themes (Default, Dark, Forest, Neutral) and three scaling options (60%, 80%, 100%)
- All diagrams can be exported as SVG with one click for use in presentations, documentation, and email sharing

## AL objects mentioned

As named in the post. A name that matches one object page by exact type and name links to it; the others stay as named.

- page "MermaidExample05JobList"
- page "MermaidExample01CustomerList"
- page "MermaidExample02ItemList"
- page "MermaidExample03PurchaseOrder"
- page "MermaidExample04SalesOrder"
- codeunit "MermaidExampleHelpers"
- codeunit "MermaidVisualizationMgt"
- enum "Mermaid Theme"
- page "MermaidCodeEditor"
- page "MermaidDisplayOptions"
- page "MermaidVisualViewer"
- other "MermaidVisualizerAddin"
- other "MermaidVisualizer.js"
- permissionset "MermaidPermissions"

Not found in BC28-30: page "MermaidExample05JobList", page "MermaidExample01CustomerList", page "MermaidExample02ItemList", page "MermaidExample03PurchaseOrder", page "MermaidExample04SalesOrder", codeunit "MermaidExampleHelpers", codeunit "MermaidVisualizationMgt", enum "Mermaid Theme", page "MermaidCodeEditor", page "MermaidDisplayOptions", page "MermaidVisualViewer", permissionset "MermaidPermissions".

## Context

- Features: Flowchart generation, Gantt chart creation, ER diagram support, Class diagram visualization, State diagram rendering, Sequence diagram display, Theme customization, SVG export

Source: Gerardo Renteria, community blog. Summary, key points and quotes are derived (CONTENT-NOTICE.md); read the original for the full text.