Deploying the app

To Deploy the app you will need somewhere to host the files. For the demo in the video I simply hosted the files in Azure Storage and restricted access to the files and container.

There are other options like hosting it on Azure Web Apps where you could integrate with Azure AD for authentication.

Basically to deploy it you would add the files from the github repo to your folder on whatever type of web hosting you want to use. In my case I just put them in a blob container.

The files will be mainly static except the data.json file which contains the data the web page uses to draw the diagram. In here you will need to update the json with data representing your intefaces.

Below you can see some of the json from the sample which is also in this file:
https://github.com/michaelstephensonuk/IntegrationPlaybook-MermaidArchitectureDiagrams/blob/main/data.json

We seperated the app displaying the diagram from the integration catalog so that it would be easy for people to use different tools to host their catalog and they could build a simple tool (we used Power Automate) to create the json file and refresh the diagram.

[
  {
    "SourceSystem": "SAP",
    "DestinationSystem": "IBM",
    "Label": "Supplier Sync",
    "Direction": "One Way",
    "Program": "Supplier Management Program",
    "Project": "Partner Sync",
    "Status": "Production"
  },
  {
    "SourceSystem": "SAP",
    "DestinationSystem": "Supplier_Portal",
    "Label": "Supplier Sync",
    "Direction": "One Way",
    "Program": "Supplier Management Program",
    "Project": "Partner Sync",
    "Status": "Production"
  }, 
  {
    "SourceSystem": "SAP",
    "DestinationSystem": "Customer_Portal",
    "Label": "Invoicing",
    "Direction": "Bi-Directional",
    "Program": "Customer Management Program",
    "Project": "Finance",
    "Status": "Production"
  }
]

Once your files are deployed to your web server we just used Microsoft Teams to use the website tab to put the link to the diagram in it so that its easy to allow our team and stakeholders a way to see the diagram.