Visualizing Your Code with Mermaid Chart Extension for GitHub Copilot

Introduction

With the advent of automatic generation of technical documentation using ALDOc tool and XML comments, we can continuously enhance the quality of our solution or customization documentation.

For instance, you can find such documentation for Microsoft Apps in the System and Base Application reference for Dynamics 365 Business Central.

The ALDoc tool generates a set of HTML files that can be viewed in a browser. However, the documentation can be further improved by adding diagrams to better understand the solution's architecture.

Let's explorer how to create a system architecture diagram in the form of a Mermaid using Mermaid Chart Extension for GitHub Copilot.

We'll use the example of tables from "Base Application" (namespace Microsoft.Inventory.Item):

• Item
• Item Category
• Item Unit of Measure
• Item Variant

Generate Mermaid diagram from AL files

Let's attach the files with the AL code that contains the table definitions. Then I use the command @mermaid-chart in the Copilot chat window.

The result is the Mermaid diagram that represents the table structure.

erDiagram
    ITEM {
        string No
        string No_2
        string Description
        string Search_Description
        string Description_2
        boolean Assembly_BOM
        string Base_Unit_of_Measure
        int Price_Unit_Conversion
        enum Type
        string Inventory_Posting_Group
        string Shelf_No
        string Item_Disc_Group
        boolean Allow_Invoice_Disc
        int Statistics_Group
        int Commission_Group
        decimal Unit_Price
        enum Price_Profit_Calculation
        decimal Profit_Percent
        enum Costing_Method
        decimal Unit_Cost
        boolean Critical
        string Common_Item_No
    }
    ITEM_UNIT_OF_MEASURE {
        string Item_No
        string Code
        decimal Qty_per_Unit_of_Measure
        decimal Qty_Rounding_Precision
        boolean Coupled_to_Dataverse
        decimal Length
        decimal Width
        decimal Height
        decimal Cubage
        decimal Weight
    }
    ITEM_VARIANT {
        string Code
        string Item_No
        string Description
        string Description_2
        guid Item_Id
        boolean Blocked
        boolean Sales_Blocked
        boolean Purchasing_Blocked
        boolean Service_Blocked
    }
    ITEM_CATEGORY {
        string Code
        string Parent_Category
        string Description
        int Indentation
        int Presentation_Order
        boolean Has_Children
        datetime Last_Modified_Date_Time
        guid Id
    }
    ITEM ||--o{ ITEM_UNIT_OF_MEASURE : has
    ITEM ||--o{ ITEM_VARIANT : has
    ITEM }|..|{ ITEM_CATEGORY : belongs_to
        

The diagram itself will look like this

Conclusion

As always, there are some limitations to consider.

• I had to remove some fields from the tables to make the diagram more compact and avoid the following error message:

• As you can see, the diagram is generated but isn't very informative, especially regarding the relationships between tables.

Despite these limitations and inaccuracies, the Mermaid Chart Extension for GitHub Copilot is a helpful tool for visualizing your code.