This guide provides comprehensive instructions for deploying the Azure Flowchart Generator Function App. This updated solution ensures that all data remains within your Azure environment by implementing local Mermaid rendering.
The function now:
- Accepts a natural language description of a flowchart via an HTTP POST request.
- Converts the description to Mermaid syntax using Azure OpenAI.
- Crucially, it renders the Mermaid syntax to a PNG image locally within the Azure Function App using the
mermaid-cli(mmdc) tool, eliminating the need to send data to an external service likemermaid.ink.
The infrastructure is defined using Terraform for seamless deployment from your preferred environment, such as GitHub Codespaces or a local machine with VS Code.
Before starting, ensure you have the following in your environment:
- Azure Account and Subscription: You need an active Azure subscription.
- Azure CLI: Used for logging in and authenticating Terraform.
- Terraform CLI: Used to deploy the infrastructure.
- Azure OpenAI Service: You must have an existing Azure OpenAI resource with a deployed model.
- The function code is configured to use a deployment named
gpt-4.1-mini. If your deployment has a different name (e.g.,gpt-35-turbo), you must update theopenai_deployment_namevariable interraform/main.tfand theAZURE_OPENAI_DEPLOYMENT_NAMEsetting in the Function App after deployment.
- The function code is configured to use a deployment named
The infrastructure deployment will create the following Azure resources:
- Resource Group
- Storage Account
- Application Insights
- Consumption Plan (for Azure Functions)
- Python Azure Function App
Open your terminal in GitHub Codespaces and run the following command to log in to Azure. Follow the instructions to complete the device login flow.
```bash az login ```
Navigate to the Terraform directory and initialize the backend.
```bash cd azure-mermaid-function/terraform terraform init ```
Review the resources that Terraform will create.
```bash terraform plan ```
Apply the plan to create the Azure resources. Type yes when prompted.
```bash terraform apply ```
The output will provide the name of your new Function App (e.g., mermaid-flowchart-xxxxxxxx) and a critical note about the next step.
The Terraform script creates the Function App but cannot securely set your sensitive Azure OpenAI API key and endpoint. You must set these manually in the Azure Portal or via the Azure CLI.
- Get your Azure OpenAI details:
- Endpoint: The base URL for your Azure OpenAI resource (e.g.,
https://<your-openai-resource>.openai.azure.com/). - API Key: One of the two keys for your Azure OpenAI resource.
- Endpoint: The base URL for your Azure OpenAI resource (e.g.,
- Update Function App Settings:
- Go to the Azure Portal, find your newly created Function App (name is in the Terraform output).
- Navigate to Configuration -> Application settings.
- Find and update the following two settings with your actual values:
AZURE_OPENAI_ENDPOINT: Your Azure OpenAI endpoint URL.OPENAI_API_KEY: Your Azure OpenAI API key.
The local rendering requires Node.js and the mermaid-cli package to be installed on the Function App environment. We will use a custom deployment script for this.
If not already installed in your Codespace, install the Azure Functions Core Tools.
```bash
sudo apt-get update sudo apt-get install -y apt-transport-https
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg sudo mv microsoft.gpg /etc/apt/trusted.d/microsoft.gpg sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/azure-cli/ $(lsb_release -cs) main" > /etc/apt/sources.list.d/azure-cli.list'
sudo apt-get update sudo apt-get install azure-functions-core-tools-4 ```
The standard Python deployment process does not automatically install Node.js dependencies. The install_mermaid_cli.sh script is provided to install the necessary mermaid-cli package.
You must manually execute this script on the Function App's Kudu console after the initial code deployment.
-
Publish the code (Step 3.3).
-
Access the Kudu Console (Advanced Tools) for your Function App in the Azure Portal.
-
Navigate to the
site/wwwrootdirectory and manually execute the script:```bash
cd /home/site/wwwroot chmod +x install_mermaid_cli.sh ./install_mermaid_cli.sh ```
Navigate back to the project root directory and publish the code. Replace <YOUR_FUNCTION_APP_NAME> with the name from your Terraform output.
```bash cd .. # Back to azure-mermaid-function/ func azure functionapp publish <YOUR_FUNCTION_APP_NAME> --python ```
Remember to perform the manual Kudu step (Step 3.2) after this deployment for the local rendering to work.
Once deployed and configured, the function can be called via a simple HTTP POST request.
The endpoint URL will be:
``` https://<YOUR_FUNCTION_APP_NAME>.azurewebsites.net/api/DiagramGenerator ```
You can test the endpoint by sending a JSON payload with a prompt.
```bash
Replace <YOUR_FUNCTION_KEY> with the Function Key (found in the Azure Portal under Function -> DiagramGenerator -> Function Keys)
curl -X POST "https://<YOUR_FUNCTION_URL>/api/DiagramGenerator?code=<YOUR_FUNCTION_KEY>"
-H "Content-Type: application/json"
--data '{"prompt": "A simple login process where the user enters credentials, if valid they proceed to the dashboard, otherwise they try again."}'
--output "flowchart.png"
```
The response will be a PNG image file, which will be saved as flowchart.png in your current directory.
To destroy the Azure resources created by Terraform, run the following commands from the azure-mermaid-function/terraform directory:
```bash
terraform destroy
```
Type yes when prompted.
```